CSS clamp() 計算ツール

2 つのサイズ端点とビューポート幅から clamp() の式を作り、任意の幅での値をプレビューします。

ブラウザ内でローカルに実行

· clamp() · vw · rem

960px

2 つのサイズ端点から clamp() のルールを作る手順

この計算ツールは、2 つのサイズ端点とそれらを適用するビューポート幅から、1 つの clamp() 式を組み立てます。font-size、padding、gap、margin のいずれかのルールを書き出し、範囲内の任意の幅での値をプレビューし、完成した CSS をコピーします。処理はすべてページ内で完結します。

プレビューはウィンドウのサイズを変えるものではありません。スライダーがビューポート幅をシミュレートし、見本の要素にその幅で式が返すのと同じ px 値が入ります。小さい方の幅より下ではブラウザが最小サイズを、大きい方の幅より上では最大サイズを保持します。

ルールで設定する CSS プロパティ（font-size、padding、gap、margin）を選びます。

最小サイズと最大サイズを px で、対応するビューポート幅とともに入力します。初期値の 16 px と 32 px、320 px と 1440 px は、スマートフォンからデスクトップへ大きくなる見出しの例です。

出力単位を選びます。rem は各長さをルートフォントサイズ（初期値 16、変更可）で割り、px は入力した数値をそのまま使います。vw の係数はどちらでも同じです。

プレビューのスライダーを動かすか範囲内の幅を入力すると、その幅で解決した値が隣に表示されます。プレビュー下の 3 つのチップは最小・中間・最大幅での値を示します。

Copy CSS でルール全体をコピーし、Reset で 8 つのフィールドを初期値に戻します。

clamp() の文字列の裏側にある計算

2 つの端点から clamp() の文字列へ

式は 2 つの端点を結ぶ直線です。初期値では傾きが (32 − 16) ÷ (1440 − 320) × 100 = 1.4286vw、切片が 16 − 1.4286 × 320 ÷ 100 = 11.4286px となり、ルールは clamp(1rem, 0.7143rem + 1.4286vw, 2rem) になります。

960 px では中央の項が 0.7143rem + 1.4286vw = 25.14px となり、これが読み取り値とプレビュー要素に表示されます。各項は小数 4 桁、表示値は小数 2 桁に丸められます。

rem 出力とルートフォントサイズ

単位を rem にすると、式の各長さがルートフォントサイズで割られます。初期値の 16 px では 16 → 32 px の範囲が 1rem → 2rem になり、ルートを 20 にすると同じ範囲が 0.8rem → 1.6rem になります。vw の係数は変換されません。vw はルートではなくビューポートに対する割合だからです。

ルートの欄は換算のための定数であり、ブラウザへ送られる設定ではありません。実際の表示がプレビューと一致するのは、この欄がルールを貼り付けるページの html の font-size と一致している場合だけです。

入力できる値と、出力が消える条件

サイズは小数を受け付け、0 以上である必要があります。最大値は最小値より小さくできず、大きい方のビューポート幅は小さい方を上回る必要があります。端点が等しい場合は許可され、clamp(1rem, 1rem + 0vw, 1rem) のような一定値のルールになります。

範囲が成立しない場合やサイズ・ビューポートの欄が空の場合、ルール、見本のチップ、読み取り値、プレビューが消去され、範囲が有効になるまで Copy CSS が無効になります。画面上の入力と一致しないルールがクリップボードに入ることはありません。ルートの欄が必要なのは出力単位が rem のときだけです。