CSSのoverflowとは？overflow hiddenの使い方と各値の違いをわかりやすく解説

はじめに

Webサイトを制作していると、「テキストや画像が要素の外にはみ出してしまう」「意図しないスクロールバーが表示される」といったレイアウトの問題に直面することがあります。

そのようなとき、解決策として登場するのがCSSのoverflowプロパティです。overflowプロパティを使えば、コンテンツが要素の境界を超えた際の表示方法をコントロールでき、はみ出しの非表示・スクロールの制御・自動切り替えなど、状況に応じた対応が可能になります。

本記事では、overflowの基本概念から、特によく使われるoverflow: hiddenの意味と注意点、各値の使い分け、実務で役立つ活用例まで、初心者にもわかりやすく解説します。この記事を読めば、overflowプロパティを自信を持って使いこなせるようになります。

CSSのoverflowとは？

overflowプロパティの定義と概要

overflowプロパティは、ブロックレベル要素に対して適用できるCSSプロパティです。要素のwidth・heightによって定義されたボックス領域を超えたコンテンツをどのように扱うかを指定します。

基本的な構文は以下の通りです。

セレクター {
  overflow: 値;
}

指定できる主な値は

• visible（デフォルト）
• hidden
• scroll
• auto

の4種類です。

また、横軸・縦軸を個別に制御するoverflow-x / overflow-yも使用できます。

overflowプロパティを指定する際、widthまたはheightが設定されていることが動作の前提となります。サイズが未指定の要素に対しては、期待通りに機能しない場合があるため注意が必要です。

overflowが必要になる場面

overflowプロパティが実務で必要になる主な場面は以下の通りです。

コンテンツのはみ出しを制御したいとき

固定サイズのボックスにテキストや画像が収まりきらない場合、意図しない位置にコンテンツが表示されることがあります。overflowを指定することで、この挙動をコントロールできます。

スクロール可能なエリアを作りたいとき

チャット画面やニュースフィード、コードビューアなど、コンテンツ量が多い領域を一定の高さに収めてスクロールさせたい場合に使用します。

フロートレイアウトの崩れを直したいとき

floatプロパティを使用した古典的なレイアウト手法において、親要素の高さが正しく計算されない問題（高さの崩れ）を解消するためにも活用されます。

子要素の角丸やはみ出しを整えたいとき

border-radiusで角丸を設定した親要素から子要素がはみ出す場合、overflow: hiddenで視覚的に整えることができます。

overflow-xとoverflow-yの違い

overflowプロパティは、横方向（X軸）と縦方向（Y軸）を個別に制御することが可能です。

.box {
  overflow-x: hidden; /* 横方向のはみ出しを非表示 */
  overflow-y: scroll; /* 縦方向はスクロール可能 */
}

注意点として、overflow-xとoverflow-yの一方にvisible以外を指定すると、もう一方の値が自動的にautoに変換される仕様があります。この動作はW3C仕様に基づくものですが、意図しない挙動が生じることがあるため注意してください。

overflowの各値の意味と動作の違い

overflowプロパティには4種類の主要な値があります。それぞれの動作を正確に理解することが、適切な使い分けの第一歩です。

visible（デフォルト値）の動作

visibleはoverflowプロパティのデフォルト値です。この値を指定した場合、または何も指定しない場合、コンテンツはボックスの境界を無視してそのまま表示されます。

visibleはレイアウトのデバッグ時に活用できますが、意図せずに他の要素と重なるリスクがあるため、本番環境での使用は慎重に検討してください。

hidden・scroll・autoの違いと使い分け

hidden（はみ出しを非表示にする）

.box {
  width: 200px;
  height: 240px;
  overflow: hidden;
}

ボックスの境界を超えたコンテンツを完全に非表示（クリッピング） にします。

スクロールバーは表示されず、はみ出した部分は完全に見ることができません。コンテンツを視覚的に整えたい場面で最もよく使われる値です。

scroll（常にスクロールバーを表示する）

.box {
  width: 200px;
  height: 240px;
  overflow: scroll;
}

コンテンツのはみ出しに関わらず、常にスクロールバーを表示します。

コンテンツがボックス内に収まっている場合でもスクロールバーが表示されるため、レイアウトが安定する反面、見た目がやや煩雑になることがあります。

auto（はみ出したときだけスクロールバーを表示する）

.box {
  width: 200px;
  height: 240px;
  overflow: auto;
}

コンテンツがボックス内に収まっている場合はスクロールバーを表示せず、はみ出した場合にのみ自動でスクロールバーを表示します。ユーザー体験とレイアウトのバランスが取れており、スクロール可能エリアの実装で最もよく推奨される値です。

各値の比較一覧と選び方の基準

overflowの4つの値の動作を以下の表で整理します。

