2021-10-09

CSS: font-size フォントサイズを指定する

WebページのフォントサイズをCSSで指定するには、 font-size プロパティを使用します。

font-size に指定する値は次の４通りあります。

• 実数値＋単位
• パーセント値＋%
• 相対サイズキーワード
• 絶対サイズキーワード

実数値＋単位

数値に単位を付けて指定します。（例: 14px, 12pt、1em）

パーセント値＋%

親要素のフォントサイズに対するパーセンテージを指定します。（例: 100%、120%）

相対サイズキーワード

larger、smallerの２つがあります。親要素のフォントサイズに対する相対サイズです。 larger の場合は1周り大きいサイズ、smaller の場合は１回り小さいサイズになります。 1周りとはどれくらいかは、次で説明する絶対サイズキーワードを参考にしてください。

絶対サイズキーワード

xx-small、x-small、small、medium、large、x-large、xx-large の７つのキーワードがあります。 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 サンプル

複数のフォントサイズを指定してみました。表示の違いは下の通りです。