clamp() は、CSSで柔軟なサイズ設定を行うための関数で、最小値・推奨値・最大値を指定して、レスポンシブなデザインを簡単に実現できます。本記事では clamp() の基本的な使い方や具体例を紹介します。
clamp() の基本構文
clamp() は以下の構文で使用します。
clamp(最小値, 推奨値, 最大値);- 最小値：指定した値より小さくならない
- 推奨値：通常のサイズ（vw や em などを指定することが多い）
- 最大値：指定した値より大きくならない
この仕組みにより、要素のサイズを柔軟に制御でき、画面サイズに応じて最適な表示を実現できます。
clamp() の使用例
フォントサイズをレスポンシブ対応にする
h1 {
font-size: clamp(16px, 5vw, 48px);
}- フォントサイズが 16px 以下にはならない
- ビューポート幅の 5vw を基準にサイズが変動
- 48px 以上にはならない
この設定により、スマホでは小さく、PCでは大きくなるような最適なフォントサイズを適用できます。
コンテンツの幅を調整する
.container {
width: clamp(300px, 50%, 800px);
}- 300px 以上
- 50%（ビューポート幅の半分）
- コンテンツの幅が画面サイズに応じて変動し、適切な表示が保たれます。
コンテンツの幅が画面サイズに応じて変動し、適切な表示が保たれます。
マージンやパディングを動的に調整する
.section {
padding: clamp(10px, 2vw, 50px);
}- 10px 以上
- 2vw（ビューポート幅の2%）
- 50px 以下
この設定により、余白を柔軟に変更でき、デバイスごとに適切な間隔が確保されます。
clamp() のメリット
レスポンシブデザインが簡単に実現できる
@media クエリを使わずに、動的なサイズ変更が可能です。
コードの可読性が向上する
min() や max() を組み合わせる必要がなく、直感的に指定できます。
記述量を削減できる
複数の @media ルールを書く必要がなく、シンプルなコードで調整できます。
まとめ
clamp() は、CSSで最小・推奨・最大の値を指定できる便利な関数です。特にフォントサイズやコンテンツの幅・余白の調整に役立ちます。レスポンシブデザインをより簡単に実装できるので、ぜひ活用してみてください！
