【CSS】フォントサイズの最適化。clamp()の使い方

画面幅によってフォントサイズ変えるの、メディアクエリ何段も書くの地味に面倒じゃないですか？

clamp()を使うと、メディアクエリなしでなめらかに変えられますよー

早速サンプル

See the Pen 【CSS】フォントサイズの最適化。clamp()の使い方 by 125naroom (@125naroom) on CodePen.

ブラウザの幅をリサイズしてみてください。見出しも本文も、指定した最小値と最大値の間でなめらかにサイズが変わります。今までメディアクエリで「〇〇px以下はこのサイズ」と段階的に切り替えていた部分が、clamp()ひとつで済んでしまいます。

clamp()の書き方

clamp(最小値, 推奨値, 最大値)の3つを指定します。「推奨値」が最小値〜最大値の範囲に収まっているときはそのまま使われて、範囲を超えたら最小値・最大値でストップする、という仕組みです。

h2 {
  font-size: clamp(24px, 4vw + 1rem, 48px);
}

この例だと、画面が狭いときは24px、広いときは48px、その間は画面幅に応じてなめらかに変化します。推奨値を4vw + 1remのように「画面幅（vw）」と「基準サイズ（rem）」を組み合わせて書いているのがポイントです。

vwだけじゃなく、remも混ぜる理由

vwだけで指定すると、ブラウザの文字サイズ設定を変えても表示が変わらなくなってしまいます。remを混ぜておくことで、ユーザーがブラウザ側で文字を大きくしている場合もきちんと反映されます。ちょっとした一手間ですが、アクセシビリティ的にはここが結構大事なポイントです。

コード全体はこちら

HTML

<div class="box">
  <h2>clamp()で作る、なめらかな見出し</h2>
  <p>ブラウザの幅をリサイズしてみてください。見出しも本文も、指定した最小値と最大値の間でなめらかにサイズが変わります。従来はメディアクエリで「〇〇px以下はこのサイズ」と段階的に切り替えていましたが、clamp()を使うとその間をなめらかに補間してくれます。</p>
  <p class="hint">見出し: clamp(24px, 4vw + 1rem, 48px) ／ 本文: clamp(15px, 1vw + 0.8rem, 18px)</p>
</div>

CSS

.box {
  border: 2px dashed #ccc;
  padding: 20px;
}
h2 {
  font-size: clamp(24px, 4vw + 1rem, 48px);
  margin: 0 0 10px;
}
p {
  font-size: clamp(15px, 1vw + 0.8rem, 18px);
  line-height: 1.7;
  margin: 0;
}
.hint {
  margin-top: 12px;
  font-size: 12px;
  color: #999;
}