---
title: "iPhoneだけ横スクロールするときの原因と直し方"
description: "iPhoneだけ横スクロールが発生するレイアウト崩れに困っているWeb制作者向けに、overflow・viewport・固定幅要素・margin負値の4パターンを診断・修正する手順をまとめた記事。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/iphone-horizontal-scroll-fix"
markdown: "https://giga-site.com/articles/iphone-horizontal-scroll-fix/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 6
---
# iPhoneだけ横スクロールするときの原因と直し方

PCでは問題ないのにiPhoneで横スクロールが発生してしまう現象は、CSS設計のわずかなミスが原因です。原因となる要素の特定が難しく、「どのCSSを直せばよいかわからない」という声が多い問題でもあります。原因別に段階的な確認手順と修正方法を解説します。

> Source HTML: https://giga-site.com/articles/iphone-horizontal-scroll-fix
> Article index: https://giga-site.com/articles/index.md

## よくある原因

最も多い原因は、`width: 100vw` の使用です。iOSのSafariでは画面幅にスクロールバーの幅が含まれず、`100vw` がコンテンツ幅を超えてしまいます。PCのChromeでは問題にならないためレビューで見逃されやすく、iPhoneで初めて横スクロールが露見します。CSSで `width: 100vw` を使っている箇所を `width: 100%` に変更するだけで解消するケースが多いです。

次に多いのが、`min-width` や固定ピクセル値（`width: 1200px` など）を持つ要素がコンテナを突き破るケースです。親要素に `overflow: hidden` が設定されていない場合、固定幅の子要素がiPhoneの画面幅（375〜430px）を超えてページ全体が横方向に広がります。DevToolsの「要素」タブで幅が画面を超えているコンポーネントを特定し、`max-width: 100%` を追加することで修正できます。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 自分側で確認すること

まずChromeのDevToolsでiPhoneシミュレーターを開き（Cmd+Shift+M）、デバイスを「iPhone 14 Pro」などに設定してページを確認します。横スクロールが再現したら、「要素」タブで各要素を選択し、右側の「ボックスモデル」に表示される幅がビューポート幅（390px程度）を超えていないか確認します。超えている要素が見つかれば、その要素かその親のCSSに修正を加えます。

Safariの「開発」メニュー（Mac）からiPhone実機のSafariにリモート接続するとより正確に確認できます。Mac側の「開発」→「[デバイス名]」→「[ページ名]」でiPhone実機のDOMをMacのDevToolsで操作できます。この方法で実機でのみ発生する横スクロールの原因要素を特定し、`overflow-x: hidden` を `body` に追加するか、問題の要素のwidthを修正してください。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 相手側で確認すること

相手から「iPhoneで横スクロールする」と報告を受けたときは、まずiPhoneのモデルとiOSのバージョンを確認します。画面幅がデバイスによって異なり（SE:375px、15 Pro Max:430px）、特定のサイズでのみ発生するケースがあるためです。「何インチのiPhoneですか？」と聞くより「画面サイズが一番小さいSEですか、それとも大きいPro Maxですか？」と聞くと相手も答えやすくなります。

スクリーンショットだけでは横スクロールの原因を判断しにくいため、可能であれば「横にスクロールしたときに何が右にはみ出しているか」を確認してもらいます。「右端に何かコンテンツが半分見切れていますか？」「スクロールしても何も表示されませんか？」と具体的に尋ねると、原因が画像のはみ出しかナビゲーションバーの幅超過かを絞り込めます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 再発防止の運用

HTMLを公開する前に必ずiPhoneの実機またはシミュレーターで確認する手順をチェックリストに入れます。特にAI生成HTMLは `100vw` の使用や固定幅指定が混入しやすいため、CSSを受け取ったら `vw` と `px` の固定値を検索して確認する習慣をつけてください。

