vw単位の落とし穴とclamp()による解決｜私は一度暴走させた

:::note ※vwで事故りたくない人向けの「回避ガイド」記事です :::

結論（私の判断基準）

• vwを使うなら必ずclampで包む
• vw単体で使っていい場面はほぼない
• 迷ったら固定値

私は「vwを使えばレスポンシブになる」と思って使った。暴走した。

🚀 安全な値を計算 → Clamp Generator

---

私がやった失敗

/* ❌ やった失敗 */
font-size: 4vw;

画面幅	フォントサイズ
320px	12.8px（小さすぎて読めない）
1920px	76.8px（大きすぎる）

クライアントから「スマホで文字が小さい」「大画面で文字がでかい」と両方指摘された。

vwは「画面幅に連動する」だけ。上限も下限もない。

---

clampで安全に制限

/* ✅ 上限と下限を設定 */
font-size: clamp(16px, 4vw, 32px);

画面幅	フォントサイズ
320px	16px（下限で止まる）
600px	24px（4vwで変化）
1920px	32px（上限で止まる）

どんな画面幅でも破綻しない。

---

vhも同様に危険

/* ❌ vhだけで指定 */
.hero {
  height: 100vh;
  padding: 10vh;
}

モバイルのアドレスバー表示/非表示でガタつく。大型モニターでは余白が広すぎる。

/* ✅ clampで制限 */
.hero {
  min-height: 100svh;
  padding: clamp(2rem, 10vh, 6rem);
}

---

よくある事故パターン（私が見たケース）

事故1：見出しがはみ出る

/* ❌ 大画面でコンテナからはみ出る */
h1 { font-size: 8vw; }

/* ✅ clampで制限 */
h1 { font-size: clamp(2rem, 8vw, 4rem); }

事故2：余白が消える

/* ❌ 小さい画面で余白がほぼゼロ */
.section { padding: 5vw; }

/* ✅ 最小値を確保 */
.section { padding: clamp(1rem, 5vw, 3rem); }

事故3：カードが潰れる

/* ❌ 極小画面でカードが潰れる */
.card { width: 30vw; }

/* ✅ 最小幅を確保 */
.card { width: clamp(280px, 30vw, 400px); }

---

私がvw単体で使う場面（ほぼない）

場面	使うか	理由
フォントサイズ	使わない	必ずclampで包む
余白	使わない	必ずclampで包む
幅	使わない	必ずclampで包む
特殊な演出（全画面背景など）	稀に使う	暴走しても問題ない場合のみ

vw単体で使っていい場面は、暴走しても問題ない場合だけ。

---

迷ったときの判断

迷い	私の判断
vwを使うか	使うならclampで包む
clampを使うか	変化させる意味があるなら使う
固定値かclampか	迷ったら固定値

「vwを使うならclampで包む」。これだけ覚えておけば事故は防げる。

---

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

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

---

vwは「便利」ではなく「危険」。clampで包んで初めて「便利」になる。