基本的な文字の装飾を学ぼう
文字の装飾をする主なプロパティは、以下の通りです。
| プロパティ | 説明 |
|---|---|
| color | 文字色を指定する |
| font-size | 文字サイズを指定する |
| font-weight | 文字の太さを指定する |
| text-align | 文字の水平方向の位置を指定する |
| text-decoration | 文字に装飾的な線を指定する |
| font-family | 文字の書体を指定する |
よく使われるプロパティなので、1つ1つ確かめてみよう。
文字色を指定する
文字色は、colorプロパティで指定します。
色の指定は「カラーネーム」や「カラーコード」で行うことができます。
1
2
3
セレクタ {
color: 色;
}
カラーネームでは、redやgreenなどの色の名前を指定し、カラーコードでは、色を#に続く6桁の16進数で表記します。
1
2
3
4
5
6
7
セレクタ {
color: red; /* カラーネーム */
}
セレクタ {
color: #ff0000; /* カラーコード */
}
カラーコードの6桁は、2桁ずつがRGB（赤、緑、青）の色の強さを表しており、16進数の「0123456789ABCDEF」では、0が1番弱く、Fが1番強くなります。
16進数で6桁の英数字を組み合わせると、1,600万通り以上の色を表現することができるので、カラーコードは覚えようとせずにカラーコード表で確かめるようにしましょう。
以下のコードを編集して、colorプロパティで文字色を指定してみましょう。
See the Pen 文字色を指定する by miyajima yuya (@pikawaka) on CodePen.
カラーネームは、OSやブラウザのバージョンによって正しく表示できない色もあるので、注意してください。
文字のサイズを指定する
文字のサイズは、font-sizeプロパティで指定します。
サイズの指定は、数値に「px」や「em」などの単位を追記します。
1
2
3
セレクタ {
font-size: サイズ;
}
pxによる指定
px（pixels/ピクセル）は最も一般的な単位で、文字を表示したい高さのピクセル数です。他の要素に左右されることはありません。
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<!-- head要素は省略 -->
<body>
<h1>CSS<span>Cascading Style Sheets</span></h1>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
html {
font-size: 16px;
}
h1 {
font-size: 32px; /* 32pxのまま */
}
span {
font-size: 16px; /* 16pxのまま */
}
1pxはコンピュータの画面などを表示する1つのドットに相当するので、直感的に使いやすく初学者におすすめの指定方法です。
ただしpxは絶対値なので、ディスプレイ解像度によって端末ごとに見た目の文字サイズが異なることがあります。
emによる指定
em（エム）は、基本的に親要素を基準に文字のサイズを計算する単位です。2emであれば「親要素の文字サイズの2.0倍」のように相対的な比率となります。
親要素とは「その要素を含むすぐ上の階層にある要素のこと」で、以下のコードのh1であれば、bodyが親要素にあたります。
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<!-- head要素は省略 -->
<body>
<h1>CSS<span>Cascading Style Sheets</span></h1>
</body>
</html>
以下のようにh1の文字の大きさを2emとした場合、親要素であるbodyの文字のサイズを求めますが、何も指定していないので、さらに上位の要素であるhtmlを求めます。
htmlの文字サイズを基準にh1の文字サイズが決まります。
2emであれば「親要素の文字サイズの2.0倍」のように相対的な比率となるので、h1の文字サイズは16×2=32で32pxです。
1
2
3
4
5
6
7
html {
font-size: 16px;
}
h1 {
font-size: 2em; /* 32pxになる */
}
以下のようにspanの文字サイズを0.5emとした場合は、spanの親要素であるh1の文字サイズが基準となります。
h1の文字サイズは32pxなので、spanの文字サイズは32×0.5=16で16pxです。
1
2
3
4
5
6
7
8
9
10
11
html {
font-size: 16px;
}
h1 {
font-size: 2em; /* 32pxになる */
}
span {
font-size: 0.5em; /* 16pxになる */
}
emを使うことで、ある要素を基準として部分的にサイズを指定する場合に便利です。
今回はemの特徴をわかりやすくするために、「基本的に親要素を基準」として説明しましたが、本来は親要素の文字サイズを求める前に、まずはemを指定した要素自身の文字サイズを求めます。
文字の太さを指定する
文字の太さは、font-weightプロパティで指定します。
1
2
3
セレクタ {
font-weight: 太さ;
}
文字の太さは、数値などでも細かく指定する方法がありますが、基本的にはbold（太字）とnomal（標準）の2段階以外のものを使用することはほとんどありません。
1
2
3
p {
font-weight: bold;
}
See the Pen p要素を太字にする場合 by miyajima yuya (@pikawaka) on CodePen.
文字の水平方向の位置を指定する
文字の水平方向の位置は、text-alignプロパティで指定します。
1
2
3
セレクタ {
text-align: 位置;
}
文字の位置は、left（左揃え）・right（右揃え）・center（中央揃え）で指定します。なお、初期設定では左揃えで表示されます。
1
2
3
4
5
6
7
h1 {
text-align: center; /* 中央揃えにする */
}
p {
text-align: right; /* 右揃えにする */
}
See the Pen 文字の水平方向の位置を指定する by miyajima yuya (@pikawaka) on CodePen.
文字に装飾的な線を指定する
文字に線を引くには、text-decorationプロパティで指定します。
1
2
3
セレクタ {
text-decoration: 線の種類;
}
線の種類は、underline（下線）・overline（上線）・line-through（取り消し線）が指定できます。
1
2
3
4
5
6
7
h1 {
text-decoration: overline; /*上線を引く */
}
p {
text-decoration: underline; /*下線を引く */
}
See the Pen 文字に装飾的な線を指定する by miyajima yuya (@pikawaka) on CodePen.
上記のCSSを編集して、p要素に取り消し線を引いてみましょう。
文字の書体を指定する
文字の書体は、font-familyプロパティで指定します。
「書体名」はダブルクォーテーション（"）、またはシングルクォーテーション（'）の引用符で囲むことが推奨されています。
1
2
3
セレクタ {
font-family: "書体名";
}
一般に文字の書体は、Webページ全体に対してまとめて適用するので、bodyをセレクタとして記述します。
1
2
3
body {
font-family: "書体名";
}
基本的に複数の書体を指定する
書体は、Webページを閲覧するユーザー側の環境に依存します。ユーザーのパソコンに指定した書体が入っていなければ表示されず、代替の書体で表示されます。
多くの環境に対応できるように、基本的に複数の書体を指定する必要があります。
1
2
3
body {
font-family: "メイリオ", "MSゴシック", "ヒラギノ明朝"; /* カンマで区切る */
}
複数の書体を指定する場合は、前に記述する書体から優先的に適用されます。
前に欧文書体を記述する
font-familyプロパティでは、前に記述する書体から優先的に適用されるため、英語部分に欧文書体、日本語部分に日本語書体を使いたい場合は、前に欧文書体を記述します。
例えば、英語部分にHelveticaという欧文書体、日本語部分にヒラギノ明朝 ProNという日本語書体を使う場合は、以下のように記述します。
Helveticaをヒラギノ明朝 ProNよりも前に記述したことで、以下のように英語部分にはHelveticaが優先的に適用されます。
誤って日本語書体を前に記述した場合は、以下のように英語部分もヒラギノ明朝 ProNが適用されてしまうので、書体を記述する順番には気をつけましょう。
- font-familyプロパティは、文書の書体を指定することができる
- 書体はユーザー側の環境に依存するので、多くの環境に対応できるように、複数の書体を指定する必要がある
- 前に記述する書体から優先的に適用される
最後に総称名を記述する
font-familyプロパティ値の最後には、書体の「総称名」を記述します。
総称名は、ユーザーのパソコンに指定した書体がどれも入っていなければ、せめてどの系統の書体を表示させたいのかをWebブラウザに伝えるためのものです。
1
2
3
body {
font-family: "書体名1", "書体名2" 総称名;
}
「書体名」はダブルクォーテーション（"）、またはシングルクォーテーション（'）の引用符で囲みましたが、「総称名」は引用符で囲わないので注意してください。
1
2
3
body {
font-family: "メイリオ", "MSゴシック", "ヒラギノ明朝", serif;
}
総称名は、以下の表のように5種類あります。
| 総称名 | 説明 |
|---|---|
| serif | 明朝体のような書体 |
| sans-serif | ゴシック体のような書体 |
| cursive | 筆記体のような書体 |
| fantasy | 装飾が施されている書体 |
| monospace | 等間隔に文字が配置される等幅書体 |
総称名にserifを記述すると、通常はOSやブラウザごとにデフォルトで設定された明朝体系の書体が自動的に適用されます。
- font-familyプロパティ値の最後に「総称名」を記述する
- 総称名は、ユーザー側に指定した書体が入っていなければ、どの系統の書体を表示させるかWebブラウザに伝えるためのもの
- 書体名は引用付で囲うが、総称名は引用付で囲わない
スタイルの継承について理解しよう
CSSには、スタイルが親要素から子要素へ引き継がれる（継承）プロパティがあります。
一般例として継承するプロパティには、colorプロパティが挙げられます。
次のCSSでは、span要素の文字色がcolorプロパティで青に指定されます。
See the Pen 継承の例１ by miyajima yuya (@pikawaka) on CodePen.
継承を学習する前であれば、p要素の文字色も青にする場合は、span要素と同じようにスタイルを指定したかもしれません。
1
2
3
4
5
6
7
p {
color: blue;
}
span {
color: blue;
}
しかし、colorプロパティは継承する（親要素のスタイルを子要素に引き継ぐ）ことができるプロパティなので、親要素であるp要素に文字色を指定するだけでspan要素にも反映されます。
以下のCSSのようにspan要素のスタイル指定は不要です。
See the Pen 継承の例2 by miyajima yuya (@pikawaka) on CodePen.
継承とは、親要素のプロパティ値が子要素へ引き継がれること
継承するプロパティ
継承する主なプロパティは、以下の表の通りです。
| 継承できるプロパティ | 説明 |
|---|---|
| color | 文字色を指定する |
| font-size | 文字サイズを指定する |
| font-weight | 文字の太さを指定する |
| text-align | 文字の水平方向の位置を指定する |
| text-decoration | 文字に装飾的な線を指定する |
| font-family | 文字の書体を指定する |
基本的な文字の装飾で学習したプロパティですね。
上記のほかにも、継承するプロパティには、文字の行間を調整するline-heightプロパティや文字の字間を調整するletter-spacingプロパティがあります。
継承しないプロパティ
CSSのプロパティは、全て継承するプロパティではありません。
例として継承しないプロパティには、要素の境界に枠線を指定するborderプロパティが挙げられます。次のCSSでは、span要素にborderプロパティで実線が指定されます。
See the Pen 継承の例3 by miyajima yuya (@pikawaka) on CodePen.
上記では、span要素の境界だけに実線が引かれていますね。
borderプロパティは継承されないので、次のようにCSSでspan要素の親要素であるp要素に指定してもspan要素には反映されません。
See the Pen 継承の例4 by miyajima yuya (@pikawaka) on CodePen.
p要素とspan要素の境界に実線を引く場合は、以下のCSSのように各要素に対してborderプロパティで指定する必要があります。
See the Pen 継承の例5 by miyajima yuya (@pikawaka) on CodePen.
継承しないプロパティは、上記のborderプロパティ以外にも、これから学習するボックスモデルのプロパティ・displayプロパティがあります。
現段階では、継承しないプロパティもあるということだけ覚えておこう
この章のまとめ
重要なポイントをおさえよう！
- カラーコードの6桁は、2桁ずつがRGB（赤、緑、青）の色の強さを表す
- CSSには、スタイルが親要素から子要素へ引き継がれる（継承）プロパティがある
- 継承できるプロパティは、親要素に指定すると子要素にも反映される
この記事で学んだことをTwitterに投稿して、アウトプットしよう！
Twitterの投稿画面に遷移します