min()とmax()とclamp()の使い分け｜私が使うのはmin()とclamp()だけ

:::note ※clampを使うか迷ったときの「判断材料集」です。単体で読むより、clamp()完全ガイドから来ると分かりやすい。 :::

結論（私の判断基準）

• min()：コンテナ幅に使う。最もよく使う
• max()：ほぼ使わない
• clamp()：見出し、余白に使う

私が実務で使うのはmin()とclamp()だけ。max()が必要な場面はほとんどない。

---

各関数の役割

関数	役割	私の使用頻度
min()	最小値を選ぶ（上限を設定）	よく使う
max()	最大値を選ぶ（下限を設定）	ほぼ使わない
clamp()	範囲内に収める	よく使う

---

min()：コンテナ幅に使う

「これ以上大きくならない」を設定。

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

画面幅	結果
800px	768px（100% - 2rem）
1200px	1168px（100% - 2rem）
1600px	1200px（上限）

私はコンテナ幅にはmin()を使う。clamp()より直感的。

---

max()：ほぼ使わない理由

「これ以上小さくならない」を設定。

.sidebar {
  width: max(300px, 50%);
}

理論上は「下限を設定したいとき」に使う。

でも実務では、下限だけ設定したい場面がほぼない。下限があるなら上限も欲しい。だからclamp()を使う。

max()が必要な場面を思い出せない。

---

clamp()：見出しと余白に使う

min() と max() を組み合わせた効果。

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

/* これと同じ意味 */
font-size: max(16px, min(4vw, 24px));

私は見出しと余白に使う。本文には使わない。

---

使い分けの指針（私の判断）

やりたいこと	私の選択
コンテナ幅を制限	min()
見出しをレスポンシブに	clamp()
余白をレスポンシブに	clamp()
下限だけ設定	clamp()で上限も設定する

「下限だけ」の場面はほぼない。だからmax()は使わない。

---

私がよく使うパターン

コンテナ幅（min）

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
}

見出し（clamp）

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

余白（clamp）

.section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

この3パターンで十分。

---

組み合わせは避ける

/* ❌ 複雑すぎる */
.sidebar {
  width: clamp(300px, 30vw, max(400px, 50%));
}

複数の関数を組み合わせると可読性が下がる。私は避けている。

シンプルに書けないなら、設計を見直す。

---

迷ったときの判断

迷い	私の判断
どの関数を使うか	コンテナはmin()、それ以外はclamp()
max()を使うか	使わない
組み合わせるか	しない

---

この記事で解決しない場合

• clampの実務パターンを知りたい → clamp()の実務活用パターン集
• clampの思想を知りたい → CSS clamp()完全ガイド

---

min()とclamp()だけで十分。max()が必要な場面は、15年やってほとんどなかった。