CSS Clampで実現するレスポンシブなフォントサイズ

はじめに

レスポンシブデザインにおいて、フォントサイズを画面幅に応じて調整するのは重要です。従来はメディアクエリを使ってサイズを切り替えていましたが、CSSのclamp()関数を使えばよりシンプルに実現できます。

clamp()の基本構文

font-size: clamp(最小値, 推奨値, 最大値);

• 最小値: どんなに画面が狭くても下回らないサイズ
• 推奨値: 通常は vw を使って可変に設定
• 最大値: どんなに画面が広くても超えないサイズ

実装例

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}
p {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}

• スマホ → 小さすぎない文字サイズを確保
• タブレット → vw に応じて自動調整
• PC → 最大値で読みやすさを維持

メディアクエリとの違い

• メディアクエリ: 画面幅ごとに細かく設定する必要がある
• clamp: 1行で「最小〜可変〜最大」をカバーできる

応用例

• ボタンのサイズ
• 余白（padding や margin）
• レイアウトの柔軟な調整

まとめ

clamp()を使うことで、よりシンプルかつ柔軟にレスポンシブなデザインを実現できます。今後のCSS設計では、まずclamp()を検討するのがおすすめです。