CSS clamp()ジェネレーター
最小値・最大値と画面幅を入力すると、滑らかに変化するclamp()のCSSを自動計算します。
CSSのclamp()とは
CSSのclamp()は、最小値・推奨値・最大値の3つを指定できるCSS関数です。画面幅に合わせて文字サイズや余白などを滑らかに変化させながら、指定した最小値と最大値の範囲内に収められます。
メディアクエリを細かく追加しなくてもレスポンシブ対応できるため、font-size・width・padding・margin・gapなどの調整に便利です。
CSS clamp()ジェネレーターの使い方
- clamp()を適用するCSSプロパティを選択します。
- 変化させたい最小値と最大値をpxで入力します。
- 値が変化する最小画面幅と最大画面幅を入力します。
- 必要に応じて出力単位をpxまたはremに変更します。
- 生成されたCSSをコピーして使用します。
「確認する画面幅」のスライダーを動かすと、その画面幅で使用される値をリアルタイムで確認できます。
生成されるclamp()の見方
clamp()は、次の3つの値で構成されています。
clamp(最小値, 推奨値, 最大値)- 最小値：これより小さくならない値
- 推奨値：画面幅に応じて変化する値
- 最大値：これより大きくならない値
例えば、画面幅320pxで14px、画面幅1440pxで42pxになるように設定すると、次のCSSが生成されます。
.element {
font-size: clamp(14px, 6px + 2.5vw, 42px);
}clamp()をfont-sizeに使う例
見出しや本文の文字サイズを画面幅に合わせて滑らかに変更できます。
.heading {
font-size: clamp(24px, 16px + 2.5vw, 52px);
}画面が小さいときは24pxより小さくならず、画面が大きいときは52pxより大きくなりません。
余白や幅にも使用できる
clamp()は文字サイズだけでなく、padding・margin・gap・widthなどにも使用できます。
.section {
padding: clamp(40px, 20px + 6.25vw, 110px) 20px;
}
.card-list {
gap: clamp(16px, 10px + 1.875vw, 37px);
}このジェネレーターでは「適用するプロパティ」から用途を選択すると、選んだプロパティを含むCSSが自動生成されます。
pxとremのどちらを使えばよい？
デザインデータの数値をそのまま使用したい場合はpx、ユーザーの文字サイズ設定も考慮したい場合はremが便利です。
remを選択すると、入力したpx値をルートの文字サイズを基準に変換します。通常は1rem＝16pxのままで問題ありません。
CSS clamp()を使うメリット
- 画面幅に応じて値を滑らかに変更できる
- 最小値と最大値を指定できる
- メディアクエリの数を減らせる
- 文字サイズや余白をレスポンシブ対応できる
- PCとスマートフォンの中間サイズも自然に調整できる
よくある質問
clamp()はどのCSSプロパティに使えますか？
font-size・width・height・padding・margin・gap・top・leftなど、長さを指定できるさまざまなプロパティに使用できます。
最小値と最大値に同じ数値を入力できますか？
入力できますが、値が変化しなくなるため通常のpxやrem指定と同じ結果になります。
最大画面幅より大きい画面ではどうなりますか？
設定した最大値が使用されます。反対に、最小画面幅より小さい画面では最小値が使用されます。
計算結果はそのまま商用サイトで使えますか？
生成されたCSSは個人サイト・商用サイトを問わず自由に使用できます。