選び方の基準は以下を参考にしてください。

• コンテンツを単に隠したい → hidden
• スクロール可能にしたい・レイアウトを安定させたい → auto
• スクロールバーの有無によるレイアウトのずれを防ぎたい → scroll
• デフォルト動作を明示したい・はみ出しを許容したい → visible

overflow: hiddenとは？使い方と活用シーン

overflow: hiddenの基本的な使い方

.container {
  width: 300px;
  height: 150px;
  overflow: hidden;
}

上記の例では、.containerのボックスを超えたコンテンツは表示されません。ユーザーははみ出した部分を見ることも操作することもできなくなります。

hiddenがよく使われるユースケース

• 固定サイズのカードコンポーネントでテキストを切り詰める
• サムネイル画像が枠からはみ出さないようにする
• border-radiusを適用した要素から子要素がはみ出すのを防ぐ

.card {
  border-radius: 12px;
  overflow: hidden;
}

フロートの回り込み解除への活用

overflow: hiddenは、floatを使ったレイアウトにおける親要素の高さ崩れを解消する手法としても使われてきました。

floatを子要素に適用すると、子要素がドキュメントフローから外れるため、親要素の高さが0になる問題が発生します。

問題のある状態
.parent {
  /* 高さが正しく計算されない */
}
.child {
  float: left;
}

この問題をoverflow: hiddenで解決する方法が「clearfix（クリアフィックス）の代替手法」です。

overflow: hidden で解決
.parent {
  overflow: hidden; /* BFC（ブロック整形コンテキスト）が生成され高さが計算される */
}
.child {
  float: left;
}

overflow: hiddenを親要素に指定することでBFC（Block Formatting Context）が生成され、floatした子要素を包含した高さが正しく計算されるようになります。

overflow: hiddenを使うときの注意点と副作用

overflow: hiddenは非常に便利な一方で、意図しない副作用を引き起こすことがあるプロパティです。実務で遭遇しやすい問題と対処法を把握しておきましょう。

z-indexが効かなくなる問題

overflow: hiddenを指定すると、子要素に設定したz-indexが親要素の外部要素に対して効かなくなるケースがあります。

問題が発生するコード例

.parent {
  position: relative;
  overflow: hidden;
}
.child {
  position: absolute;
  z-index: 100;
  /* .parent の外側の要素よりも前面に出したいが、効かない */
}

この現象は、スタッキングコンテキストが形成され、z-indexの比較範囲が親要素の内部に限定されることが原因です。

対処法

• overflow: hiddenを外側のラッパー要素に移し、z-indexを使いたい要素の親要素からは外す
• overflow: hiddenの代わりに後述するclearfixを使用する

position: fixedの子要素が隠れる問題

overflow: hiddenが指定された要素の子孫にposition: fixedの要素があると、その要素が意図せず隠れてしまうことがあります。

.parent {
  overflow: hidden; /* ← これが原因 */
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  /* .parent の overflow: hidden の影響で表示が切り取られる */
}

本来、position: fixedの要素はビューポートを基準に配置されるため、通常のドキュメントフローの影響を受けません。しかし、祖先要素にtransform・will-change・filterなどのプロパティが指定されていると、固定配置の基準がビューポートではなくその要素になるため、overflow: hiddenの影響を受けてしまいます。

対処法

• position: fixedの要素はDOMツリーの上位（bodyの直下など）に配置する
• モーダルなどはbody直下に描画する

副作用を回避するための代替手段

overflow: hiddenの副作用が問題になる場合、以下の代替手段を検討してください。

clearfixによるフロート解除

フロートの解除が目的であれば、overflow: hiddenに頼らず疑似要素を使ったclearfixを使用します。

.parent::after {
  content: "";
  display: block;
  clear: both;
}

clip-pathによるクリッピング

はみ出したコンテンツを視覚的に隠すだけが目的であれば、clip-pathも選択肢のひとつです。z-indexへの影響がありません。

.box {
  clip-path: inset(0); /* ボックス内部のみ表示 */
}

まとめ

CSSのoverflowプロパティは、コンテンツのはみ出しやスクロールを制御するための基本的かつ重要なプロパティです。

特にoverflow: hiddenは使用頻度が高い一方、z-indexやposition: fixedへの副作用が発生しやすいため、理解した上で適切に使用することが重要です。

overflowプロパティへの理解を深めることで、レイアウト崩れやスクロール制御の問題を自力で素早く解決できるようになります。ぜひ本記事のコード例を参考に、実際のプロジェクトで試してみてください。

CSSをはじめとするフロントエンド開発のスキルをさらに体系的に身につけたい方には、WEBMASTERSのプログラミングスクールがおすすめです。基礎から応用まで、現場で通用する実践的なスキルを習得できます。