このツールについて
従来のレスポンシブタイポグラフィは、メディアクエリのブレークポイントごとに固定サイズ間で突然切り替わります——モバイルでは16px、ある幅を超えると突然20pxに。CSS の `clamp(最小値, 優先値, 最大値)` はこの急な切り替えを連続的なスケーリングに置き換えます。フォントサイズは、選択した最小値と最大値の間でビューポートに合わせて滑らかに変化します。最小ビューポート幅より狭い場合は最小サイズに固定され、最大ビューポート幅より広い場合は最大サイズに固定されます。その間だけ可変になります。
このツールは補間計算を代わりに行います。選択したビューポート範囲における最小・最大フォントサイズ間の線形の傾きを求め、それを `vw` ベースの優先値として表現し、すぐに貼り付けられる `clamp()` 文字列にまとめます。結果を `font-size`(または他の数値プロパティ)にそのまま貼り付ければ、ブレークポイントごとの個別オーバーライドは不要になります。
よくある質問
メディアクエリではなくclamp()を使う理由は?
メディアクエリはブレークポイントで固定サイズ間をジャンプしますが、clamp()はビューポートのサイズ変更に応じて最小値と最大値の間を滑らかかつ連続的にスケーリングします。どの幅でも目に見える「ジャンプ」はありません。
clamp()はすべてのブラウザで動作しますか?
はい。CSS clamp()は2020年以降、すべての主要ブラウザ(Chrome、Firefox、Safari、Edge)でサポートされているため、今日ではほぼすべてのユーザーに対してフォールバックなしで本番環境で安全に使用できます。