overflow の仕組みを理解すると「はみ出し」「スクロール」「切り抜き」が自在に扱える
overflow は 「要素の中身が、要素のサイズを超えたときどう扱うか」 を決めるプロパティです。
ボックスモデルの理解が深まると、レイアウト崩れ・スクロール制御・画像トリミングなどが思い通りにできるようになります。
CSS と Tailwind CSS の両方で、初心者でも迷わないように丁寧に解説します。
overflow の基本動作
overflow には4つの主要値がある
- visible（初期値）
→ はみ出してもそのまま表示される - hidden
→ はみ出した部分を隠す（切り抜く） - scroll
→ 常にスクロールバーを表示 - auto
→ はみ出したときだけスクロールバーを表示
この4つを理解するだけで、overflow の 90% は扱えるようになります。
visible（初期値）：はみ出しを許す
CSS
.box {
width: 200px;
height: 80px;
overflow: visible;
background: #ddd;
}
HTML
<div class="box">
とても長いテキストが入ると、ボックスの外にはみ出します。
</div>
Tailwind
<div class="w-52 h-20 overflow-visible bg-gray-300">
とても長いテキストが入ると、ボックスの外にはみ出します。
</div>
visible は「何もしない」挙動ですが、
意図せずはみ出してレイアウトが崩れる原因にもなるため注意が必要です。
hidden：はみ出しを切り取る（トリミング）
CSS
.box {
width: 200px;
height: 80px;
overflow: hidden;
background: #ddd;
}
Tailwind
<div class="w-52 h-20 overflow-hidden bg-gray-300"></div>
hidden は「画像のトリミング」「角丸の中に画像を収める」などでよく使います。
scroll：常にスクロールバーを表示
CSS
.box {
width: 200px;
height: 80px;
overflow: scroll;
}
Tailwind
<div class="w-52 h-20 overflow-scroll"></div>
scroll は常にスクロールバーが出るため、
UI としては auto の方が自然なことが多いです。
auto：必要なときだけスクロールバーを表示
CSS
.box {
width: 200px;
height: 80px;
overflow: auto;
}
Tailwind
<div class="w-52 h-20 overflow-auto"></div>
チャット欄・ログ表示・カード内の長文など、
実務で最もよく使う overflow です。
overflow-x / overflow-y で方向を限定する
CSS
.box {
overflow-x: scroll; /* 横だけスクロール */
overflow-y: hidden; /* 縦は切り取り */
}
Tailwind
<div class="overflow-x-scroll overflow-y-hidden"></div>
横スクロールの表（table）や、画像ギャラリーでよく使います。
overflow がレイアウトに与える重要な影響（深掘り）
1. overflow は margin 相殺を防ぐ
.parent {
overflow: hidden;
}
overflow が auto / hidden / scroll の場合、
親と子の margin が相殺されなくなるという重要な性質があります。
これはレイアウト崩れを防ぐために非常に便利です。
2. overflow:hidden は角丸（border-radius）と相性が良い
.box {
border-radius: 12px;
overflow: hidden;
}
画像を丸く切り抜くときの定番パターンです。
Tailwind ではこう書きます。
<div class="rounded-xl overflow-hidden">
<img src="..." />
</div>
3. overflow:hidden は「高さを固定したカード」でよく使う
カード内のテキストが長すぎると崩れるため、
overflow:hidden で切り取ることが多いです。
4. overflow:auto は「内部スクロール」を作る
チャット欄・ログ・コードブロックなど、
内部だけスクロールさせたい UI で必須。
実践例：カード内の長文をスクロールさせる
CSS版
.card {
width: 300px;
height: 150px;
padding: 16px;
background: #fff;
overflow: auto;
}
HTML
<div class="card">
とても長いテキストが入ると、ここだけスクロールできます…
</div>
Tailwind版
<div class="w-72 h-40 p-4 bg-white overflow-auto">
とても長いテキストが入ると、ここだけスクロールできます…
</div>
実践例：画像を角丸でトリミングする
CSS版
.thumb {
width: 120px;
height: 120px;
border-radius: 12px;
overflow: hidden;
}
Tailwind版
<div class="w-30 h-30 rounded-xl overflow-hidden">
<img src="..." />
</div>
実践例：横スクロールのギャラリー
CSS版
.gallery {
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 8px;
}
Tailwind版
<div class="flex gap-3 overflow-x-auto pb-2">
<img class="w-40 h-40 object-cover" src="..." />
<img class="w-40 h-40 object-cover" src="..." />
<img class="w-40 h-40 object-cover" src="..." />
</div>
overflow を使いこなすためのまとめ
- visible：はみ出しを許す（初期値）
- hidden：切り取る（トリミング・角丸と相性◎）
- scroll：常にスクロールバー
- auto：必要なときだけスクロール（実務で最も使う）
- overflow-x / overflow-y：方向を限定
- overflow は margin 相殺を防ぐ
- Tailwind は overflow- で簡単に指定できる*
