スマホでWebサイトが横にはみ出す原因3つと対処法

「パソコンでは普通に見えるのに、スマホではページを左右に動かせてしまう」。そんなときは、ページ内のどこかの要素が表示領域より広くなっている可能性があります。

文字やボタンが画面の外へ隠れると、訪問者が必要な情報を見つけにくくなります。今回は、よくある原因3つと、原因の探し方を紹介します。

1．固定幅や余白が、画面の幅を超えている

例えば幅375pxの画面に、幅600pxの箱を置くと、そのままでは収まりません。widthだけでなく、min-width（これ以上小さくしない指定）にも注意が必要です。

また、標準的なcontent-boxでは、指定した幅に左右のpadding（内側の余白）やborder（枠線）が加わります。width: 100%でも、余白を足すことで親要素からはみ出す場合があります。

対処の例は、固定幅を見直し、必要に応じてwidth: 100%とmax-widthを組み合わせること。box-sizing: border-boxなら、指定幅に内側の余白と枠線を含められます。ただしmargin（外側の余白）は別です。サイト全体へ一括適用する前に、対象箇所への影響を確認しましょう。

2．画像や埋め込みコンテンツが縮まない

大きな画像に固定幅が設定されていたり、動画やiframeの幅がスマホ向けに調整されていなかったりすると、横スクロールの原因になります。

通常の画像では、max-width: 100%; height: auto; が、親要素の幅に収めながら縦横比を保つ基本的な方法です。ただし、親要素自体が広すぎる場合や、別のmin-width指定がある場合は、そちらも見直す必要があります。動画やiframeは、内容に合わせた幅・縦横比の調整が必要です。

3．CSS Gridの列幅や列数がスマホ向けになっていない

CSS Gridは、カードなどを列に並べる仕組みです。PC用の複数列や、列の最小幅がスマホでも残ると、列幅と列間の余白の合計が表示領域を超えることがあります。

対処は、狭い画面では1列に切り替えるなど、画面幅に合った列数・幅へ調整することです。また、1frを指定しても、内容の最小幅に引っ張られて縮まない場合があります。状況に応じてminmax(0, 1fr)や子要素のmin-width: 0を検討します。長いURLなどが原因なら、文字の折り返しも確認します。

これらは一般的な対処例です。実際の修正は、対象サイトのHTML・CSSと内容に合わせて判断します。

原因を特定するには？

まず、崩れるページのURL、画面幅、ブラウザ、問題箇所の画像を記録します。「スマホで崩れる」だけでなく、「幅375pxでカードの右端が切れる」と分かると調べやすくなります。

Chromeのデベロッパーツールでスマホ相当の画面幅に切り替え、はみ出している要素と、その親要素の幅・最小幅・余白・Gridの指定を確認します。画像やフォントの読み込み後も再確認しましょう。

制作者向けには、document.documentElement.scrollWidthがclientWidthより大きいかどうかも、ページ全体の横方向のはみ出しを調べる手掛かりになります。ただし、この数値だけでは原因の要素までは特定できません。

修正後は、問題の幅だけでなく、その前後の幅とPC表示も確認します。開発者ツールでの表示確認は実機確認とは異なるため、可能なら実際の端末でも確認すると安心です。

Before／After：パン屋サイトの修正デモ

ここで紹介するのは、架空のパン屋サイトを使った検証用デモです。実在する店舗のサイトや、お客様から受注した案件ではありません。

修正前は、スマホ相当の幅375pxでカードが左右にはみ出し、横スクロールが発生していました。

CSS Gridの指定を見直した結果、375pxではカードが縦に並び、横方向のはみ出しが解消しました。PC版の表示も維持しています。

既存デモでは、Chromeの画面幅320px・375px・768px・1280pxで表示を確認しています。これはChrome上で画面幅を変えた検証であり、各サイズの実機や全ブラウザでの動作を保証するものではありません。

下の画像は、既存デモの実画面を使ったBefore／After比較です。左が修正前、右が修正後です。

横スクロールを隠す前に、原因を確認しましょう

overflow-x: hiddenをページ全体に指定すると、横スクロールが見えなくなることはあります。ただし、内容やボタンが画面外で切れたままになる場合もあります。意図した演出で使う場合を除き、先に幅が広がる原因を確認することが大切です。

HTML・CSSの表示崩れでお困りの方へ

静的HTML・CSSサイトのスマホ表示崩れについて、原因調査から修正、表示確認まで対応しています。やり取りはココナラ内のチャットで完結します。

ご購入前に、修正したいページのURLと、不具合が分かるスクリーンショットを「見積もり・カスタマイズの相談」からお送りください。内容を確認し、対応可否・料金・納期をご案内します。

WordPressなどのCMS内部の改修、複雑なプログラム修正、本番サイトへの直接反映は対象外です。修正には、編集権限のあるHTML・CSSファイルが必要です。

サービスの詳細・ご相談はこちら