スマホで表示が崩れるとき、まず疑う3つ

原因はいくつもあるように見えて、実際に手を入れてみると大半は同じ３つのどれかに行き着きます。順に見ていきます。

■ 1. そもそもスマホ用に表示されていない

文字が極端に小さく、PC版がそのまま縮小されたように見える場合。

これは崩れているのではなく、スマホに「画面幅に合わせてください」と伝えていないだけです。

HTMLの head の中に、次の1行が入っているか確認してください。

<meta name="viewport" content="width=device-width, initial-scale=1">

この1行が無いと、スマホは「PCと同じ幅（だいたい980px）の画面」だと思い込んで描画します。

古いテンプレートを流用したサイトや、ページを1枚だけ後から足したケースでよく抜けています。

確認方法：スマホでページを開いて、ピンチアウトせずに本文が読めるかどうか。

読めないほど小さいなら、まずここを疑ってください。

■ 2. 幅がピクセル固定で指定されている

横スクロールが発生して、右側が見切れる場合。

どこかに width: 980px のような固定値が残っているのが典型です。

画面幅が375pxのスマホに980pxの箱を置けば、当然はみ出します。

直し方は、固定の width をやめて max-width にすることです。

width: 980px; → はみ出す

max-width: 980px; → 画面が狭ければ画面幅まで縮む

PCでの見た目は変わりません。980pxより広い画面では、どちらも980pxで表示されるためです。

「スマホを直すとPCが崩れるのでは」と心配される方が多いのですが、この直し方なら影響しません。

■ 3. 画像と表がはみ出している

横スクロールの原因として、幅指定の次に多いのがこの2つです。

画像は、元のサイズのまま表示されるとはみ出します。

CSSに次の指定を足すと、画面幅に合わせて縮むようになります。

img { max-width: 100%; height: auto; }

height: auto を忘れると縦横比が崩れるので、セットで入れてください。

表（table）は少し事情が違います。

料金表のように列が多い表は、無理に縮めるとかえって読めなくなります。

おすすめは、表だけを横スクロールさせる方法です。

表を overflow-x: auto の入れ物で囲むと、

ページ全体ではなく表の中だけが横に動くようになります。

「横にスクロールできます」と一言添えておくと、さらに親切です。

■ どこがはみ出しているか分からないとき

横スクロールは発生しているのに、犯人が見つからない——よくあります。

そういうときは、ブラウザの開発者ツール（F12）のコンソールで次を実行すると、

画面幅より広い要素を洗い出せます。

document.querySelectorAll('*').forEach(e => {

  if (e.getBoundingClientRect().right > document.documentElement.clientWidth) console.log(e);

});

該当した要素の幅指定を上から順に確認していけば、たいてい原因にたどり着きます。

■ 直す前にやっておくこと

修正前の状態を、スマホ幅とPC幅の両方でスクリーンショットに残しておいてください。

スマホの崩れを直したつもりがPC側を壊していた、という事故は本当によく起きます。

Before/After を両方の幅で並べて確認できるようにしておくと、後戻りの判断が一瞬でつきます。

■ それでも解決しないとき

・CSSが複数ファイルに分かれていて、どれが効いているのか分からない

・WordPressのテーマを更新したら崩れた

・直したい箇所だけを触りたいが、他への影響が読めない

このあたりまで来たら、闇雲に上書きするより一度整理した方が早いことが多いです。

私はこうした既存サイトの表示崩れの修正を承っています。

PCでの見た目を変えない方針で直し、修正前後の状態と修正箇所の一覧を添えてお返ししています。

――

この記事の執筆には生成AIを活用しています。内容は実際にサンプルサイトで再現・修正して確認したものです。