clamp() / 値
—CSS CLAMP GENERATOR
CSS clamp()計算・ジェネレーター
最小・最大サイズと画面幅から、レスポンシブに変化するCSSのclamp()を自動計算できます。font-sizeや余白などに使えるclamp()をリアルタイムで確認してコピーできます。
入力と計算はブラウザ内だけで行い、保存・外部送信しません。
clamp()を作成
初期例：320pxで16px、1280pxで24px
プリセット
ToolPipo独自の入力例です。選択後に自由に編集できます。
数値入力では範囲外の画面幅も確認できます。
危険なCSS文字列を直接入力せず、固定値部分とvw係数を分けて安全に生成します。
CSS
—傾き slope
切片 / VAL
vw係数
現在の計算サイズ
現在の状態
font-sizeプレビュー
数値シミュレーターと同じ使用値をpxで適用しています。
レスポンシブな文字サイズ
CSSのclamp()とは
clamp(MIN, VAL, MAX)は、中央の可変値VALを最小値MINから最大値MAXの範囲に制限するCSS数学関数です。概念的にはmax(MIN, min(VAL, MAX))と同じです。MINとMAXが逆の場合はCSS仕様上MIN側が優先されますが、このツールの直接作成モードでは入力ミス防止のため、同じ単位でMIN > MAXをエラーにします。
font-size: clamp(16px, 2vw, 24px);なら16px未満と24px超を防ぎ、中間では2vwを利用します。どの画面幅で境界に達するかは中央の式によって変わります。引数内の単純な加算式は、不要なcalc()を重ねず記述できます。
画面幅に応じて滑らかにサイズを変える
2つの画面幅とサイズを結ぶ一次関数を作り、傾きを(最大側サイズ - 最小側サイズ) ÷ (最大画面幅 - 最小画面幅)、切片を最小側サイズ - 傾き × 最小画面幅として計算します。1vwはviewport widthの1%なので、傾き×100をvw係数として利用できます。
pxはCSSの絶対長単位です。remはルート要素のfont-sizeを基準にする相対単位で、本ツールでは変換基準を変更できます。メディアクエリを何段階も追加せず、一定範囲で連続的に変化させたいfont-sizeや余白などに利用できます。各プロパティが指定した値型を受け付けるかは確認してください。
よくある質問
CSSのclamp()とは？
MIN・VAL・MAXを指定し、計算値を最小値から最大値の範囲に制限するCSS数学関数です。
clamp()の3つの値は何ですか？
最小値MIN、通常使用する可変値VAL、最大値MAXです。
font-sizeにも使えますか？
使えます。画面幅に応じて滑らかに変化する文字サイズを作れます。
320pxでは16px、1280pxでは24pxにできますか？
自動計算モードの初期例として設定済みです。画面幅ごとのサイズを変更して生成できます。
pxとremのどちらで出力できますか？
両方に対応しています。remではルートフォントサイズを指定できます。
vwとは何ですか？
viewport widthに対する割合で、1vwは画面幅の1%です。
calc()は必要ですか？
CSS数学関数の引数内では数式を直接扱えるため、単純な加算式で常にcalc()を重ねる必要はありません。
clamp()は文字サイズ以外にも使えますか？
width、padding、margin、gapなど、そのプロパティが指定した値型を受け付ける場合に利用できます。
最小値が最大値より大きい場合は？
CSS仕様ではMINが優先されます。このツールでは入力ミス防止のため、直接モードで同じ単位のMINがMAXより大きい場合はエラーにします。