clamp()の使い方

clamp()の使い方


clamp() はCSSの関数で、「最小値・推奨値・最大値」を指定し、その範囲内で値を自動調整できます。



■ 使い方

font-size: clamp(14px, 4vw, 24px);


最小値: 14px
推奨値: 4vw（画面幅の4%）
最大値: 24px

→ 画面が狭いときは14pxより小さくならず、広いときは24pxより大きくなりません。



■ 主な用途

フォントサイズのレスポンシブ調整
余白（padding, margin）の自動調整
幅や高さの最小・最大制御



■ よく使う例

width: clamp(200px, 50vw, 600px);
padding: clamp(8px, 2vw, 24px);



■ まとめ

clamp() は「小さすぎず大きすぎない」値を自動で調整したいときに便利なCSS関数です。
レスポンシブデザインでよく使われます。