CSS clamp()でレスポンシブフォントを実現
CSS clamp(最小値, 基準値, 最大値)関数を使うと、メディアクエリなしで画面幅に応じて滑らかに変化するフォントサイズを実装できます。基準値にvw単位を使うことで画面幅に比例して線形にサイズが変化し、最小・最大の範囲内に収まります。
計算の仕組み
（最大フォント－最小フォント）÷（最大ビューポート－最小ビューポート）で傾きを求め、y切片＝最小フォント－傾き×最小ビューポートを計算します。最小ビューポート以下では最小フォント、最大ビューポート以上では最大フォントに固定され、その間は線形に変化します。
実際の活用例
見出しをモバイル(375px)で24px、デスクトップ(1440px)で40pxにしたい場合、clamp(1.5rem, 1.5vw + 0.94rem, 2.5rem)のような値が生成されます。これをCSSに直接貼り付けるだけでレスポンシブタイポグラフィが完成します。
よくある質問
ブラウザの対応状況は？
Chrome 79+、Firefox 75+、Safari 13.1+、Edge 79+など現代のブラウザすべてで対応しています。Internet Explorerは非対応のため、IE対応が必要な場合はpxのフォールバックを追加してください。
フォント以外のCSSプロパティにも使えますか？
はい。padding、margin、width、height、gapなど数値を受け取るすべてのCSSプロパティで使用できます。ブレークポイントなしのレスポンシブ余白システム構築にも非常に有用です。