コンテンツへスキップ
CSS Clamp Calculator
最小/最大ビューポート幅とフォントサイズから、レスポンシブなCSSのclamp()値を計算します。
概要
- 最小/最大のビューポート幅と、それに対応する最小/最大のフォントサイズから、ビューポート幅に応じて滑らかに変化するCSSのclamp()値を計算するツールです。
- メディアクエリでブレークポイントごとにfont-sizeを切り替える代わりに、1行のclamp()宣言でなめらかに変化するレスポンシブなフォントサイズ（フルードタイポグラフィ）を実現できます。
- 計算結果はプレビュースライダーで、ビューポート幅を変えたときにフォントサイズがどう変化するかを確認できます。
使い方
- 「最小/最大ビューポート幅（px）」に、フォントサイズを変化させたい範囲のビューポート幅を入力します。
- 「最小/最大フォントサイズ（rem）」に、その範囲に対応させたいフォントサイズをrem単位で入力します。
- 「計算する」ボタンをクリックすると、clamp()の値とプレビューが表示されます。プレビューのスライダーでビューポート幅を動かすと、実際のフォントサイズの変化を確認できます。
入力例・出力例
入力
最小幅: 375px / 最大幅: 1280px / 最小サイズ: 1rem / 最大サイズ: 2rem
出力
clamp(1rem, calc(0.5856rem + 0.1105vw), 2rem)
利用シーン
- 見出しや本文のfont-sizeを、モバイルからデスクトップまでなめらかに変化させる（フルードタイポグラフィ）
- メディアクエリでブレークポイントごとにfont-sizeを指定する手間を、1行のclamp()宣言に置き換える
- デザインで指定された最小/最大フォントサイズから、実装用のCSS値を機械的に算出する
よくある質問
なぜフォントサイズの単位はremのみですか？pxやemは使えませんか？
font-sizeはユーザーのブラウザ設定（基準フォントサイズ）に応じて拡大縮小できるよう、remで指定するのがアクセシビリティ上のベストプラクティスとされているため、remのみに対応しています。
ビューポート幅の単位がpxなのはなぜですか？
レスポンシブデザインのブレークポイントは一般的にpxで指定されることが多いため、分かりやすさを優先してpxとしています。
最小フォントサイズより最大フォントサイズを小さくできますか？
いいえ。最大フォントサイズは最小フォントサイズ以上である必要があります（同じ値の指定は可能です）。
注意点
- 計算式は、2点（最小ビューポート幅・最小サイズ）と（最大ビューポート幅・最大サイズ）を通る直線を、CSSのcalc()とvw単位で表現する一般的なフルードタイポグラフィの手法に基づいています。
- 最小ビューポート幅より狭い画面では最小フォントサイズ、最大ビューポート幅より広い画面では最大フォントサイズに固定されます（clamp()による範囲制限）。
- font-size以外にも、line-height以外の長さを表す多くのCSSプロパティ（padding、gapなど）に同じ考え方を応用できます。