こんな方におすすめ
- 可変文字サイズを作る開発者
- 余白トークンを設計するデザイナー
Developer Design Utility
CSS Clamp ジェネレーター
最小サイズ、最大サイズ、ビューポート範囲を入力して、レスポンシブな font-size、padding、margin、gap などに使える CSS clamp() 値を生成できます。
Fluid CSS 計算
モバイルの最小値とデスクトップの最大値の間で自然に変化する clamp() 値を生成します。
ライブプレビュー
現在の画面幅を基準に、推定 px 値と適用結果を確認できます。
コピー可能な CSS
セレクター、プロパティ、CSS 変数オプションを含む実用的なコードをすぐにコピーできます。
STEP 1
Clamp 値の入力
最小/最大サイズとビューポート範囲を入力すると、CSS clamp() コードが自動で計算されます。
rem出力は1rem = 16pxで換算します。適用先のルート文字サイズが異なると実際の大きさも変わります。
STEP 2
待機中
プレビュー
生成された clamp() 値が画面サイズに応じてどのように適用されるか確認できます。
Live Preview
Responsive CSS Clamp
画面サイズに応じて自然に変化するレスポンシブ CSS 値を確認してみましょう。
CSSを生成するとプレビューと計算値を表示します。
STEP 3
生成結果
計算された clamp() 値と CSS コードを確認できます。
値を入力してから Clamp 生成ボタンを押してください。
STEP 4
おすすめの使用例
clamp() は、レスポンシブ UI でサイズ変化が必要な要素に特に便利です。
Hero 見出し
モバイルでは小さく、デスクトップでは大きく見えるランディングページの見出し
カード Padding
画面サイズに応じて自然に広がるカード内部の余白
Grid Gap
モバイルと PC レイアウト間の間隔をなめらかに調整
Border Radius
大きな画面でより柔らかいカード型 UI を作るときに活用
2つの画面幅を基準に可変CSS値を作る
最小・最大サイズと、それぞれを適用する画面幅を入力します。文字サイズや余白のclamp()を生成し、コードと現在の計算値を確認できます。
活用場面
- モバイルからデスクトップへ見出しを拡大する。
- カードの余白を一定範囲内で変える。
入力から結果の確認まで
- 1
最小・最大サイズをpxで入力します。
- 2
最小・最大ビューポート幅を入力します。
- 3
CSSプロパティ、選択子、px/rem出力を選びます。
- 4
必要ならCSS変数を有効にして生成します。
- 5
範囲の内外、ズーム、ルート文字サイズの変更を確認します。
32pxから64pxの見出し
- 入力
- サイズ32〜64px・画面幅360〜1440px・rem
- 結果
- clamp(2rem, 2.963vw + 1.3333rem, 4rem)
ルート16pxなら900px幅で約48pxです。係数の丸めによる微差があります。
カードの余白
- 入力
- サイズ16〜32px・画面幅375〜1200px・rem・padding
- 結果
- padding: clamp(1rem, 1.9394vw + 0.5455rem, 2rem);
画面幅787.5px、ルート16pxで約24pxの余白を4方向に適用します。
負の切片
- 入力
- サイズ10.5〜30.5px・画面幅400〜800px・px
- 結果
- clamp(10.5px, 5vw - 9.5px, 30.5px)
600px幅では20.5px、400px未満では10.5px、800px超では30.5pxに制限されます。
計算・処理の仕組み
サイズ差を画面幅の差で割った傾きからvw係数を求め、下限の基準点に合う切片を計算します。出力は小数第4位に丸め、rem換算は16pxを固定基準にします。
注意点と制限
- サイズは0以上で増加する範囲、画面幅は1px以上で増加する範囲が必要です。
- 出力係数は±1,000,000以内で、丸め後も幅のある範囲が必要です。
- ルート文字サイズが変わるとremの上下限と、その限界に達する画面幅も変わります。
- プレビュー対応一覧外の有効な長さプロパティはコードのみ生成する場合があります。
- 選択子は出力専用で、このページの他要素を変更しません。
データの取り扱い
入力とプレビューはブラウザー内で処理します。コピーにはCSSと計算条件のコメントが含まれます。
参考資料
あわせて使えるツール
よくある質問
remは入力したpxを必ず再現しますか？
16pxの換算基準で丸め誤差を除いて再現します。ルート20pxなら2remは40pxです。適用先で確認してください。
画面が広がると小さくなる値も作れますか？
この生成器は最大サイズが最小サイズより大きい入力に限ります。減少する範囲には対応しません。
編集後にコピーできないのはなぜですか？
無効な範囲やCSS設定では旧結果を消します。修正すると再生成します。自動コピーに失敗した場合は手動コピー欄を使ってください。