スマホだけ横スクロールが出るCSSの原因と直し方

パソコンでは問題ないのに、スマホで見ると画面が横に少し動き、右側に余白やズレが出る。これは、画面幅より広い要素がどこかにあるサインです。CSSを手当たり次第に直す前に、はみ出している要素を見つけるところから始めます。

この記事で分かること

横スクロールは「画面幅より広い要素が、どこかに1つ以上ある」ときに起きます。原因は1か所のことも、複数のこともあります。

スマホで横スクロールが出る原因は、たいてい次のどれかです。

固定幅（px）の要素が画面幅を超えている
width: 600px のように固定幅で指定された要素が、スマホの画面幅より広いと、その分はみ出します。
画像・動画・iframeに最大幅の指定がない
画像や埋め込み（YouTube、地図など）に max-width: 100% がないと、元のサイズのまま画面を突き破ります。
要素を画面外に押し出す余白やはみ出し
マイナスのmargin、position: absolute での配置、大きなpaddingなどで、要素が画面の外まで広がっているケース。
100vw の指定
width: 100vw は縦スクロールバーの幅を含むため、環境によってわずかにはみ出します。
折り返せない長い文字列
長いURLや英単語が途中で折り返されず、1行のまま画面幅を超えることがあります。

「どの要素が原因か」を先に特定すると、無駄な修正を避けられます。

原因の要素を一時的に可視化する
ブラウザの開発者ツールで、次のCSSを一時的に追加すると、すべての要素に枠線が付きます。画面からはみ出している要素を目で探せます。
```
* { outline: 1px solid red; }
```
確認が終わったら、必ずこの行は消します。

はみ出している幅を数値で確認する
開発者ツールのコンソールで次を実行すると、ページの実際の横幅と表示幅が分かります。scrollWidth が clientWidth より大きければ、その差の分だけはみ出しています。
```
document.documentElement.scrollWidth document.documentElement.clientWidth
```
原因の要素を特定する
枠線で見つけた要素を開発者ツールで選び、width やはみ出している方向を確認します。画像なら画像、表なら表、と犯人を1つずつ絞ります。
要素に合わせて直す
- 画像・動画・iframe：max-width: 100% を指定する
- 固定幅の要素：width を max-width に変える、または％指定にする
- 長い文字列：overflow-wrap: anywhere などで折り返す
- paddingではみ出す場合：box-sizing: border-box を確認する

overflow-x: hidden で隠すのは応急処置です。 横スクロールは消えますが、はみ出している要素はそのまま残ります。根本原因を放置すると、別の表示崩れやレイアウトの不具合につながることがあります。まずは原因の要素を特定してください。
全要素に当たるCSS（* や共通クラス）は影響範囲が広いです。一時的な確認用にとどめ、本番のCSSには残さないようにします。
CSSを変更する前に、現在のCSSをコピーして残し、元に戻せる状態にしておきます。

更新のあとに崩れが出た場合は、WordPress更新後に表示が崩れたときの原因切り分けもご確認ください。こうした崩れは、ふだんの点検で気づきやすくなります（Webサイトの保守チェック）。

自分で原因の要素まで特定できない、直したつもりが直らない、というときは次の情報があると調査が早くなります。

原因の要素が見つからない、overflow: hidden で隠す以外の直し方が分からない──そうした場合は、CSSの構造から切り分ける必要があります。

現役のWebエンジニアとして、表示崩れの原因調査から修正まで対応しています。最初は、対象ページのURL・困っている内容・スクリーンショット（あれば）の3点だけで大丈夫です。応急処置ではなく、原因に合わせた修正をご提案します。