画面サイズ（小〜大）に応じて文字サイズを滑らかに伸縮させる clamp() を生成します。
clamp(min, preferred, max) は推奨値を使用しつつ、最小値と最大値の範囲内に収めます。推奨値に rem + vw を指定することで、文字サイズがビューポート幅に応じて線形に変化し、両端で固定されます。メディアクエリを何行も書く必要がなくなり、1行で完結します。
(最小ビューポート, 最小サイズ) と (最大ビューポート, 最大サイズ) を通る直線です。傾き = (最大サイズ − 最小サイズ) ÷ (最大ビューポート − 最小ビューポート)。傾き × 100 が vw の係数となり、y切片が固定値となります。
rem は、ユーザーがブラウザの基本フォントサイズを変更した際にも連動して拡大縮小します。px で固定するとその設定が無視されてしまい、アクセシビリティ上の問題が生じます。特別な理由がない限り、rem を使用してください。
vw 単体では、画面幅が狭いと小さくなりすぎ、広いと大きくなりすぎてしまいます。clamp() で最小値と最大値を制限できます。
はい。同じ計算式が padding、gap、margin にも適用できます。
2020年以降の主要なブラウザすべてに対応しています（サポートが終了したIEは対象外です）。
最小・最大のフォントサイズと、それに対応する最小・最大のビューポート幅を入力するだけです。
はい。専用のコピーボタンをクリックするだけで、生成された clamp() の CSS ルールをすぐにコピーできます。
生成される式では rem と vw 単位を組み合わせ、設定した最小値と最大値の間で滑らかなスケーリングを実現します。
いいえ。CSS clamp 計算ツールは、会員登録不要でお使いのブラウザから完全無料で直接ご利用いただけます。