【CSS入門】clamp()でスマートにレスポンシブな値を設定しよう

こんにちは。masaです。
レスポンシブデザインを作るとき、フォントサイズや余白を「画面幅に合わせて伸縮させたい」場面はよくありませんか？
しかし、従来のvwやcalc()だけでは制御が難しく、「小さすぎる」「大きすぎる」といった問題が起こりがちです。

そこで便利なのがCSSのclamp()関数です。
今回はclamp()関数についてお話しします。

clamp()とは？

clamp() は3つの値を受け取り、下記の構文で書きます。

clamp(最小値, 推奨値, 最大値)

ブラウザは 「推奨値」を使いつつ、最小値と最大値の範囲内に収める という動きをしてくれます。

基本的な使い方

例：フォントサイズをレスポンシブに設定する

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

• 最小値 → 1.5rem
• 推奨値 → 5vw（画面幅に応じて変化）
• 最大値 → 3rem

この場合、フォントサイズは通常 5vw で動きますが、画面が極端に小さい時には 1.5rem 未満にはならず、大きな画面では 3rem を超えません。

よくある利用シーン

フォントサイズ

body {
  font-size: clamp(14px, 2vw, 18px);
}

スマホでは小さすぎず、PCでは大きすぎないちょうど良いフォントサイズになります。

マージン・パディング

.section {
  padding: clamp(16px, 5vw, 64px);
}

画面サイズに応じて余白を調整しつつ、見やすさを保てます。

ブロック幅

.block {
  width: clamp(200px, 50%, 400px);
}

ブロックの幅を「200px以上、400px以下」で可変にできます。

clamp()を使うメリット

• メディアクエリが不要 → @media を書かずにレスポンシブな調整が可能。
• 読みやすいコード → calc() や複雑な条件分岐を減らせる。
• 柔軟で直感的 → 「これ以上小さくならない」「これ以上大きくならない」を1行で書ける。

対応ブラウザ

clamp() は主要なモダンブラウザ（Chrome, Firefox, Safari, Edge）でサポートされています。
IEは非対応ですが、2025年現在では気にする必要はほぼありません。

まとめ

• clamp(最小値, 推奨値, 最大値) でレスポンシブな値を簡単に制御できる
• フォントサイズ、余白、幅など幅広い用途に使える
• メディアクエリを減らしてCSSをシンプルにできる

いかがでしたでしょうか？ clamp() を活用することでCSSの記述がすっきりしそうですね。
これからレスポンシブデザインを作るなら、ぜひ clamp() を積極的に活用してみましょう！