【2026年版】CSS overflow完全ガイド｜はみ出し・横スクロール・省略表示の制御

「なぜか横スクロールが出てしまう」「テキストがボックスからはみ出して崩れる」「カード型レイアウトで文字を一定の長さで省略したい」——CSSを書いていると、こうしたはみ出し・スクロールまわりの悩みは日常茶飯事です。これらをまとめて制御するプロパティが overflow です。

overflowは一見シンプルですが、overflow-x と overflow-y の個別指定、text-overflow との組み合わせ、さらには position: sticky が突然効かなくなる原因になるなど、深みにはまりやすいプロパティでもあります。本記事では初心者でもすぐ使えるコピペ実例を中心に、overflow関連の知識を体系的にまとめました。

読み終わる頃には「横スクロールが出る」「文字がはみ出す」「スクロールが連鎖してしまう」といったよくある問題を、自分で原因特定して解決できるようになります。

overflowとは何か——基本の考え方

CSSの overflow プロパティは、要素のコンテンツがボックス（領域）に収まりきらないとき、はみ出た部分をどう扱うかを指定します。たとえば幅200pxのボックスに400px分のテキストが入ったとき、どうするか——それを決めるのがoverflowです。

overflowの5つの値

overflowには主に5つの値があります。それぞれの挙動をしっかり把握しておきましょう。

• visible（初期値）: はみ出しをそのまま表示する。ボックス外にコンテンツが描画される
• hidden: はみ出した部分を切り取って非表示にする。スクロールバーは出ない
• scroll: はみ出しの有無に関わらず、常にスクロールバーを表示する
• auto: コンテンツがはみ出たときだけスクロールバーを自動的に表示する
• clip: hiddenと似ているが、スクロールのプログラム操作（scrollTo等）も無効にする。より厳格な切り取り

/* visible: 初期値。はみ出してもそのまま表示 */
.box-visible {
  width: 200px;
  height: 100px;
  overflow: visible; /* デフォルトなので省略可 */
}

/* hidden: はみ出し部分を切り取り */
.box-hidden {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

/* scroll: 常にスクロールバーを表示 */
.box-scroll {
  width: 200px;
  height: 100px;
  overflow: scroll;
}

/* auto: はみ出したときだけスクロールバーを表示 */
.box-auto {
  width: 200px;
  height: 100px;
  overflow: auto;
}

/* clip: はみ出しを切り取り、スクロール操作も不可 */
.box-clip {
  width: 200px;
  height: 100px;
  overflow: clip;
}

実務では hidden と auto を使う場面が圧倒的に多いです。scroll は「コンテンツ量に関わらずスクロールバーの領域を確保したい」場面で使います。clip は比較的新しい値（主要ブラウザで2022年頃から対応）で、アニメーションのクリップ領域を厳密に制御したいときに有用です。

overflow-x と overflow-y——横・縦を個別に指定する

overflow は横方向と縦方向をまとめて指定するショートハンドですが、overflow-x（横方向）と overflow-y（縦方向）で個別に制御することもできます。これが非常に便利な場面があります。

/* 横スクロールOK、縦ははみ出し非表示 */
.horizontal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap; /* 横一列に並べるために必要 */
}

/* 縦スクロールOK、横は切り取り */
.vertical-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 300px;
}

重要な仕様上の注意があります。overflow-x と overflow-y の一方を visible 以外に設定すると、もう一方が自動的に visible から auto に変わります。つまり「横はhidden、縦はvisible」という組み合わせは実現できません。一方を制御した時点で、もう一方も auto 扱いになると覚えておきましょう。

横スクロール可能なカードリストの実装例

<div class="card-scroll-wrap">
  <div class="card-list">
    <div class="card">カード1</div>
    <div class="card">カード2</div>
    <div class="card">カード3</div>
    <div class="card">カード4</div>
    <div class="card">カード5</div>
  </div>
</div>

.card-scroll-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* iOS慣性スクロール（参考） */
}

.card-list {
  display: flex;
  gap: 16px;
  width: max-content; /* 子要素の合計幅に広がる */
  padding: 8px;
}

.card {
  width: 200px;
  flex-shrink: 0; /* カードが縮まないようにする */
  background: #f0f0f0;
  border-radius: 8px;
  padding: 16px;
}

