CSS clamp計算（流動タイポグラフィ）

CSSの clamp(最小, 推奨, 最大) を使うと、サイズが画面幅に応じてなめらかに大きくなり、最小値と最大値で止まります。メディアクエリは不要です。難しいのは中央の値で、ある画面幅で最小サイズ、別の幅で最大サイズになるように、remとvwを混ぜる必要があります。この計算ツールは、4つの数値からその値を求め、代表的な画面幅でのサイズを表示し、vw単位に伴うWCAGの文字拡大の問題も確認します。

使い方

1. 最小サイズと最大サイズを入力し、単位がpxかremかを選びます。
2. 各サイズを適用する画面幅を入力します。
3. 結果の単位（remを推奨、またはpx）とプロパティ名を選びます。
4. CSSの1行をコピーします。「追加サイズ」に行を足すと、CSS変数のセットが得られます。

計算式

slope = (max − min) ÷ (vw₁ − vw₀) · intercept = min − slope × vw₀ · clamp(min, intercept + slope × 100vw, max)

サイズはまずpxに変換し（rem × ルートのサイズ）、切片は結果用に再びremへ戻します。2つの幅の間ではサイズは直線に沿って変化し、その外側ではclamp()が最小値または最大値を保ちます。

計算例

320 pxで16 pxから1280 pxで24 pxへ：傾き = 8 ÷ 960 = 0.008333なので、vwの部分は0.8333vwで、切片 = 16 − 0.008333 × 320 = 13.33 px = 0.8333rem です。結果は clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem) です。タブレットの幅768 pxでは、13.33 + 6.4 = 19.73 pxになります。