---
title: "iPhoneだけ横スクロールするときに共有前に確認するチェックリスト"
description: "iPhoneの横スクロール問題を公開前に防ぎたいWeb制作者向けに、viewport・100vw・固定幅・overflow設定の4項目を体系的に確認するチェックリストをまとめた記事。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/iphone-horizontal-scroll-checklist"
markdown: "https://giga-site.com/articles/iphone-horizontal-scroll-checklist/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# iPhoneだけ横スクロールするときに共有前に確認するチェックリスト
iPhoneで横スクロールするレイアウト崩れは、見落としがちなCSSの記述が積み重なって発生します。公開前の5分間でこのチェックリストを確認するだけで、「PCでは問題ないのにiPhoneで崩れる」という問題の大半を未然に防げます。
> Source HTML: https://giga-site.com/articles/iphone-horizontal-scroll-checklist
> Article index: https://giga-site.com/articles/index.md
## よくある原因
iPhoneだけ横スクロールする原因で最も見落とされやすいのが、viewportの``タグの設定ミスです。`` が``内にない場合、iPhoneはページをデスクトップ幅として描画し、縮小表示してしまいます。縮小表示された結果、ピンチアウトで拡大すると横スクロールが発生したように見えることがあります。
もう一つの見落としポイントは、マージンやパディングの設定です。`margin-left: -20px` のような負のマージンは親要素の外にはみ出すため、`overflow` 設定によっては横スクロールバーが出現します。またflex/gridレイアウトで `gap` を指定しつつ `width: 100%` にすると、gap分だけ幅が計算を超えてはみ出すケースがあります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
## 自分側で確認すること
チェック①：HTMLの``に `` が存在するか確認する。これがない場合、iPhoneでの表示が壊滅的になる可能性があります。AI生成HTMLでは稀に省略されることがあるため、必ずHTMLを開いて検索してください。
チェック②：CSSの中に `width: 100vw` `min-width: [ピクセル値]` `width: [ピクセル値（400以上）]` が含まれていないか検索します。これらが見つかった場合、それぞれ `width: 100%` `max-width: 100%` に変更して再確認します。また `margin` や `padding` に負の値（`-` で始まる値）がある場合は、意図した設計かどうか見直してください。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 相手側で確認すること
チェック③：iPhoneを使っている相手から「横スクロールする」と報告を受けたら、スクリーンショットと合わせて「iPhoneのSafariで確認しているか、それとも別のブラウザか」を確認します。Chromeなど別ブラウザでは再現せず、Safariだけで発生する場合はiOS Safari固有の挙動（セーフエリア、ダイナミックビューポート高さ等）が原因の可能性があります。
チェック④：複数のiPhoneサイズで横スクロールが発生するか確認してもらいます。SEのような小型（375px幅）のみで発生し、Pro Maxでは問題ない場合は、特定のブレークポイント以下でCSSレイアウトが崩れていることが原因です。「一番小さいiPhoneで見るとどうですか？」と質問すると問題の範囲を素早く特定できます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## 再発防止の運用
このチェックリストをGitHubリポジトリの`CONTRIBUTING.md`やプロジェクトのNotionに組み込み、プルリクエスト・デプロイ前の確認事項として明記します。チームで制作する場合は、iPhoneチェックを担当するレビュアーを決めておくと抜け漏れが防げます。
AI生成HTMLを使う場合は、プロンプトに「iOSのSafariで横スクロールが発生しないよう、`width: 100vw`は使わず`width: 100%`を使ってください。``タグを必ず含めてください」と指定するだけで、このチェックリストの主要項目をAI側に対処させることができます。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
## よくある質問
### チェックリストをすべて確認したのにiPhoneだけ横スクロールします。他に何が考えられますか？
サードパーティの埋め込みウィジェット（チャット・フォーム・地図等）が横幅を固定しているケースがあります。その要素を一時的にHTMLから削除してみて横スクロールが解消されれば、そのウィジェットにラッパーdivと `overflow: hidden` および `max-width: 100%` を設定してください。
### viewportのmetaタグは正しいのに、iPhoneで見るとコンテンツが右に切れています。
テキストに `white-space: nowrap` が設定されていて、長い文字列が折り返されていない可能性があります。または、絶対配置（`position: absolute`）された要素が `right: -50px` のように画面外に配置されているケースも考えられます。DevToolsで問題の要素を探し、`white-space` と `position` のプロパティを確認してください。
### iPhoneのSafariだけで発生する横スクロールをMacで再現する方法はありますか？
最も正確な方法はMac SafariとiPhoneをUSBで接続して使うリモートデバッグです。次善策はBrowserStackやLambdaTestのクラウドテスト環境でiOS Safariの実機シミュレーションを使う方法で、Safariのレンダリングエンジンに近い結果が得られます。
## 関連記事
- [iPhoneだけ横スクロールするときの原因と直し方](https://giga-site.com/articles/iphone-horizontal-scroll-fix/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-checklist/index.md)
- [固定ヘッダーでスクロール位置がずれるときの原因と直し方](https://giga-site.com/articles/fixed-scroll-offset-fix/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制作者向けに、viewport・100vw・固定幅・overflow設定の4項目を体系的に確認するチェックリストをまとめた記事。",
"datePublished": "2026-06-25",
"dateModified": "2026-06-25",
"mainEntityOfPage": "https://giga-site.com/articles/iphone-horizontal-scroll-checklist",
"url": "https://giga-site.com/articles/iphone-horizontal-scroll-checklist",
"inLanguage": "ja",
"image": "https://giga-site.com/og-image.png",
"articleSection": "トラブルシュート",
"author": {
"@type": "Organization",
"name": "ギガサイト便"
},
"publisher": {
"@type": "Organization",
"name": "ギガサイト便"
},
"mainEntity": [
{
"@type": "Question",
"name": "チェックリストをすべて確認したのにiPhoneだけ横スクロールします。他に何が考えられますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "サードパーティの埋め込みウィジェット（チャット・フォーム・地図等）が横幅を固定しているケースがあります。その要素を一時的にHTMLから削除してみて横スクロールが解消されれば、そのウィジェットにラッパーdivと `overflow: hidden` および `max-width: 100%` を設定してください。"
}
},
{
"@type": "Question",
"name": "viewportのmetaタグは正しいのに、iPhoneで見るとコンテンツが右に切れています。",
"acceptedAnswer": {
"@type": "Answer",
"text": "テキストに `white-space: nowrap` が設定されていて、長い文字列が折り返されていない可能性があります。または、絶対配置（`position: absolute`）された要素が `right: -50px` のように画面外に配置されているケースも考えられます。DevToolsで問題の要素を探し、`white-space` と `position` のプロパティを確認してください。"
}
},
{
"@type": "Question",
"name": "iPhoneのSafariだけで発生する横スクロールをMacで再現する方法はありますか？",
"acceptedAnswer": {
"@type": "Answer",
"text": "最も正確な方法はMac SafariとiPhoneをUSBで接続して使うリモートデバッグです。次善策はBrowserStackやLambdaTestのクラウドテスト環境でiOS Safariの実機シミュレーションを使う方法で、Safariのレンダリングエンジンに近い結果が得られます。"
}
}
]
}
```