BLOG

CSSで横スクロールが出る原因10選

2026.06.28 BLOG

ページに横スクロールが出る原因は、だいたい「画面幅より広い要素がどこかにある」だけです。ただし原因候補が多く、width: 100vw、padding、Grid/Flex、長いURL、画像、absolute、transformなど、複数が重なりやすいです。

この記事は、NINES内のCSSトラブルシュート記事へつなぐハブとして、横スクロールの原因を10個に分けて整理します。

まず確認するデバッグ手順

DevToolsでbodyとhtmlの幅を確認する
* { outline: 1px solid red; }で飛び出している要素を探す
overflow-x: hiddenで隠して終わらせず、原因要素を直す
長い文字列、画像、100vw、固定幅、transformの順に見る

<main class="page">
  <section class="hero">
    <h1>横スクロール検証ページ</h1>
  </section>

  <section class="cards">
    <article class="card">短いカード</article>
    <article class="card">https://example.com/very-long-url-without-break-points-and-it-causes-overflow</article>
    <article class="card">画像や100vw指定も原因になります</article>
  </section>
</main>

.hero {
  width: 100vw;
  padding: 40px;
  background: #ffd329;
}

.cards {
  display: flex;
  gap: 24px;
}

.card {
  width: 360px;
  padding: 24px;
  border: 2px solid #111;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.hero {
  width: 100%;
  padding: 40px clamp(20px, 5vw, 56px);
  background: #ffd329;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  width: min(100% - 40px, 960px);
  margin: 40px auto;
}

.card {
  min-width: 0;
  padding: 24px;
  border: 2px solid #111;
  overflow-wrap: anywhere;
}

原因1：width:100vwを使っている

100vwはスクロールバー幅を含むことがあり、ページ全体より少し広くなる場合があります。全幅セクションなら、まずwidth: 100%で足りるか確認します。関連：width:100%なのにはみ出す原因7選

原因2：box-sizingがcontent-boxのまま

width: 100%にpaddingやborderが足されると親幅を超えます。サイト全体では* { box-sizing: border-box; }を基本にします。

原因3：固定幅のカードやサイドバー

width: 360pxのような固定幅がスマホ幅を超えると横スクロールになります。width: min(100%, 360px)やGridのminmax(min(100%, 280px), 1fr)を使います。

原因4：Flexアイテムが縮まない

Flex内の長いタイトルや画像が親を押し広げるケースです。子要素にmin-width: 0を入れると解決することがあります。関連：Flexboxで要素が縮まない原因5選

原因5：CSS Gridの最小幅が大きすぎる

minmax(300px, 1fr)は、画面幅が300px未満だとはみ出します。安全にするならminmax(min(100%, 300px), 1fr)を使います。関連：CSS Gridのminmax()完全ガイド

原因6：長いURLや英単語が折り返せない

URL、コード、英単語は自然な改行位置が少なく、カードや本文から飛び出すことがあります。本文領域にはoverflow-wrap: anywhereを指定します。関連：text-overflow: ellipsis が効かない原因7選

原因7：画像・動画・iframeが親幅を超えている

記事本文では、画像やiframeにmax-width: 100%を入れます。サムネイルではaspect-ratioとobject-fitも合わせて確認します。関連：object-fitが効かない原因5選

原因8：position:absoluteの要素が外へ出ている

装飾やバッジをabsoluteで外側に配置すると、横スクロールの原因になります。親のoverflowや配置基準を確認します。関連：position:absoluteが効かない原因6選

原因9：transformで見た目だけ外へ動かしている

transform: translateX()で要素を画面外へ動かすと、設計によっては横スクロールやタップ領域のズレを生みます。アニメーション用途なら親でクリップするか、移動量を制限します。

原因10：一時対応のoverflow-x:hiddenで根本原因を隠している

overflow-x: hiddenは最終手段です。原因要素が残ったままだと、フォーカス移動、モーダル、横スワイプ、埋め込み表示で別の不具合になります。関連：overflow:hiddenが効かない原因5選

横スクロール対策の内部リンク集

このページを起点に、原因別の記事へ進めるようにしておきます。

CodePen

CodePenでは、上のindex.htmlをHTMLパネルへ、bad.cssとgood.cssをCSSパネルへ貼り替えてください。100vw、固定幅、長いURLが横スクロールにどう影響するか確認できます。

まとめ

横スクロールは、まず飛び出している要素を特定することが重要です。100vw、box-sizing、固定幅、Flex/Gridの最小幅、長い文字列、画像、absolute、transformを順番に確認すれば、ほとんどの原因は切り分けられます。

参考資料

STEP BACK