開発者向け / TOOL 20
CSS clamp() 計算ツール
フォントサイズとビューポート幅から、線形補間によるCSS clamp()を生成してプレビューします。
01 条件を入力AUTO CALCULATE
02 / YOUR RESULT結果
入力すると結果が表示されます
計算結果は参考値です。
計算方法・条件・注意点をあわせてご確認ください。
計算方法・根拠を確認 ↓
URL共有時は、対応する入力値がURLに含まれます。
使い方
最小・最大のフォントサイズと、それぞれを適用するビューポート幅を入力してください。rem基準は通常16pxのまま使えますが、プロジェクトのルート設定に合わせて変更できます。結果にはclamp()の最小値、線形式、最大値を表示し、スライダーで任意の幅における計算値を確認できます。生成された宣言はコピーしてCSSへ貼り付けられます。
計算方法・根拠
最小幅から最大幅までの間を直線で補間します。傾きは「サイズ差÷幅差」で求め、CSSのvw係数へ変換します。切片は最小サイズから、最小幅におけるvw分を引いて求めます。pxをremへ換算し、clamp(minRem, slope*vw + interceptRem, maxRem)の形へ整えます。範囲外ではclampの最小値または最大値が適用されます。
注意点
- これはフォントサイズを線形に変化させる目安です。読みやすさ、行長、ブレークポイントなどと合わせて調整してください。
- 最大幅は最小幅より大きく、最大サイズは最小サイズ以上にしてください。0以下や空欄は計算できません。
- ブラウザのルートフォントサイズを変更すると、同じrem値でもpx換算結果が変わります。入力したrem基準と実サイトの設定を揃えてください。
よくある質問
Q. なぜvwだけでなくremも混ざりますか?
A. vwの傾きを保ちつつ、切片をremで表すと、ルートフォントサイズの設定に応じて調整しやすくなります。
Q. スライダーの幅でCSSが変わりますか?
A. CSS式自体は変わりません。指定幅でclampが返す計算上のサイズをプレビューしています。