CSS: font-size フォントサイズを指定する
WebページのフォントサイズをCSSで指定するには、 font-size プロパティを使用します。
font-size に指定する値は次の4通りあります。
- 実数値+単位
- パーセント値+%
- 相対サイズキーワード
- 絶対サイズキーワード
- 実数値+単位
- 数値に単位を付けて指定します。(例: 14px, 12pt、1em)
- パーセント値+%
- 親要素のフォントサイズに対するパーセンテージを指定します。(例: 100%、120%)
- 相対サイズキーワード
- larger、smallerの2つがあります。親要素のフォントサイズに対する相対サイズです。 larger の場合は1周り大きいサイズ、smaller の場合は1回り小さいサイズになります。 1周りとはどれくらいかは、次で説明する絶対サイズキーワードを参考にしてください。
- 絶対サイズキーワード
- xx-small、x-small、small、medium、large、x-large、xx-large の7つのキーワードがあります。 medium を基準とし、最も小さいサイズがxx-small で、 最も大きいサイズが xx-large です。
キーワードと表示比率の関係は次の通りです。
キーワード | 比率 |
---|---|
xx-small | 0.6倍 |
x-small | 0.75倍 |
small | 0.89倍 |
medium | 1倍 |
large | 1.2倍 |
x-large | 1.5倍 |
xx-large | 2倍 |
font-size 使用例
body {
font-size: 15px;
}
p {
font-size: 100%;
}
h1 {
font-size: x-large;
}
font-size サンプル
複数のフォントサイズを指定してみました。表示の違いは下の通りです。
このフォントサイズは「100%」です。
このフォントサイズは「1em」です。
このフォントサイズは「15pt」です。
このフォントサイズは「15px」です。
このフォントサイズは「xx-small」です。
このフォントサイズは「x-small」です。
このフォントサイズは「small」です。
このフォントサイズは「medium」です。
このフォントサイズは「large」です。
このフォントサイズは「x-large」です。
このフォントサイズは「xx-large」です。
このフォントサイズは「larger」です。
このフォントサイズは「smaller」です。