CSS clamp()完全ガイド｜vwの罠を踏んでから使え
:::note ※clampを使うか迷っている人のための「入口」記事です :::
clampを理解したい人は多い。でも「どこまで使うか」に答えている記事は少ない
clamp()の計算式を解説する記事は山ほどある。でも「実務でどこまで使うか」「どこで固定値に戻すか」を書いている記事は少ない。
私は罠を踏んだ。vwで暴走させた。clampで包んだが中間サイズで違和感が出た。全部にclampを使って複雑になった。
この記事は、その経験から「どこまで使うか」の判断基準をまとめたもの。
🚀 今すぐ使う → Clamp Generator を開く
私が踏んだ罠
罠1：vwだけで指定した
vwでフォントサイズを指定した。320pxで12px、1920pxで76px。見事に暴走した。
「clampで包めば大丈夫」と言われてclampを使った。今度は中間サイズで違和感が出た。
clampは便利だが、何も考えずに使うとレイアウトを壊す。
このツールは「計算式を理解しなくても安全に使える」ために作った。ただし、罠は知っておいた方がいい。
🚀 今すぐ使う → Clamp Generator を開く
私が踏んだ罠
罠1：vwだけで指定した
/* ❌ やった失敗 */
font-size: 4vw;
| 画面幅 | フォントサイズ |
|---|---|
| 320px | 12.8px（読めない） |
| 1920px | 76.8px（でかすぎ） |
「vwを使えばレスポンシブになる」と思った。なった。暴走した。
罠2：clampで包んだが傾斜が急すぎた
/* ❌ 傾斜が急すぎる */
font-size: clamp(12px, 5vw, 48px);
最小と最大は守られた。でも中間サイズ（700pxあたり）で急に大きくなって違和感が出た。
clampは「範囲を決める」だけ。中間の変化率も考えないと事故る。
罠3：全部にclampを使った
「clampは便利」と聞いて、ボーダー幅、小さなアイコン、フォーム入力欄にも使った。
結果：複雑になっただけで、ユーザー体験は変わらなかった。
変化させる意味がない要素には固定値を使う。
clampで「やるべきこと」と「やってはいけないこと」
やるべきこと
- vwを使うなら必ずclampで包む：上限・下限がないと暴走する
- 適度な傾斜にする：最小と最大の差が大きすぎると中間で違和感
- 変化させる意味がある要素に使う：見出し、セクション余白、コンテナ幅
やってはいけないこと
- vwだけで指定する：極端な画面幅で破綻する
- 全部の要素にclampを使う：複雑になるだけ
- 傾斜が急すぎる設定：中間サイズで違和感
私がclampを「使わない」要素
| 要素 | 理由 |
|---|---|
| ボーダー幅 | 1pxは1pxでいい |
| 小さなアイコン（16px以下） | 固定で問題なし |
| フォーム入力欄 | 使いやすさ優先で固定値がベター |
| 本文のフォントサイズ | 16px固定でいい。可読性優先 |
「変化させる意味があるか」を考えてから使う。
私がclampを「使う」要素
| 要素 | 私の設定 |
|---|---|
| 見出し（h1, h2） | clamp(1.5rem, 1rem + 2vw, 3rem) |
| セクション余白 | clamp(3rem, 8vw, 6rem) |
| コンテナ幅 | min(100% - 2rem, 1200px)（minで十分） |
| カード間ギャップ | clamp(1rem, 3vw, 2rem) |
見出しと余白は画面サイズで変えた方がいい。本文は変えない。
この記事で判断がつかない場合
この記事は「判断基準」を書いている。詳細は子記事へ。
| 知りたいこと | 読むべき記事 |
|---|---|
| vwで暴走した経験がない。罠を詳しく知りたい | vw単位の落とし穴とclamp()による解決 |
| 実務でどの要素に使うか、具体例が欲しい | clamp()の実務活用パターン集 |
| min()とmax()との違いがわからない | min()とmax()とclamp()の使い分け |
結局どうするか
clampは「便利な道具」ではなく「罠を回避するための道具」。
vwを使うなら必ずclampで包む。でも、固定値で十分な要素には使わない。
迷ったら固定値。clampは「変化させる意味がある要素」だけ。