このパターンはスマートフォンでのカード横スクロールUIでよく使われます。flex-shrink: 0 でカードが縮まないようにし、width: max-content でコンテナが子要素の合計幅に広がるのがポイントです。

意図しない横スクロールの原因と消し方

「ページに横スクロールバーが出て困る」というのはWeb制作でよくある問題です。原因はいくつかのパターンに絞られます。原因を特定してから対処するのが最短ルートです。

横スクロールが出る主な原因

• 要素に width: 100vw を指定しているが、スクロールバーの幅分はみ出している
• マイナスマージン（margin-left: -20px 等）で意図せず幅が超えている
• white-space: nowrap のテキストや横に長いインライン要素がある
• 絶対配置（position: absolute）や固定配置の要素が右にはみ出している
• 画像やiframeに max-width: 100% が当たっていない

原因を特定するデバッグ用CSS

/* すべての要素に枠線を付けて、はみ出し要素を目視確認 */
* {
  outline: 1px solid red;
}

/* JavaScriptでのデバッグ方法（ブラウザコンソールに貼る） */
/* document.querySelectorAll('*').forEach(el => {
  if (el.getBoundingClientRect().right > document.documentElement.clientWidth) {
    console.log(el);
  }
}); */

横スクロールを消す基本的な対処法

/* 方法1: bodyに overflow-x: hidden を指定（簡単だが副作用注意） */
body {
  overflow-x: hidden;
}

/* 方法2: はみ出している要素に max-width を指定 */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* 方法3: 100vwの代わりに100%を使う */
.full-width {
  /* width: 100vw; ← スクロールバー分はみ出すことがある */
  width: 100%; /* こちらが安全 */
}

/* 方法4: ネガティブマージンのリセット */
.section {
  margin-left: 0;
  margin-right: 0;
}

body { overflow-x: hidden } は手軽ですが、position: sticky が効かなくなる副作用があります（後述）。根本的な原因を特定して対処するほうが長期的に安全です。

1行テキスト省略（text-overflow: ellipsis）

カードやリストで長いタイトルを「…」で省略表示するのは定番のUIです。1行省略には3つのプロパティを必ずセットで使います。

1行省略の基本セット

.ellipsis {
  /* この3つはセットで必須 */
  white-space: nowrap;        /* テキストを折り返さない */
  overflow: hidden;           /* はみ出しを非表示 */
  text-overflow: ellipsis;    /* はみ出し箇所を「...」で表示 */

  /* 幅の指定も必要（widthかmax-widthがないと省略されない） */
  max-width: 200px;
}

<p class="ellipsis">これは非常に長いタイトルテキストのサンプルです。省略されて表示されます。</p>

よくあるミス：text-overflow: ellipsis だけ指定しても機能しません。white-space: nowrap と overflow: hidden が揃って初めて省略が発動します。また、幅の制約がない要素では省略されない点も注意が必要です。

Flexboxレイアウト内での省略

Flexboxの子要素でellipsisを使うと省略が効かないケースがあります。その場合は min-width: 0 を追加します。

.flex-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.flex-text {
  min-width: 0; /* これがないとFlexbox内でellipsisが効かない */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Flexアイテムはデフォルトで min-width: auto になっており、コンテンツの幅より小さくなることを拒否します。min-width: 0 を指定することで、ellipsisが正しく機能するようになります。

複数行テキスト省略（-webkit-line-clamp）

「2行で省略して3行目を…にしたい」という要件には -webkit-line-clamp を使います。かつてはWebkit専用でしたが、現在（2026年）は主要ブラウザすべてで使用できます。

-webkit-line-clampの基本形

.line-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;  /* 何行目で省略するか */
  overflow: hidden;
}

/* 2行で省略したい場合 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

この書き方で3プロパティがセットです。display: -webkit-box と -webkit-box-orient: vertical は「古い書き方」ですが、-webkit-line-clamp と組み合わせる場合は現在もこのセットが必要です。

line-clampと固定高さの組み合わせ注意点

/* 悪い例: heightを固定するとline-clampが機能しないことがある */
.bad-example {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 48px; /* ← 固定heightはNG。line-heightとの整合性が必要 */
}

