clamp() は、CSSで数値の最小値・理想値・最大値を指定し、レスポンシブデザインなどで便利に使える関数です。
構文
clamp(最小値, 理想値, 最大値)- 最小値: これ以下にはならない
- 理想値: 通常この値を使う（ビューポートに応じて変動可能）
- 最大値: これ以上にはならない
使用例
フォントサイズをレスポンシブに調整
h1 {
font-size: clamp(16px, 5vw, 32px);
}- 最小:
16px（画面が小さくても16px以下にはならない） - 理想:
5vw（画面幅の5%を基準にする） - 最大:
32px（画面が大きくなっても32px以上にはならない）
🔹 ビューポートが狭いとき → 16px
🔹 適度なサイズのとき → 5vw に基づく大きさ
🔹 ビューポートが広いとき → 32px
ボタンの幅を可変にする
button {
width: clamp(100px, 50%, 300px);
}- 最小:
100px（ボタンが小さくなりすぎない） - 理想:
50%（画面の半分のサイズ） - 最大:
300px（ボタンが大きくなりすぎない）
マージンやパディングの調整
section {
padding: clamp(10px, 2vw, 40px);
}🔹 画面サイズに応じて適切なパディングを調整
- 小さい画面では
10px - 中間の画面では
2vw（ビューポート幅の2%） - 大きい画面では
40pxまで拡大
なぜ clamp() を使うのか？
- レスポンシブデザインが簡単にできる
media queriesを減らせるmin()やmax()より柔軟にサイズ調整できる
補足: min() や max() との違い
| 関数 | 説明 |
|---|---|
min(a, b) | 小さい方を適用 |
max(a, b) | 大きい方を適用 |
clamp(a, b, c) | b を基準に a 以上 c 以下に制限 |
例:
font-size: min(5vw, 32px); /* 5vwが32pxを超えたら32px */
font-size: max(16px, 5vw); /* 5vwが16px未満なら16px */結論
clamp() は レスポンシブデザイン でめちゃくちゃ便利！
フォントサイズ・レイアウト調整・マージン調整 などに使える！
コメント