脱・手動調整！フォントサイズも幅も clamp() で自動レスポンシブにしよう
clamp() / min() / max() の違いと使い分け方を徹底解説！
「文字サイズを調整したいけど、vwを使うと大きくなりすぎる…」
「メディアクエリで制御するのは手間。最小と最大をもっと簡単に指定したい！」
「画面幅に合わせて、もっと滑らかにサイズ調整したい」
そんなときに便利なのが clamp() をはじめとした、CSSの関数 clamp() / min() / max() です。
これらを正しく使えば、メディアクエリを減らして、より柔軟なレスポンシブデザインが実現できます。
この記事では、それぞれの違いと使い分け方、具体的な実装例をわかりやすく解説します！
🧠 それぞれの構文と役割
まずは3つの関数の基本構文と役割を比較しましょう。
| 関数 | 構文 | 役割 |
|---|---|---|
clamp() |
clamp(最小値, 推奨値, 最大値) |
指定範囲内で値を挟み込む（自動調整） |
min() |
min(値1, 値2, ...) |
最も小さい値を採用 |
max() |
max(値1, 値2, ...) |
最も大きい値を採用 |
🧩 違いがわかる！使い分けのイメージ
-
clamp()→ レスポンシブデザインの定番。最小値と最大値の中で、推奨値が自動で調整される。 -
min()→ 小さい方を選びたい時。「広がりすぎ防止」に便利。 -
max()→ 大きい方を選びたい時。「小さくなりすぎ防止」に便利。
✅ よくある使い方と実例
① clamp()でレスポンシブなフォントサイズ
画面が小さいときは小さく、大きいときは大きく。その間は滑らかに変化します。
🔍 メディアクエリとの違い
従来（メディアクエリ）:
@media (max-width: 768px) {
font-size: 14px;
}
@media (min-width: 769px) and (max-width: 1200px) {
font-size: 18px;
}
@media (min-width: 1201px) {
font-size: 24px;
}
clamp()なら1行で完結！
font-size: clamp(1.2rem, 4.7vw, 2.4rem);
👉 メディアクエリだと段階的に変化しますが、clamp()なら滑らかに連続的に変化します。
② min()で最大値を制限
ウィンドウが大きくても「これ以上は広げたくない」制御に便利です。
width: min(90vw, 1200px);
③ max()で最小値を保証
小さい画面でもレイアウトが崩れないよう、最低限の幅を確保したいときに使います。
width: max(300px, 50%);
⚠️ clamp()は min()/max()の代わりじゃない
「全部 clamp() でよくない？」と思いがちですが、clamp() は中間値（推奨値）を使って柔軟に調整する関数です。
一方、min() / max() は「どちらが小さい（大きい）かをシンプルに比較」する目的に使うため、意図が異なります。
🎯 まとめ：使い分け早見表
| 目的 | 推奨関数 | 例 |
|---|---|---|
| フォントやサイズを画面幅に応じて可変にしたい | clamp() |
clamp(14px, 2vw, 20px) |
| 広がりすぎを防ぎたい | min() |
min(90vw, 1200px) |
| 小さくなりすぎを防ぎたい | max() |
max(300px, 50%) |
🧪 実践：よくある組み合わせ
レスポンシブな幅＋パディングの例です。
.container {
width: min(100%, 1200px);
padding: clamp(16px, 4vw, 64px);
}
特定のブレイクポイントではメディアクエリを使いつつ、その間の滑らかな変化にclamp()を使うなど用途は様々です。
📝 おわりに
clamp() / min() / max() は、うまく使えばメディアクエリを減らせる万能ツールです！
とくに clamp() を知っていると、フォントサイズや余白の設計がかなりスマートになります。
場面に応じた正しい関数選びで、より読みやすく、再利用しやすいCSSを書いていきましょう。
Discussion