CSS clamp() ジェネレーター | メディアクエリ不要の流体タイポグラフィ

最小・最大のビューポート幅と値を指定すると、線形補間で clamp(最小値, 傾きvw + 切片, 最大値) の形のレスポンシブな CSS 値を算出するツール。font-size から padding、gap、border-radius まで対応し、px と rem を切り替えられる。計算の傾き・切片の内訳と、ビューポート幅ごとの実測値プレビューも並べて確認できる。

💡 このツールについて

レスポンシブデザインで「スマホでは 16px、デスクトップでは 32px、その間はなめらかに変化させたい」という要件は頻出する。従来はブレークポイントごとにメディアクエリを積み重ねる必要があり、刻みが粗いと文字サイズが段階的にカクッと変わってしまう。

clamp() は最小値・推奨値・最大値の 3 引数を取り、推奨値に vw 単位を混ぜることでビューポート幅に連動した中間値を作れる。問題は推奨値の Xvw + Ypx を手で求めるのが面倒な点にある。傾きは (最大値 − 最小値) / (最大VP − 最小VP)、切片は 最小値 − 傾き × 最小VP という一次関数の式で決まるが、これを毎回電卓で叩くのは現実的でない。

このツールは 4 つの数値を入れるだけでその一次方程式を解き、コピーしてそのまま使える宣言を返す。傾きと切片の計算過程を表示するので、出力された式が何を意味するかを追える。下部のプレビューは 320px から 1920px までの代表的な幅で実際の値を棒グラフ化し、両端でクランプ（頭打ち）される様子まで見える。

🧐 よくある質問

Q. px 入力なのに rem で出力できますか？ できる。出力単位で rem を選ぶと root font-size（既定 16px）を基準に px から rem へ換算する。アクセシビリティの観点では、ユーザーのブラウザ設定文字サイズを尊重する rem 出力が font-size には推奨される。

Q. 最小値より最大値を小さくするとどうなりますか？ 傾きが負になり、ビューポートが広がるほど値が小さくなる clamp() を生成する。逆方向のスケーリングも有効な CSS なので、意図的に縮小させたい余白などに使える。

Q. 最小ビューポートと最大ビューポートを同じ値にできますか？ できない。同値や逆転（最小 ≥ 最大）では一次関数の傾きが定義できないため、エラーメッセージを表示して計算を止める。最小 < 最大の関係で入力する。

Q. vw を使った clamp() はアクセシビリティ上問題ありませんか？ 推奨値が vw のみだとユーザーのズームが効きにくくなる懸念がある。このツールは vw + rem（または px）の形で固定オフセットを残すため、最小値が rem 基準なら一定のズーム耐性を保てる。

Q. font-size 以外にも使えますか？ 使える。padding・margin・gap・width・height・border-radius・letter-spacing・line-height をプリセットで選べるほか、カスタムでプロパティ名を直接指定できる。

📚 豆知識

clamp() は CSS Values and Units Module Level 4 で標準化された数学関数で、min() max() と同じファミリーに属する。clamp(MIN, VAL, MAX) は内部的には max(MIN, min(VAL, MAX)) と等価であり、3 つの値の「中央値」を返すと考えると挙動を理解しやすい。主要ブラウザは 2020 年前後に出揃い、現在では流体タイポグラフィの定番手法として広く使われている。vw と固定単位を足し合わせるテクニックは「fluid type」「CSS locks」などの名前で以前から知られていたが、calc() と複数のメディアクエリを要した時代に比べ、clamp() 一行で完結するようになった点が大きい。