font-sizeプロパティに指定できる値
font-sizeプロパティは次のような値を設定することができます。
| 値 | 内容 |
|---|---|
| xx-small | x-smallより小さいサイズ。 |
| x-small | smallより小さいサイズ。 |
| small | mediumより小さいサイズ。 |
| medium | ブラウザの標準サイズ。 |
| large | mediumより大きいサイズ。 |
| x-large | largeより大きいサイズ。 |
| xx-large | x-largeより大きいサイズ。 |
| smaller | 引き継いだサイズよりも1段階小さいサイズ。 |
| larger | 引き継いだサイズよりも1段階大きいサイズ。 |
| 値 + 単位 | 数値と人気の単位を組み合わせた指定方法。 単位は「px」「pt」「em」などで指定。 |
| 値 + % | 引き継いだサイズに対して、%値で指定したサイズで表示します。 |
以降は、font-sizeプロパティを使用するコード例と表示例です。
使用例1: 数値以外のサイズ指定
数値以外の「xx-small」〜「xx-large」の範囲でサイズ指定した例です。
絶対指定となるため、親要素のフォントサイズに影響されません。
CSS コード例
.sample_css1 .text1 {
font-size: xx-small;
}
.sample_css1 .text2 {
font-size: x-small;
}
.sample_css1 .text3 {
font-size: small;
}
.sample_css1 .text4 {
font-size: medium;
}
.sample_css1 .text5 {
font-size: large;
}
.sample_css1 .text6 {
font-size: x-large;
}
.sample_css1 .text7 {
font-size: xx-large;
}表示例：
xx-smallを指定
x-smallを指定
smallを指定
mediumを指定
largeを指定
x-largeを指定
xx-largeを指定
使用例2: 数値 + pxでサイズ指定
「数値 + px」で指定した例です。
絶対指定となるため、親要素のフォントサイズに影響されません。
CSS コード例
.sample_css2 .text1 {
font-weight: 10px;
}
.sample_css2 .text2 {
font-weight: 14px;
}
.sample_css2 .text3 {
font-weight: 20px;
}表示例：
10pxを指定
14pxを指定
20pxを指定
使用例3: 数値 + %でサイズ指定
「数値 + %」で指定した例です。
%は親要素の値を基準にするので注意してください。
CSSコード例
.sample_css3 .text1 {
font-size: 80%;
}
.sample_css3 .text2 {
font-size: 100%;
}
.sample_css3 .text3 {
font-size: 140%;
}表示例：
80%を指定
100%を指定
140%を指定