スマホでページが横にずれるのはなぜ？横スクロールの原因と直し方

パソコンでは正常に見えるのに、スマートフォンでページを左右へ動かすと、白い余白が見えることがあります。

画面全体が少し横へずれたり、右側のコンテンツが途中で切れたりする場合もあります。

この現象は、ページ内のどこかに画面幅を超えた要素が存在すると発生します。

原因を見つけず、ページ全体のはみ出しを隠す設定だけを追加すると、必要な文字やボタンまで見えなくなる可能性があります。

今回は、スマートフォンで横スクロールが発生する主な原因と、安全に修正するための確認方法を初心者向けに解説します。

横スクロールは画面幅を超える要素があると発生する

通常のWebページは、画面の横幅に収まるように表示されます。

しかし、ページ内に一つでも画面より横に長い要素があると、ブラウザはその要素を表示するために、ページ全体の横幅を広げることがあります。

その結果、利用者が左右へスワイプできる状態になります。

原因になる要素は、目立つ大きな画像とは限りません。

数ピクセルだけ右側へはみ出した装飾や、画面外に配置された非表示メニューが原因になることもあります。

ページ全体ではなく、どの要素が画面幅を超えているのかを見つけることが解決の第一歩です。

固定幅の要素がスマートフォンに収まらない

横スクロールの代表的な原因は、要素へ大きな固定幅が設定されていることです。

パソコンの画面では問題なくても、スマートフォンの画面は幅が狭いため、そのままでは収まりません。

特に注意したい要素は次のとおりです。

料金表

お問い合わせフォーム

地図

動画

バナー

画像付きカード

複数列のレイアウト

外部サービスの埋め込み

長い英単語を含む見出し

管理画面から追加された表

最大幅だけでなく、画面が狭いときに縮められる設計になっているかを確認します。

デザインカンプの数値をそのまま固定幅として使うと、別の画面サイズで崩れやすくなります。

画像が元の大きさのまま表示されている

大きな画像も横スクロールを起こす原因になります。

画像ファイルの横幅がページより大きくても、表示側で縮小される設定があれば画面内に収まります。

しかし、画像へ固定幅が設定されていたり、縮小を許可していなかったりすると、スマートフォンからはみ出します。

WordPressでは、記事本文へ挿入した画像だけでなく、プラグインが出力する画像や、昔の記事に残っている画像設定にも注意が必要です。

パソコンで確認できるから問題ないと判断せず、画面幅の狭い端末でも確認します。

画像を小さく表示するときは、縦横比が崩れて人物や商品が不自然に見えないかも確認しましょう。

余白を足した結果、全体幅を超えることがある

要素の横幅を画面いっぱいに設定し、さらに左右の内側余白や枠線を加えると、合計が画面幅を超える場合があります。

たとえば、本体部分ですでに画面幅を使用しているところへ、左右の余白が追加されるような状態です。

CSSの幅計算方法によっては、指定した横幅とは別に余白や枠線が加算されます。

この問題は、ボタン、入力欄、カード、ヘッダーなどで起こりやすくなります。

共通の幅計算ルールをサイト全体へ適用すると、同じ問題を繰り返しにくくなります。

見た目の横幅だけでなく、内側余白や枠線を含めた合計幅を考えることが大切です。

画面幅いっぱいの指定にも注意する

画面幅いっぱいに背景やセクションを表示するため、ブラウザの表示領域を基準に横幅を設定することがあります。

便利な方法ですが、縦方向のスクロールバーやブラウザごとの表示方法によって、ページ本体より少しだけ大きくなる場合があります。

その結果、数ピクセル程度の横スクロールが発生します。

大きく崩れていないため、制作中には気付きにくい問題です。

セクションの背景を画面いっぱいにしたいのか、コンテンツ自体を画面幅へ合わせたいのかを分けて考えます。

ページの通常の流れで十分な場合は、親要素に合わせて広がる指定の方が安全です。

左右の余白と横幅を重複して設定している

スマートフォン向けに左右の余白を設定しているにもかかわらず、子要素が画面幅いっぱいになっていると、余白の分だけ外側へはみ出すことがあります。

これは、親要素と子要素の両方で横幅を管理していると起こりやすい問題です。

たとえば、外側の要素で左右に余白を付け、内側のカードでも画面全体を基準に幅を決めると、基準が一致しません。

基本的には、外側のコンテナでページ全体の横幅と余白を管理し、内側の要素は親の幅へ合わせます。

同じ役割の幅設定を複数の階層へ重ねないことが、崩れにくいレイアウトにつながります。