/* 良い例: heightではなくmax-heightかそのまま */
.good-example {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* heightは指定しない。line-clampが自動で高さを調整する */
}

スクロールバーのデザインをCSSでカスタマイズする

スクロールバーのデザインはCSSで変更できます。WebKit系ブラウザ（Chrome・Edge・Safari）向けには ::webkit-scrollbar 疑似要素、Firefox向けには scrollbar-width と scrollbar-color を使います。

細くてシンプルなスクロールバー

/* WebKit系（Chrome・Edge・Safari）向け */
.custom-scroll::-webkit-scrollbar {
  width: 6px;   /* 縦スクロールバーの幅 */
  height: 6px;  /* 横スクロールバーの高さ */
}

.custom-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;      /* バーの背景（レール部分） */
  border-radius: 3px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: #888;          /* バー本体の色 */
  border-radius: 3px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;          /* ホバー時の色 */
}

/* Firefox向け（scrollbar-widthとscrollbar-color） */
.custom-scroll {
  scrollbar-width: thin;                  /* auto / thin / none */
  scrollbar-color: #888 #f1f1f1;          /* thumb track の順 */
  overflow-y: auto;
  max-height: 300px;
}

スクロールバーを完全に非表示にする

.no-scrollbar {
  /* スクロール自体は生かしつつ、バーを非表示 */
  overflow-y: auto;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* IE / Edge Legacy */
}

.no-scrollbar::-webkit-scrollbar {
  display: none;                 /* Chrome / Safari */
}

スクロールバーを非表示にしてもスクロール自体は可能です。スマートフォンのように見せたいUIや、横スクロールするカードリストでバーを隠したい場合に使えます。

overflow: hidden の使いどころ

overflow: hidden は単純に「はみ出しを切る」だけでなく、いくつかの重要な副作用・用途があります。

画像の角丸クリッピング

.image-wrap {
  border-radius: 12px;
  overflow: hidden;  /* border-radiusに合わせて画像をクリップ */
  width: 200px;
  height: 200px;
}

.image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

border-radius だけ指定しても、内側の画像がはみ出す場合があります。親要素に overflow: hidden を指定することで、角丸の形通りに画像がクリップされます。

floatを使ったレイアウトの高さ崩れ解消（clearfix代替）

現在はFlexboxやGridが主流ですが、旧来のコードではfloatが使われていることがあります。floatした子要素が親要素の高さに含まれない問題を overflow: hidden で解消できます。

/* floatした子が親の高さに含まれない問題 */
.parent {
  overflow: hidden; /* BFC（ブロック整形コンテキスト）を生成して高さを確保 */
  background: #eee;
}

.child-float {
  float: left;
  width: 50%;
}

この動作の正体は BFC（Block Formatting Context）の生成です。overflow が visible 以外の値になると、その要素はBFCを形成し、float要素を内包するようになります。display: flow-root でも同様の効果が得られ、より明示的でわかりやすいです。

/* display: flow-root は overflow: hidden よりも意図が明確 */
.parent-modern {
  display: flow-root; /* floatを内包するためのBFC生成（副作用なし） */
}

.child-float {
  float: left;
  width: 50%;
}

はみ出すアニメーション要素のクリッピング

.animation-wrap {
  overflow: hidden;    /* アニメーション中の要素がはみ出さないようにクリップ */
  position: relative;
}

.slide-in {
  transform: translateX(-100%);
  animation: slideIn 0.4s ease forwards;
}

@keyframes slideIn {
  to {
    transform: translateX(0);
  }
}

overscroll-behavior でスクロールの連鎖を止める

モーダルやドロワーの中でスクロールし終わったとき、背景ページまで一緒にスクロールしてしまう問題を経験したことはないでしょうか。これを「スクロールチェーン（scroll chaining）」といいます。overscroll-behavior プロパティで解消できます。

overscroll-behaviorの値

• auto（初期値）: スクロールが親要素・ページに連鎖する
• contain: スクロールをその要素内に封じ込める。バウンス効果（慣性）は維持
• none: 連鎖もバウンス効果も無効にする

/* モーダル内でスクロールが背景に伝わらないようにする */
.modal-body {
  overflow-y: auto;
  overscroll-behavior: contain;  /* スクロールをモーダル内に封じ込め */
  max-height: 80vh;
}

