このツールについて
小さい画面と大きい画面それぞれで必要なサイズと、それに対応するビューポート幅を入力すると、その間を結ぶ直線を解いて `clamp(最小値, 定数 + 係数vw, 最大値)` を組み立てます。下の表には 375、768、1024、1280 といった代表的な幅での実際のピクセル値が並ぶため、ブラウザを開かずに変化の曲線を確認できます。
CSS / FRONTEND · ブラウザ内で処理
CSS clamp() 流動サイズ計算
最小値・最大値とビューポート範囲から流動的な clamp() を算出。
線形補間で計算し、代表的なビューポート幅での実際のサイズを表示して検証できます。
サイズとビューポート範囲
2 つの端点を通る直線を解き、clamp() で最小値と最大値の間に収めます。
clamp() の結果
font-size: clamp(1.125rem, 0.5968rem + 2.2535vw, 2.625rem);
計算式: 1.125rem → 2.625rem, 0.5968rem + 2.2535vw
ビューポート幅ごとの実サイズ
| ビューポート幅 | 実サイズ |
|---|---|
375px | 18px |
768px | 26.86px |
1024px | 32.63px |
1280px | 38.39px |
1440px | 42px |
操作手順
- 最小サイズと、それが適用されるビューポート幅を入力します。
- 最大サイズと、その対応幅を入力します。
- スケーリング表を確認してから clamp() 値をコピーします。
プライバシー
計算もプレビューもすべてこのブラウザ内で行われます。入力が送信・保存されることも、URL やログに記録されることもありません。
よくある質問
- なぜ中間値で rem と vw を混ぜるのですか。
- vw のみだとサイズがビューポート幅にのみ比例し、利用者がブラウザの文字サイズを大きくしても一切変化しません。つまり利用者の設定を無視することになります。rem の定数項を加えることでルート文字サイズにも追随し、流動レイアウトとアクセシビリティを両立できます。
- clamp() の 3 つの引数の順序は。
- 最小値、優先値、最大値の順です。ブラウザは優先値を使いますが、最小値を下回ることも最大値を上回ることもありません。最小値が最大値より大きい場合は最小値が優先されるため、本ツールはその入力を拒否します。