横並びの要素が縮まない

横並びを作るレイアウトでは、子要素が必要な幅より小さくならないことがあります。

カード内に長い文字列や画像があると、その内容を保つために親要素まで押し広げる場合があります。

特に、次のような組み合わせに注意が必要です。

画像と文章の横並び

アイコンと長い見出し

複数の料金カード

検索欄とボタン

ロゴとナビゲーション

日付と記事タイトル

SNSアイコンの一覧

入力欄と補助ボタン

スマートフォンでは、横並びを縦並びへ変更した方が読みやすいこともあります。

無理に一列へ収めるのではなく、内容に必要な幅と操作しやすさを考えて切り替えます。

表はそのまま縮小できないことがある

料金表や比較表は、項目数が多いとスマートフォンの幅へ収まりません。

文字を極端に小さくして無理に縮めると、内容を読めなくなります。

表を扱う方法には、次のような選択肢があります。

表の部分だけ横へスクロールできるようにする

スマートフォンではカード形式へ変更する

重要な列だけを表示する

内容を複数の表へ分ける

見出しと値を縦に並べ直す

詳細を別ページへ分ける

表そのものに横スクロールが必要な場合でも、ページ全体まで横に動かないようにします。

利用者が横に動かせることへ気付ける表示を用意することも重要です。

長い文字列が折り返されない

通常の日本語文章は、画面幅に合わせて自然に折り返されます。

一方、空白のない長い英単語、メールアドレス、ファイル名などは、途中で折り返されず、要素を横へ押し広げる場合があります。

次のような内容に注意します。

長いメールアドレス

外部ページのアドレス

商品番号

注文番号

ファイル名

英語のサービス名

自動生成された識別子

管理画面から入力された連続文字

制作時の仮テキストでは問題がなくても、本番の文章へ置き換えたあとに横スクロールが発生することがあります。

想定より長い文字が入っても表示できるかを確認することが大切です。

改行しない指定が残っている

ナビゲーション、ボタン、見出しなどで、文字を一行に保つために改行を禁止する場合があります。

短い文字では問題ありませんが、管理画面から長い文章へ変更すると、画面内に収まらなくなることがあります。

改行させない指定は、必要な場所だけに使用します。

特に、クライアントが文章を変更できる部分では、どの程度の文字数まで想定しているのかを決めておく必要があります。

ボタンの文字が長くなる可能性があるなら、改行を許可する、文字数を制限する、別の表現を用意するなどの対策を考えます。

画面外へ置いたメニューが原因になる

スマートフォン用のメニューを、閉じているときは画面の外側へ移動させる実装があります。

見た目では表示されていなくても、配置方法によってはページ全体の横幅へ含まれ、横スクロールの原因になることがあります。

同じ問題は、次のような部品でも起こります。

横から表示するメニュー

モーダル

スライダー

追従ボタン

吹き出し

画面外から入るアニメーション

閉じた状態の検索フォーム

装飾用の大きな図形

画面外へ移動しただけでは、本当に表示や操作の対象から外れているとは限りません。

閉じている状態でもページの横幅へ影響していないか確認します。

絶対配置した装飾がはみ出している

背景の円、斜めの図形、英字、写真などをセクションの外側へ少しはみ出させるデザインがあります。

意図的な表現であっても、要素自体が画面幅を超えることで、ページ全体が横へ広がる場合があります。

特にパソコン向けの位置をそのままスマートフォンへ適用すると、大きくはみ出しやすくなります。

装飾については、次の点を確認します。

スマートフォンでも必要な装飾か

端末ごとに大きさを変えるか

はみ出した部分をどの範囲で隠すか

コンテンツの文字やボタンを覆っていないか

画面外へ出てもページ幅へ影響しないか

スマートフォンでは装飾を小さくしたり、非表示にしたりした方が、情報を読みやすくなることもあります。

負の余白による位置調整にも注意する

要素を少し左や右へ動かすために、負の余白を使うことがあります。

一時的にはデザインへ近づけやすい方法ですが、画面幅が変わると想定以上にはみ出す可能性があります。

複数の負の余白を使って位置を合わせると、どの指定が横スクロールの原因なのか分かりにくくなります。

本来のレイアウトで配置できないかを最初に考え、負の余白は目的が明確な場所だけで使用します。

パソコンで必要な調整が、スマートフォンでも必要とは限りません。

画面幅ごとに位置関係を確認することが重要です。

アニメーション中だけはみ出す場合もある

通常時は画面内に収まっていても、アニメーションの開始位置が画面外にあると、一時的に横スクロールが発生する場合があります。

