CSS clamp() 計算機

使い方

1. 流体化する CSS プロパティを選びます。
2. 最小・最大ビューポート幅をピクセルで入力します。
3. それぞれのビューポート端点で使いたい値を入力します。
4. rem または px を選びます。rem の場合は換算に使うルートフォントサイズも設定できます。
5. カーブとサンプル値を確認し、プレビュースライダーを動かして、宣言全体または clamp() 値だけをコピーします。

既定値の 320px〜1440px、16px〜32pxでは、次の結果になります。

font-size: clamp(1rem, 0.7143rem + 1.4286vw, 2rem);

生成される式の意味

clamp(最小値, 推奨値, 最大値) は、推奨値を上下限の間に収めて使います。このツールは二つの「ビューポート幅と値」の点を通る直線を求めます。

傾き = (終了値 - 開始値) / (最大ビューポート - 最小ビューポート)
切片 = 開始値 - 傾き × 最小ビューポート
推奨値 = 切片 + (傾き × 100)vw

開始ビューポートより狭い範囲では一方の端点値を保ち、二つの端点の間では線形に変化し、終了ビューポートより広い範囲ではもう一方の端点値を保ちます。

流体タイポグラフィと余白

ブレークポイントで急に値が変わるのを避けたい場面に向いています。見出し、セクションのパディング、グリッドのギャップ、コンテンツ幅などが代表例です。1px の境界線のように厳密な固定値が必要なものには通常不要です。

文字サイズの境界を rem にすると、ルートフォントサイズとの関係を残せます。それでも完成したレイアウトはブラウザーの 200% ズーム、狭い画面、長い翻訳文で確認してください。式が正しくても実際の部品が収まるとは限りません。

逆方向と固定範囲

終了値を開始値より小さくすることもできます。その場合は負の vw 項を使い、画面が広がるほど値が小さくなります。ツールは clamp() の上下限だけを正しい順序にし、直線の方向は維持します。

両端の値が同じなら流体計算は不要で、1rem のような固定長を返します。負の値は、意味を持つ場合がある margin とカスタムプロパティでのみ利用できます。

プライバシー

処理はすべてクライアント側で行います。ZeroTool がビューポート幅、プロパティ値、生成した CSS をアップロードすることはありません。フォームの状態はブラウザー内に保存され、リセットで削除できます。