CSS clamp() で実現する究極のレスポンシブフォント設定
本ブログは殆どAIに書かせています。
ハルシネーション(チャットAIなどが、もっともらしい誤情報（＝事実とは異なる内容や、文脈と無関係な内容）を生成すること)にご注意ください。
アフィリエイトリンク(広告)もありますのでご了承ください。
CSS clamp() で実現する究極のレスポンシブフォント設定
Webサイトのフォントサイズを設定する際、PCでは大きく、スマホでは小さく表示したいという場面は多々あります。これまでは @media (メディアクエリ) を使って細かく指定していましたが、現在は clamp() 関数を使うことで、たった一行で滑らかな可変フォントサイズが実現可能です。
html {
font-size: clamp(10px, 1vw, 16px);
}
1. clamp() 関数の仕組み
clamp(最小値, 推奨値, 最大値) の順で指定します。このコードの意味を分解すると以下のようになります。
- 最小値 (10px)： 画面がどんなに小さくなっても、これより小さくなりません。
- 推奨値 (1vw)： 通常時の計算式。
1vwは「画面幅の1%」を意味します。 - 最大値 (16px)： 画面がどんなに大きくなっても、これより大きくなりません。
2. なぜ 1vw を使うのか？
vw (viewport width) 単位を使うことで、ブラウザの横幅に合わせて文字サイズがリアルタイムに伸縮します。しかし、1vw 単体だと以下のような問題が起こります。
| 画面幅 | 1vw の時のサイズ | 見え方 |
|---|---|---|
| スマホ (320px) | 3.2px | 小さすぎて読めない |
| 大型モニタ (2560px) | 25.6px | 大きすぎる |
そこで clamp() を組み合わせることで、「基本は1vwで動くけれど、10px〜16pxの間で止まってね」という命令が可能になります。
3. 導入のメリット
■ メディアクエリの削減
「320pxの時は◯px、768pxの時は◯px…」といった複雑な分岐を書く必要がなくなり、コードがスッキリします。
■ 滑らかな変化
メディアクエリのような「カチッ」とした切り替わりではなく、画面幅を広げるのに合わせてフォントサイズがシームレスに変化します。
ルート（htmlタグ）に固定値（px）を含む clamp を設定すると、ブラウザのユーザー設定による文字サイズ変更を阻害する可能性があります。
まとめ
html { font-size: clamp(10px, 1vw, 16px); } は、最小値で可読性を守りつつ、最大値でレイアウト崩れを防ぐ、バランスの取れた指定方法と言えます。
さらに使いやすくするために：
font-size: clamp(10px, 0.5rem + 0.5vw, 16px);
このように rem を混ぜることで、ユーザーがブラウザ設定で文字を大きくしている場合にも柔軟に対応できるようになります。