/* プルトゥリフレッシュを無効化したい場合 */
body {
  overscroll-behavior-y: none;  /* 縦方向のみ制御 */
}

<div class="modal-overlay">
  <div class="modal-body">
    <!-- 長いコンテンツ -->
    <p>長いモーダルコンテンツ...</p>
    <p>スクロールしてもページ背景に伝わりません。</p>
  </div>
</div>

contain と none の違いは微妙で、contain はiOSのバウンスアニメーション（端まで行くと少し跳ね返る動き）を残します。UXとしては contain のほうが自然に感じられることが多いです。

position: sticky が効かないときのoverfow原因

position: sticky を設定したのに「ちゃんと固定されない」「スクロールに追従しない」という問題は非常によく起こります。その主な原因の1つが 親要素または祖先要素のoverflow設定です。

なぜoverflowがstickyを壊すのか

position: sticky は、スクロールコンテナ（overflow が auto / scroll / hidden のいずれかの祖先要素）の中でのみ追従します。もし親要素に overflow: hidden や overflow: auto が設定されていると、その要素がスクロールコンテナとみなされ、ページ自体のスクロールに追従しなくなります。

/* 悪い例: 親にoverflow:hiddenがあるとstickyが効かない */
.parent {
  overflow: hidden;  /* ← これがstickyを壊す */
}

.sticky-header {
  position: sticky;
  top: 0;  /* 効かない！ */
}

/* 良い例: overflowをvisible（またはそもそも未指定）にする */
.parent-fixed {
  /* overflow: hidden; ← 削除またはvisibleに */
  overflow: visible;
}

.sticky-header {
  position: sticky;
  top: 0;  /* 正常に動作する */
}

stickyが効かない場合のチェックリスト

• sticky要素の親・祖先に overflow: hidden / auto / scroll が指定されていないか確認する
• sticky要素自身に top / bottom / left / right のいずれかが指定されているか確認する（指定がないと動かない）
• 親要素に十分な高さがあるか確認する（親が子と同じ高さだとstickyは機能しない）
• body に overflow-x: hidden を指定していないか確認する（これも原因になる）

/* bodyのoverflow-x: hiddenがstickyを壊すパターン */
body {
  overflow-x: hidden; /* ← これでstickyが効かなくなることがある */
}

/* 対策: html要素に移す、またはwrapperで対処する */
html {
  overflow-x: hidden; /* htmlに移すと影響が限定される場合がある */
}

overflowのよくあるミスまとめ

ここまでの内容から、実務でよく起こるミスをまとめます。

ellipsisが効かない

/* NG: white-space:nowrapが抜けている */
.ng-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  /* white-space: nowrap; ← これがないと省略されない */
}

/* OK: 3点セット + 幅の制約 */
.ok-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px; /* 幅の制約が必要 */
}

overflow:hiddenで要素が見切れる

/* NG: ドロップシャドウがoverflow:hiddenで切れる */
.card-ng {
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2); /* 影が切れる */
}

/* OK: 影を付ける要素とoverflow:hiddenを分離する */
.card-wrap {
  box-shadow: 0 4px 20px rgba(0,0,0,0.2); /* 外側のラッパーに影 */
}

.card-inner {
  overflow: hidden;   /* 内側でクリップ */
  border-radius: 8px;
}

z-indexが効かなくなる

overflow: hidden を指定するとスタッキングコンテキスト（重なり順）に影響を与えることがあります。子要素が z-index で上に来るはずなのに隠れてしまう場合は、親の overflow: hidden が原因のことがあります。ドロップダウンメニューやツールチップを作る際は特に注意が必要です。

/* NG: overflow:hiddenの親からツールチップがはみ出せない */
.nav-item {
  overflow: hidden; /* ← これが原因でツールチップが切れる */
  position: relative;
}

.tooltip {
  position: absolute;
  top: 100%;
  /* overflow:hiddenの親でクリップされてしまう */
}

/* OK: overflow:hiddenを外すか、別の方法でレイアウトする */
.nav-item-fixed {
  position: relative;
  /* overflow: hidden; ← 削除 */
}

よくある質問（FAQ）

