CSS clamp()生成ツール｜最小・最大値と画面幅から自動計算

このツールでできること

最小値、最大値、それぞれに対応する画面幅から、レスポンシブなCSSのclamp()式を生成してコピーできます。現在のブラウザ幅に基づく文字サイズの表示例も確認できます。

使い方

1. 最小値と最大値をpx単位で入力します。
2. それぞれの値になる最小画面幅と最大画面幅をpx単位で入力します。
3. 「clamp()式を生成」を押します。
4. 結果をコピーし、font-size、padding、gapなど対応するCSSプロパティの値として使用します。

入力例・出力例

最小値16pxを画面幅320px、最大値24pxを画面幅1280pxに指定すると、次の式を生成します。

clamp(16px, calc(13.3333333333px + 0.8333333333vw), 24px)

画面幅320px未満では16px、1280pxを超えると24pxで止まり、範囲内ではvw係数と切片から補間します。

よくある利用場面

• 見出しのフォントサイズを画面幅に合わせて滑らかに変えるとき
• paddingやgapへ上下限付きのレスポンシブ値を作るとき
• 2つの画面幅と実寸からclamp式を手計算せず生成するとき

処理仕様

• 最小値と最大値は0〜10,000、画面幅は1〜100,000の範囲です。入力と出力の単位はpxに固定されています。
• 半角数字の整数または小数点以下4桁までの小数を入力できます。単位付き入力、指数表記、カンマ、全角数字には対応していません。
• 最小値は最大値以下、最小画面幅は最大画面幅未満にしてください。
• 最小画面幅から最大画面幅まで値が直線的に変化するよう、傾き、vw係数、切片を計算し、clamp(最小値px, calc(切片px + vw係数vw), 最大値px)を生成します。
• 上下限は小数点以下最大4桁、切片とvw係数は最大10桁で表示し、不要な末尾の0と負の0を除きます。
• 文字列化した式を両端の画面幅で再計算し、指定値との絶対誤差が0.00005px以下であることを確認します。必要な精度を維持できない式は生成しません。
• 最小値と最大値が同じ場合は、clamp(値px, 値px, 値px)を生成し、画面幅では変化しないことを表示します。
• 有効な入力変更は現在のブラウザ幅による表示例を更新し、以前の生成結果を無効にします。不正な入力中は最後の正常な表示例を保持します。
• 表示例は現在のブラウザ幅に基づく補助表示で、利用先のレイアウトを再現するものではありません。

入力データについて

入力値、計算結果、表示例はブラウザ内だけで処理され、ToolRollのサーバーや外部サービスへ送信されません。外部ライブラリを読み込まず、Cookie、Web Storage、IndexedDBへ保存する処理もありません。「結果をコピー」を押したときだけ、生成した式を端末のクリップボードへ書き込みます。