右側から要素を移動させる演出や、大きく拡大してから元のサイズへ戻す演出では注意が必要です。

アニメーションを確認するときは、完了後の画面だけでなく、開始前と実行中も確認します。

JavaScriptが読み込まれる前に、画面外の要素が一瞬表示される場合もあります。

動きを追加した直後に横スクロールが発生したなら、要素の最終位置だけでなく、途中の状態も調べます。

外部サービスの埋め込みも確認する

地図、動画、予約機能、SNS投稿など、外部サービスの内容をページへ埋め込むことがあります。

これらの部品が固定幅で出力されると、サイト側のCSSだけでは簡単に縮まらない場合があります。

プラグインや外部サービスが追加した要素も含めて確認が必要です。

特に、パソコン向けの埋め込み情報をそのまま貼り付けた場合は、スマートフォンでの表示を確認します。

外部サービス側にレスポンシブ対応の埋め込み方法が用意されていることもあります。

サイト側で無理に縮める前に、推奨されている表示方法を確認することが大切です。

ページ全体のはみ出しを隠すだけでは危険

横スクロールが発生すると、ページ全体の横方向のはみ出しを隠す設定を追加したくなります。

見た目上は横へ動かなくなるため、解決したように感じます。

しかし、原因となる要素は画面外に残ったままです。

その要素が文章、フォーム、ボタンだった場合、利用者が内容を確認できなくなる可能性があります。

また、画面外へ開くメニューや、横スクロールが必要な表まで使えなくなることがあります。

はみ出しを隠す設定は、装飾を意図的に切り取る場合など、目的を限定して使用します。

原因が分からない状態でページ全体へ適用するのは避けた方が安全です。

原因を見つけるときは範囲を絞る

横スクロールの原因を探すときは、CSSを次々と変更するのではなく、問題の範囲を絞ります。

まず、ヘッダー、本文、フッターのどこで発生しているかを確認します。

次に、セクション単位で一時的に表示を確認し、どの部分を外すと横スクロールが消えるかを調べます。

原因になりやすい項目は次のとおりです。

固定幅

大きな画像

左右の余白

枠線

横並び

改行しない文字

画面外のメニュー

絶対配置

負の余白

アニメーション

外部サービスの埋め込み

疑わしい指定をすべて同時に変更すると、どの修正が有効だったのか分かりません。

一つずつ確認し、原因を特定してから修正します。

特定のスマートフォンだけで確認しない

スマートフォンの画面幅は一種類ではありません。

自分の端末では問題がなくても、もう少し幅の狭い端末で横スクロールが発生することがあります。

確認するときは、特定の機種名だけを基準にせず、複数の画面幅で表示します。

また、端末を横向きにした場合や、文字を拡大した場合も確認すると安心です。

開発者ツールの端末表示は便利ですが、可能であれば実際のスマートフォンでも操作します。

アドレスバーやスクロールバー、文字サイズなど、実機でしか気付きにくい違いがあるためです。

公開前の確認ポイント

横スクロールを防ぐため、公開前に次の項目を確認します。

ページを左右へ動かせないか

画像が画面幅に収まっているか

カードや入力欄に大きな固定幅がないか

横並びが狭い画面で切り替わるか

表だけを必要に応じて横へ動かせるか

長い英単語やメールアドレスで崩れないか

閉じたメニューがページ幅へ影響していないか

背景装飾が画面外へはみ出していないか

アニメーション中に横幅が広がらないか

外部サービスの埋め込みが収まっているか

文字を拡大しても操作できるか

複数の画面幅と実機で確認したか

トップページだけでなく、表やフォームを使用している下層ページも確認しましょう。

まとめ

スマートフォンで横スクロールが発生するのは、ページ内に画面幅を超えた要素が存在するためです。

原因には、固定幅の要素、大きな画像、左右の余白、横並び、長い文字列、画面外のメニュー、背景装飾、アニメーション、外部サービスの埋め込みなどがあります。

ページ全体のはみ出しを隠せば、見た目上は横スクロールを止められます。

しかし、原因を残したまま隠すと、必要な文章やボタンまで見えなくなる可能性があります。

まずどの要素が画面幅を超えているのかを特定し、その要素の幅、配置、折り返し、端末ごとの表示方法を見直すことが大切です。

横スクロールを単なる見た目の問題として隠すのではなく、レイアウト設計の問題として原因から修正する。

この習慣を身につけることで、さまざまな端末で安定して使えるWebサイトを制作できるようになります。