Aug. 17th,2020
プロパティについて
概要
“font-size”プロパティはフォント・サイズ、文字の大きさを指定するプロパティです。
スケーラブル・フォントの場合、“font-size”プロパティはEMボックスの高さを示します。文字がどのようにEMボックスの中に収まるかはフォントによって異なるため、“font-size”プロパティの値が同じでもフォントが異なると実際に文字が表示される大きさは異なります。
ブラウザによって表示できる文字の大きさに制約がある場合があります。
文書内のすべての文字の大きさを“em”などのフォント相対長の単位で指定すると文字の大きさがブラウザの既定の大きさを基準にして決められます。この場合、弱視のユーザーが文字を大きめに設定している場合などにその設定がすべての文字に反映されるため、アクセシビリティ観点から良いとされます。
“font-size”プロパティの値はその要素や子孫要素のフォント相対長(“em”や“rem”)の基準となり、“width”プロパティや“height”プロパティなどのプロパティによる大きさの指定や子孫要素のフォント・サイズに影響することがあります。
“line-height”プロパティで指定した行の高さよりも“font-size”プロパティで指定した文字の大きさが大きいと文字が重なって表示されます。
サンプルコード
p { font-size: large;}
値
| 値 | 説明 |
|---|---|
| “<absolute-size>”値 | |
| xx-small | “x-small”よりさらに小さい (通常“medium”の3/5倍の大きさです。) |
| x-small | “small”より小さい (通常“medium”の3/4倍の大きさです。) |
| small | ユーザー・エージェントのデフォルトの大きさより小さい (通常“medium”の8/9倍の大きさです。) |
| medium | ユーザー・エージェントのデフォルトの大きさ (一般的に既定値は“16px”です。) |
| large | ユーザー・エージェントのデフォルトの大きさより大きい (通常“medium”の6/5倍の大きさです。) |
| x-large | “large”より大きい (通常“medium”の3/2倍の大きさです。) |
| xx-large | “x-large”よりさらに大きい (通常“medium”の2/1倍の大きさです。) |
xxx-large |
“xx-large”よりさらに大きい (通常“medium”の3/1倍の大きさです。) |
| “<relative-size>”値 | |
| smaller | 親要素のフォント・サイズより小さい (親要素の値を1.2~1.5の比率で小さくするか、親要素の値が“<absolute-size>”値である場合は一段階小さい大きさにします。) |
| larger | 親要素のフォント・サイズより大きい (親要素の値を1.2~1.5の比率で大きくするか、親要素の値が“<absolute-size>”値である場合は一段階大きい大きさにします。) |
| “<length-percentage>”値 | |
| <length> | “em”、“ex”などでフォント・サイズを指定 |
| <percentage> | 親要素のフォント・サイズを“100%”としてフォント・サイズを指定 |
| 他の値 | |
| 共通キーワード | |
“<absolute-size>”値や“<relative-size>”値で文字の大きさを指定した時、可読性を確保するためにユーザー・エージェントはデバイス・ピクセルでEMボックスの高さが9ピクセル以下にならないようにすることが求められています。
仕様書
定義されている仕様書
 |
 |
 |
 |
|
|---|---|---|---|---|
|
| 
| 
| |
| font-size |   |
|
|
|
|
|
|
|
|
|---|---|---|---|---|
|
|
|
|
| |
| xx-small | |
|
|
|
| x-small | |
|
|
|
| small | |
|
|
|
| medium | |
|
|
|
| large | |
|
|
|
| x-large | |
|
|
|
| xx-large | |
|
|
|
| xxx-large |   |
|
|
|
| larger | |
|
|
|
| smaller | |
|
|
|
| <length> | |
|
|
|
| <percentage> | |
|
|
|
使用例
“<absolute-size>”値で指定する
.font-3s { font-size: xx-small;}
.font-2s { font-size: x-small;}
.font-s { font-size: small;}
.font-m { font-size: medium;}
.font-l { font-size: large;}
.font-2l { font-size: x-large;}
.font-3l { font-size: xx-large;}
.font-4l { font-size: xxx-large;}
<p class="font-3s">font-size: xx-small;</p>
<p class="font-2s">font-size: x-small;</p>
<p class="font-s">font-size: small;</p>
<p class="font-m">font-size: medium;</p>
<p class="font-l">font-size: large;</p>
<p class="font-2l">font-size: x-large;</p>
<p class="font-3l">font-size: xx-large;</p>
<p class="font-4l">font-size: xxx-large;</p>
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;
“<absolute-size>”値で指定されたフォント・サイズは親要素のフォント・サイズの影響を受けません。
“<relative-size>”値で指定する
.font-small { font-size: smaller;}
.font-large { font-size: larger;}
.box-font10px { font-size: 10px;}
.box-font16px { font-size: 16px;}
文字の大きさを10pxに指定した“div”要素
<div class="box-font10px">
<p>この“div”要素の文字の大きさは10pxです。</p>
<p class="font-small">font-size: smaller;</p>
<p class="font-large">font-size: larger;</p>
</div>
文字の大きさを16pxに指定した“div”要素
<div class="box-font16px">
<p>この“div”要素の文字の大きさは16pxです。</p>
<p class="font-small">font-size: smaller;</p>
<p class="font-large">font-size: larger;</p>
</div>
この“div”要素の文字の大きさは10pxです。
font-size: smaller;
font-size: larger;
文字の大きさを16pxに指定した“div”要素
この“div”要素の文字の大きさは16pxです。
font-size: smaller;
font-size: larger;
“<relative-size>”値で指定されたフォント・サイズは“<absolute-size>”値で指定されたフォント・サイズと違い、親要素のフォント・サイズの影響を受けます。
“em”などのフォント相対長の単位でも親要素のフォント・サイズを基準とした相対的なフォント・サイズを指定できます。
“<length>”値で指定する
.font-20px { font-size: 20px;}
.font-2cm { font-size: 2cm;}
.font-2em { font-size: 2em;}
.font-2rem { font-size: 2rem;}
<p class="font-20px">font-size: 20px;</p>
<p class="font-2cm">font-size: 2cm;</p>
<p class="font-2em">font-size: 2em;</p>
<p class="font-2rem">font-size: 2rem;</p>
font-size: 20px;
font-size: 2cm;
font-size: 2em;
font-size: 2rem;
“<percentage>”値で指定する
.font-20p { font-size: 20%;}
.font-60p { font-size: 60%;}
.font-100p { font-size: 100%;}
.font-140p { font-size: 140%;}
文字の大きさを10pxに指定した“div”要素
<div class="box-font10px">
<p>この“div”要素の文字の大きさは10pxです。</p>
<p class="font-20p">font-size: 20px;</p>
<p class="font-60p">font-size: 2cm;</p>
<p class="font-100p">font-size: 2em;</p>
<p class="font-140p">font-size: 2rem;</p>
</div>
文字の大きさを16pxに指定した“div”要素
<div class="box-font16px">
<p>この“div”要素の文字の大きさは16pxです。</p>
<p class="font-20p">font-size: 20px;</p>
<p class="font-60p">font-size: 2cm;</p>
<p class="font-100p">font-size: 2em;</p>
<p class="font-140p">font-size: 2rem;</p>
</div>
この“div”要素の文字の大きさは10pxです。
font-size: 20%;
font-size: 60%;
font-size: 100%;
font-size: 140%;
文字の大きさを16pxに指定した“div”要素
この“div”要素の文字の大きさは16pxです。
font-size: 20%;
font-size: 60%;
font-size: 100%;
font-size: 140%;
