【CSS】意図しない横スクロールの原因と対策を解説

この記事では「CSSで意図しない横スクロールの原因と対策」について解説します。

Webサイトをコーディングしていく過程で、意図せぬ横スクロールが発生するときがあります。

その原因や対策について解説していきます。

この記事を読むと...

横スクロールが発生する原因と対処法が分かる
outlineの活用方法が分かる

1 横スクロールが発生する原因
- 1.1 意図しない横スクロールを特定する
- 1.2 JavaScriptで横スクロールを特定する
2 まとめ

横スクロールが発生する原因

横スクロールが出る原因は、画像やpadding、margin、widthが固定値(px)などの理由で画面からはみ出ているためです。

コーディングをしていると、例えば以下のような横スクロールが発生するときがあります。

画像下部に横スクロール、右側に白い縦の余白が表示されています。

パッと見て、どれが原因で横スクロールが発生しているか分かるでしょうか？

このようなとき、どこが原因か特定しにくいものです。

一つ方法としてあるのは、検証ツール上でHTMLのセクションやコンテンツを一つずつ削除して特定する方法があります。

しかしそのやり方は結局しらみつぶしになり、特定に時間がかかります。

意図しない横スクロールを特定する

意図しない横スクロールを簡単に特定するには、以下のCSSを適用します。

* {
  outline: 2px solid red;
}

CSSを適用すると、以下のようなアウトライン表示になり、どのコンテンツがはみ出しているか特定することができます。

このように、横スクロールを発生させているコンテンツを発見できたら、その部分のCSSを修正すればいいです。

今回の場合では、以下のCSSで横幅を固定値にしていたため、モバイルサイズでは横スクロールが発生する原因になりました。

<section class="p-section">
    <div class="p-section__contents">
      コンテンツ
    </div>
  </section>
  <section class="p-section">
    <div class="p-section__contents">
      <div class="p-section__block">コンテンツ</div>
 
    </div>
  </section>
  <section class="p-section">
    <div class="p-section__contents">
      コンテンツ
    </div>
  </section>

.p-section {
  padding-top: 100px;
  padding-bottom: 100px;
  width: 100%;
  background-color: lightcyan;
}


.p-section:nth-child(2n) {
  background-color: lightgray;
}

.p-section__contents {
  background-color: #fff;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  height: 100px;
}

/* このCSSで横幅を固定値にしていた */
.p-section__block {
  width: 700px;
}

まとめると、以下のようになります。

よりコーディングの速度を効率良く上げていきたい方はスニペットを活用するのがいいです。

コードを保管してコピペで対応できる様にしておきましょう。

時短コーディングへの第一歩はこちらから▶︎

JavaScriptで横スクロールを特定する

CSSだけではなく、以下のJavaScriptでも横スクロールを特定することができます。

  const width = document.documentElement.clientWidth
  $$("*").forEach(el => {
    el.style.outline = '1px solid tomato'
    if (width < el.clientWidth) console.log(el)
  })

この記述は、検証ツールの「コンソール」タブを開いて、そこに上記のコードを貼り付けると検証画面で確認できます。

こちらでも同様にアウトラインが表示されます。

まとめ

CSSで意図しない横スクロールの原因と対策について解説しました。

実装中に気づかなくても、実装後表示確認する際に横スクロールがあるか確認するようにしましょう。