レスポンシブで横スクロールが出る原因と消し方

スマホでホームページを見たときに、左右にスライドできてしまうことはありませんか？

この横スクロールが出ている状態は、レイアウトが画面幅をはみ出しているサインです。
これは見づらくなるだけでなく、ユーザーの離脱にもつながりやすくなります。

そこでこの記事では、
レスポンシブ対応で横スクロールが出る理由と、その消し方を初心者向けに解説します。

横スクロールは、原因さえ見つければ簡単に直せるので、ぜひ確認してみてくださいね！

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

まずは、横スクロールが出る主な原因から確認していきましょう。

原因① 画像が画面幅を超えている

固定サイズで指定された画像は、スマホ画面より大きくなりやすいです。

たとえば、

img {
  width: 600px;
}

このような指定があると、確実にはみ出します。

原因② テーブルがはみ出している

料金表や一覧表など、項目が多い表は横幅が広くなることが多いです。

スマホ対応していないと、横スクロールの原因になります。

原因③ 固定幅の要素がある

width: 900px;

のような固定指定は、スマホでは崩れの原因になります。

原因④ marginやpaddingの影響

左右に大きな余白が入っていると、それだけではみ出すこともあります。

まずはこれで直る基本対処法（最重要）

それでは、基本的な対処方法をご紹介します。
ほとんどの横スクロールは、次の設定で改善しますよ。

画像を自動調整する

img {
  max-width: 100%;
}

横幅を割合指定にする

width: 100%;

固定サイズをやめるだけでかなり直ります。

よくあるパターン別の消し方

次に、よくあるパターン別の消し方をご紹介します。

画像が原因の場合

「max-width:100%」を設定するだけで解決するケースがほとんどです。

テーブルが原因の場合

横幅100%＋横スクロール対応が安全です。

.table-wrap {
  overflow-x: auto;
}

divが原因の場合

固定幅指定を削除して、割合指定に変更しましょう。

応急処置としての対策（最終手段）

どうしても原因が特定できない場合は、次の方法もあります。

body {
  overflow-x: hidden;
}

ただし、これは根本解決ではありません。
必ず原因となっている要素を直すことをおすすめします。

修正後のチェックポイント

修正後のチェックポイントをご紹介します。
調整したあとは必ず確認しましょう。

やはり、スマホでの表示確認は、実際にスマホで確認することが一番ですよ。

まとめ

「レスポンシブで横スクロールが出る原因と消し方」の内容はいかがでしたでしょうか？

レスポンシブで横スクロールが出る原因のほとんどは、

このどれかです。

そこでまずは、

これだけで多くのサイトは改善できますよ。

スマホでホームページを見たときに、横スクロールが出てしまうと、本当に扱いづらいので、、、
ぜひここでお伝えしたことを確認してみてくださいね！