Q. overflow: hidden と overflow: clip の違いは何ですか？

どちらもはみ出した部分を切り取りますが、overflow: hidden は Element.scrollTo() や Element.scrollLeft などによるプログラムからのスクロール操作が可能です。一方 overflow: clip はプログラムからのスクロール操作も含めて完全に不可にします。また overflow: hidden はBFCを生成しますが、overflow: clip は生成しません。アニメーションのクリップ領域を厳密に制御したい場合は clip が適しています。

Q. overflow: autoとoverflow: scrollはどちらを使うべきですか？

基本的には overflow: auto を推奨します。auto はコンテンツがはみ出したときだけスクロールバーが現れるので、コンテンツが少ないときに不要なバーが出ません。scroll は「スクロールバーの有無でレイアウトが変わって欲しくない」場合、つまりスクロールバーの幅分のスペースを常に確保しておきたい場合に使います。データテーブルなど、コンテンツ量が動的に変わるUIで scroll が適することがあります。

Q. -webkit-line-clamp は本番環境で使って大丈夫ですか？

2026年現在、Chrome・Firefox・Safari・Edgeすべての最新版で動作します。-webkit- プレフィックスがついていますが、現実的にはほぼすべての環境で使用可能です。Firefoxでは2019年頃から対応しており、IE11対応が不要なプロジェクトであれば本番でも安心して使えます。ただし、display: -webkit-box と -webkit-box-orient: vertical のセットが必須な点は変わりません。

Q. スクロールバーのデザインはiOSでも変更できますか？

iOS Safari（WebKit）では ::-webkit-scrollbar 疑似要素が有効ですが、スクロールバーがオーバーレイ型のため、PCブラウザのようにtrackやthumbの細かいデザインが反映されないことがあります。iOSでスクロールバーのデザインを制御するより、scrollbar-width: none と ::-webkit-scrollbar { display: none } でバーを非表示にし、スワイプジェスチャーで操作させるUIにするほうが現実的です。

Q. overscroll-behavior はモバイルでも効きますか？

Chrome for Android・iOS Safari（iOS 16以降）ともに対応しています。モバイルでモーダルを実装する際にスクロールチェーンを止めるのに特に有用で、従来は body { overflow: hidden } で対処していた問題を、よりクリーンな方法で解決できます。ただし古いiOS（15以前）では overscroll-behavior の対応が不完全な場合があります。対応ブラウザが気になる場合は Can I use で確認してください。

まとめ

CSSの overflow は「はみ出しをどう扱うか」を決める基本プロパティですが、スクロールバーのデザイン・テキスト省略・スクロール連鎖・stickyとの相性まで、多岐にわたる場面で活躍します。本記事のポイントを整理します。

• overflowの5値（visible/hidden/scroll/auto/clip）の違いを理解し、場面に応じて使い分ける
• overflow-x と overflow-y で横・縦を個別に制御できる。ただし一方をvisible以外にすると、もう一方が自動でautoになる
• 横スクロールが出る原因は width: 100vw・ネガティブマージン・nowrapテキスト・absolute配置などが多い。* { outline: 1px solid red } でデバッグする
• 1行省略は white-space: nowrap + overflow: hidden + text-overflow: ellipsis の3点セット。Flexbox内では min-width: 0 も必要
• 複数行省略は display: -webkit-box + -webkit-box-orient: vertical + -webkit-line-clamp: N + overflow: hidden の組み合わせ
• スクロールバーのデザインはChrome/EdgeはWebKit疑似要素、FirefoxはCSS標準の scrollbar-color / scrollbar-width を使う
• overflow: hidden はBFCを生成する。float解除・角丸クリップに使えるが、ツールチップやstickyとの相性に注意
• スクロール連鎖は overscroll-behavior: contain で止められる。モーダル実装に必須のテクニック
• position: sticky が効かないときは祖先要素の overflow 設定を真っ先に疑う

関連記事

• position: stickyで追従させる方法
• CSS z-indexの使い方完全ガイド｜重なり順
• CSSでおしゃれな表（テーブル）を作る方法
• CSSだけで作るモダンUIパーツ30選
• CSSメディアクエリ完全ガイド｜レスポンシブ対応
• CSS実装テクニック完全マップ

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！