CSS ・ 文字・フォント
font-size
文字の大きさ
文字の大きさを指定します。px のような固定の単位のほか、親要素を基準にした em や、ルートを基準にした rem も使えます。
01
サンプルコード
HTML
1<p class="small">小さな文字（14px）</p>
2<p class="base">標準の文字（1rem）</p>
3<p class="large">大きな文字（1.5rem）</p>
CSS
1.small {
2 font-size: 14px;
3}
4.base {
5 font-size: 1rem;
6}
7.large {
8 font-size: 1.5rem;
9}
02
実行結果
ブラウザでの表示
03
解説
font-size は文字の大きさを指定するプロパティです。ブラウザの標準は 16px です。
rem はルート要素（html）の文字サイズを基準にした単位で、1.5rem なら 16px × 1.5 = 24px になります。利用者がブラウザで文字を大きく設定したときにも追従するため、本文には rem がよく使われます。
em は親要素の文字サイズが基準です。入れ子にすると倍率が重なるため、使う場所に注意します。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
16px | 固定の大きさ |
1.25rem | ルート（html）の文字サイズの1.25倍 |
1.2em | 親要素の文字サイズの1.2倍 |
120% | 親要素の文字サイズの120% |
clamp(1rem, 2.5vw, 2rem) | 画面幅に応じて最小〜最大の範囲で変化 |
画面幅に応じて見出しを伸縮させる
clamp() を使うと、ブレークポイントなしで滑らかに変化します。
CSS
1h1 {
2 font-size: clamp(1.75rem, 4vw, 3rem);
3}
注意点
- 0112px 未満の文字は読みにくくなります。本文は16px程度を目安にします。
- 02html に font-size: 62.5% を指定して 1rem=10px にする手法は、利用者の設定を変えてしまうため注意が必要です。