スマホでホームページを見ていると、
「左右にスクロールできてしまう」
「画面がはみ出して見づらい」
「なんだかレイアウトが崩れている気がする」
こんな経験はありませんか？
横スクロールが出ている状態は、見づらいだけでなく使いにくさの原因にもなります。
そこで、この記事では、初心者の方でもすぐできる横スクロールの消し方を分かりやすく解説します。
横スクロールが出てしまうと、とても扱いづらいので、ぜひ最後まで確認してみてくださいね！
スマホで横スクロールが出る主な原因
まずは、「スマホで横スクロールが出る主な原因」から見ていきましょう。
幅を固定している要素がある
よくあるのが、
width: 800px;のように、画面より大きい幅を指定しているケースです。
スマホでは収まらず、横にはみ出してしまいます。
画像や表がはみ出している
画像やテーブルが自動で縮まらず、
画面の外まで広がってしまうと横スクロールが出ます。
長い文字やURLが折り返されていない
長い英数字やURLがそのまま表示されると、
横に広がってしまいます。
まず確認したい基本ポイント
次に、「まず確認したい基本ポイント」をご紹介します。
どこがはみ出しているかを探す
スマホで画面を横に動かして、
どの部分がはみ出しているか確認しましょう。
パソコンでも幅を縮めて確認する
ブラウザの幅を細くして、
はみ出す場所を探すと見つけやすいです。
すぐできる消し方（初心者向け）
ここでは、「すぐできる消し方」をご紹介します。
幅を100%にする
固定されている幅を次のように直します。
.container {
width: 100%;
max-width: 100%;
}これだけで画面に収まります。
画像を自動調整する
img {
max-width: 100%;
height: auto;
}画像がはみ出す問題はほぼ解決します。
はみ出しを隠す方法（応急処置）
どうしても直せないときは、
body {
overflow-x: hidden;
}で横スクロールを消すこともできます。
ただし、原因を直すのが基本です。
横スクロールを防ぐためのコツ
横スクロールを防ぐためのコツをご紹介します。
max-widthを活用する
固定したい場合でも、
max-width: 900px;にすると、スマホでは自動で縮みます。
文字を折り返す設定をする
word-break: break-word;長い文字が自動で改行されます。
よくある失敗例（スマホで横スクロールが出るとき）
横スクロールを消そうとして、逆に見づらくしてしまうケースもよくあります。
ここでは特に多い失敗を紹介します。
とりあえず隠して原因を直していない
overflow-x: hidden; を設定すると、横スクロール自体は消えます。
ですが、実際にははみ出している原因がそのまま残っている状態です。
画像や要素が画面外に飛び出したままなので、レイアウトが崩れ続けることもあります。
まずは「何がはみ出しているのか」を直すことが大切です。
一部だけ対応して満足してしまう
目についた1か所だけ直して、
「これで直った！」と思ってしまうケースも多いです。
ですが、別のページや別の部分では、
まだ横スクロールが出ていることもよくあります。
スマホ対応はサイト全体をチェックする習慣が大切です。
固定幅を残したままにしてしまう
width: 800px;のような指定を一部に残したままだと、
ほかを直しても横スクロールは消えません。
特に、画像・ボックス・表などに固定幅が残りやすいので、
しっかり確認しましょう。
パソコンだけで確認して安心してしまう
パソコン表示で問題なさそうに見えても、
スマホでは横スクロールが出ていることはとても多いです。
必ずスマホ画面でもチェックすることが大切です。
まとめ｜横スクロールは必ず直せる
「スマホで横スクロールが出てしまう原因と消し方」のコンテンツはいかがでしたでしょうか？
スマホで横スクロールが出る原因のほとんどは、
- 幅の固定
- 画像や表のはみ出し
- 長い文字
です。
これらを
✔ 幅を100%に
✔ 画像を自動調整
✔ 折り返し設定
するだけで、ほとんど解決できます。
私も、どの箇所が原因で、横スクロールが出てしまうのか、苦戦しましたが、、、
１つずつ、原因と思われる個所を探すことで、解決できますよ。
ぜひ一度、自分のホームページで試してみてくださいね！
