CSS overflow 属性

JPKODA 編集部 May 6, 2026

Web開発において、コンテンツのサイズがコンテナ（包含ブロック）の寸法を超えてしまった場合、CSSの overflow プロパティがそのはみ出した部分をブラウザがどう扱うかを決定します。

overflow プロパティは、単にはみ出し部分の可視性を制御するだけでなく、スクロールの仕組みやユーザーとのインタラクションにも大きな影響を与えます。

1. overflow の核となるメカニズム

overflow プロパティは、ブロックレベルコンテナ内でコンテンツが溢れた際、内容をクリッピング（切り取り）するか、スクロールバーを表示するか、あるいはコンテナの外にそのまま表示するかを指定します。これは主にブロック整形文脈 (BFC) に作用し、通常はコンテナに height や max-height が明示的に設定されている場合にその効果が発揮されます。

1.1 主要なプロパティ値

visible (デフォルト値)：溢れたコンテンツは切り取られず、コンテナのボックスの外側にそのまま表示されます。
hidden：溢れたコンテンツは切り取られ、スクロールバーも提供されません。
scroll：コンテンツは切り取られますが、ブラウザは常にスクロールバーを表示します（コンテンツが溢れていなくても表示されます）。
auto：ブラウザが状況に応じてスクロールバーを表示するかどうかを判断します。コンテンツが溢れればスクロールバーが出現し、そうでなければ表示されません。

2. 活用シーン別ガイド

2.1 余分なコンテンツを隠す (hidden)

コンテナのサイズを強制的に維持し、境界線を超えるあらゆるコンテンツを遮断したい場合に使用します。これはテキストの切り詰め（トリミング）や、画像コンテナのアスペクト比を固定して余白をカットする際に非常に有効です。

.container {
  width: 200px;
  height: 100px;
  overflow: hidden; /* 領域外のコンテンツは直接カットされます */
}

2.2 インタラクティブなスクロールの有効化 (auto と scroll)

動的にロードされるリストのように、コンテナ内のコンテンツの高さが一定でない場合、auto を使用するのがベストプラクティスです。コンテンツが少ないときにはUIをすっきり保てるからです。

.scroll-box {
  height: 300px;
  overflow-y: auto; /* 垂直方向にのみスクロールを許可 */
  -webkit-overflow-scrolling: touch; /* モバイルデバイスでのスクロールを滑らかにする */
}

2.3 1行テキストのはみ出し処理

white-space と text-overflow を組み合わせることで、長すぎる1行テキストをエレガントに処理できます。

.text-truncate {
  white-space: nowrap;    /* 改行を禁止 */
  overflow: hidden;       /* はみ出しを隠す */
  text-overflow: ellipsis; /* 三点リーダー（…）を表示 */
}

3. overflow-x と overflow-y による詳細な制御

overflow プロパティはX軸（水平）とY軸（垂直）を同時に設定できますが、モダンなフロントエンド開発では、挙動を正確に制御するために個別に設定することが推奨されます。

overflow-x: 水平方向のはみ出しを制御します。
overflow-y: 垂直方向のはみ出しを制御します。

注意点：overflow-x と overflow-y のどちらか一方が visible で、もう一方が hidden、scroll、または auto に設定されている場合、visible は自動的に auto として再解釈されます。つまり、「一方向を切り取りつつ、もう一方向だけをコンテナ外にはみ出させて表示する」という設定は不可能です。

4. ベストプラクティスとパフォーマンスのアドバイス

モバイル体験の最適化: iOSデバイスで overflow: scroll を使用する際は、-webkit-overflow-scrolling: touch; を追加することで、慣性スクロールが有効になり、操作感が劇的に向上します。
スクロールバーのちらつき防止: スクロールが必要なレイアウトでは、scroll よりも auto を優先的に使用しましょう。これにより、コンテンツが少ないときに「無効状態のグレーのスクロールバー」が表示されるのを防ぎ、視覚的なノイズを排除できます。
BFC の副作用: overflow に visible 以外の値を設定すると、ブロック整形文脈 (BFC) がトリガーされます。これは内部の浮動（float）要素をクリアするのに役立ちますが、マージンの崩壊（Margin Collapse）が無効化されるなど、予期せぬレイアウト上の変化を引き起こすことがあるため注意が必要です。
パフォーマンスの考慮: 超大規模なリストをレンダリングする場合、頻繁なスクロールは再描画（Repaint）の負荷を高めます。データ量が膨大な場合は、単なるCSSの overflow だけでなく、仮想スクロール (Virtual Scrolling) 技術との併用を検討してください。