CSS clamp()計算機（流動タイポグラフィ）
画面幅に応じてなめらかに拡大・縮小するfont-sizeを、clamp(最小, 推奨値, 最大)の形で生成します。最小・最大サイズと、それぞれに対応する画面幅を入力してください。remへの換算にはpx⇔rem変換ツール、画面幅の確認にはビューポートチェッカーもご利用ください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
使い方
- 最小サイズ・最大サイズ（px）を入力します。
- それぞれのサイズに対応する画面幅（px）を入力します。
- 出力単位（rem / px）を選び、表示されたclamp()式をコピーしてCSSに貼り付けます。
注意事項
- 推奨値はvw単位と切片の組み合わせ（例: 0.8333rem + 0.8333vw）で、画面幅が最小〜最大の間で最小サイズから最大サイズへ線形に変化します。範囲外ではclamp()の最小値・最大値で止まります。
- rem出力ではベースフォントサイズ（html要素のfont-size、通常16px）で換算します。ユーザーがブラウザの文字サイズを変更した場合も追従するため、アクセシビリティの面ではrem出力がおすすめです。
- vwのみで文字サイズを決めるとブラウザのズームに追従しない場合があるため、推奨値にはrem（またはpx）の切片を含めています。
- 最小サイズが最大サイズより大きい場合（画面が広いほど小さくなる設定）も、clamp()の引数を自動で入れ替えて出力します。
- 計算結果は小数第4位で丸めています。
用語解説
clamp()
CSSの比較関数で、clamp(最小値, 推奨値, 最大値)の形で値を範囲内に収めます。推奨値が最小値を下回れば最小値、最大値を上回れば最大値が使われます。
流動タイポグラフィ（fluid typography）
画面幅に応じて文字サイズを連続的に変化させる手法。メディアクエリで段階的に切り替える方法と違い、途中の画面幅でも自然なサイズになります。
vw
ビューポート（表示領域）の幅の1%を表すCSSの単位。100vwが画面幅いっぱいです。
よくある質問
clamp()の推奨値（vwを含む式）はどう計算されていますか？
傾き=(最大サイズ−最小サイズ)÷(最大幅−最小幅)、切片=最小サイズ−傾き×最小幅として、「切片 + 傾き×100vw」を推奨値にしています。最小幅で最小サイズ、最大幅で最大サイズになります。
remとpxのどちらで出力すべきですか？
ユーザーがブラウザの文字サイズ設定を変えたときに追従するため、通常はrem出力がおすすめです。remはベースフォントサイズ（通常16px）で換算されます。
推奨値にvwだけでなく切片も入っているのはなぜですか？
vwだけだとブラウザのズームや文字拡大に追従しにくくなります。rem（またはpx）の切片を足すことで、拡大時の読みやすさを保ちつつ画面幅に応じて変化させられます。
最小サイズを最大サイズより大きくできますか？
できます。画面が広いほど小さくなる設定の場合、clamp()の最小値と最大値は小さい方・大きい方に自動で入れ替えて出力します。
このページをシェア