CSSにグローバルで `*, *::before, *::after { box-sizing: border-box; }` と `body { overflow-x: hidden; }` を設定しておくと、多くの横スクロール問題を予防できます。ただし `overflow-x: hidden` は`position: sticky` との組み合わせで不具合が起きる場合があるため、sticky要素を使う場合は `body` ではなく特定のコンテナに限定して設定してください。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## よくある質問

### `body { overflow-x: hidden; }` を設定したら横スクロールは消えましたが、これで根本解決になっていますか？

根本解決ではなく応急処置です。はみ出している要素が存在したままなのでレイアウトのバグは残っています。DevToolsで幅が画面を超えている要素を特定し、`max-width: 100%` や `width: 100%` で修正するのが本来の対処法です。

### PCのChromeシミュレーターでは再現しないのに実機のiPhoneで横スクロールします。

iOSのSafariはChromeとは異なるレンダリングエンジン（WebKit）を使います。特にSafariのセーフエリア（ノッチ周辺）や動的なアドレスバーの高さ変化が影響することがあります。Mac SafariのリモートデバッグかBrowserStackのiOSシミュレーターで実際のSafariエンジンで確認してください。

### 横スクロールが発生している要素を素早く特定する方法はありますか？

ChromeのDevToolsで `document.querySelectorAll('*')` を実行し、各要素の `offsetWidth` と `document.body.offsetWidth` を比較するコンスニペットを使うと効率的です。または「overflowing-elements」などのブラウザ拡張機能を使うと、はみ出している要素をビジュアルでハイライト表示できます。

## 関連記事

- [iPhoneだけ横スクロールするときに共有前に確認するチェックリスト](https://giga-site.com/articles/iphone-horizontal-scroll-checklist/index.md)
- [iPhoneだけ横スクロールする問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/iphone-horizontal-scroll-ai-prompt/index.md)
- [iPhoneだけ横スクロールするときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/iphone-horizontal-scroll-request-message/index.md)
- [固定ヘッダーでスクロール位置がずれるときの原因と直し方](https://giga-site.com/articles/fixed-scroll-offset-fix/index.md)
- [固定ヘッダーでスクロール位置がずれるときに共有前に確認するチェックリスト](https://giga-site.com/articles/fixed-scroll-offset-checklist/index.md)
- [固定ヘッダーでスクロール位置がずれる問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/fixed-scroll-offset-ai-prompt/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "iPhoneだけ横スクロールするときの原因と直し方",
  "description": "iPhoneだけ横スクロールが発生するレイアウト崩れに困っているWeb制作者向けに、overflow・viewport・固定幅要素・margin負値の4パターンを診断・修正する手順をまとめた記事。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/iphone-horizontal-scroll-fix",
  "url": "https://giga-site.com/articles/iphone-horizontal-scroll-fix",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "`body { overflow-x: hidden; }` を設定したら横スクロールは消えましたが、これで根本解決になっていますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "根本解決ではなく応急処置です。はみ出している要素が存在したままなのでレイアウトのバグは残っています。DevToolsで幅が画面を超えている要素を特定し、`max-width: 100%` や `width: 100%` で修正するのが本来の対処法です。"
      }
    },
    {
      "@type": "Question",
      "name": "PCのChromeシミュレーターでは再現しないのに実機のiPhoneで横スクロールします。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "iOSのSafariはChromeとは異なるレンダリングエンジン（WebKit）を使います。特にSafariのセーフエリア（ノッチ周辺）や動的なアドレスバーの高さ変化が影響することがあります。Mac SafariのリモートデバッグかBrowserStackのiOSシミュレーターで実際のSafariエンジンで確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "横スクロールが発生している要素を素早く特定する方法はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ChromeのDevToolsで `document.querySelectorAll('*')` を実行し、各要素の `offsetWidth` と `document.body.offsetWidth` を比較するコンスニペットを使うと効率的です。または「overflowing-elements」などのブラウザ拡張機能を使うと、はみ出している要素をビジュアルでハイライト表示できます。"
      }
    }
  ]
}
```