# レスポンシブモバイルの水平スクロール問題 ### 概要 モバイルでページを表示した際、ページの右側に不要な余白が表示されてしまうことがあります（左から右へスライドします）。この記事では、[この問題を回避する方法](https://help.pagefly.io/manual/responsive-mobile-horizontal-scroll-issue/)を学びます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-d21c5e2d3a2158109ee161d3efa175d76588bb4c%2FAD_4nXeoj9q2tjWZNSfWHPi5nrJYHAVvTsTnIOX7WcC1z8-RqT-IT7pTQXFSxw8UES3fHam3Pds1QagxuE5CJIc373Ue_lLX1Z-8Y8YCEX7tlbY-K7FJP9466_7IzjxLF_ogyHfWurdmek0KKZpWL9CzUQkeyp44gcvUN0_VZdsdvwqw-ZA.png?alt=media) ### レスポンシブ対応モバイル横スクロール問題はなぜ発生するのか？ 基本的に、この問題が発生する主な理由は、ページコンテンツの幅がデバイスの幅よりも大きいことです。 例えば、モバイルデバイスの幅が375pxであるにもかかわらず、375pxを超える要素が存在する場合、その要素全体を見るために横スクロールが必要になります。 要素に負のマージン（margin-leftやmargin-right）を設定した場合も、この問題が発生することがあります。 ### レスポンシブ対応モバイル横スクロール問題の修正方法 より視覚的に理解するために、この動画チュートリアルをご確認ください： {% embed url="" %} * **ステップ 1：**[**カスタムコードエディター**](https://help.pagefly.io/manual/custom-code-editor/)**を開く** 左下隅に移動し、ホバーすると「Add custom Code」機能が表示されるので、左クリックします。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4XdSPDAXGjeJwISZavMS9Z3gdQHeiN3rvPfvtNQSETDt3jvh35YNwjcgdcVSx1VlfHRy1YWwvyzT-ZJnRHBSL92mEGzZbblaoRTCWkovGXBPqCOCIrqsYFYyV-ZoJuVIBnOdk4imGZTmk9C041gkOAkeyp44gcvUN0_VZdsdvwqw-ZA.png) #### ステップ 2：カスタムCSSコードを貼り付ける 次に、この[リンク](https://gist.githubusercontent.com/Sally165/733ac26f923c45527660767f6b560031/raw/8cbc2635a11c2200126c7f4f15d3e92ffcf0ee3c/gistfile1.txt)からコードを取得し、下の画像のようにカスタムCSSボックスに貼り付けます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-42e81fb2e78785424e375bf3742be05595ff823f%2FAD_4nXdlseZH6mx47lzbvWAHzZYYGonioC7KUeGUQufCwgyZbggj1Pj_q9_P2xEOBinVUostGgXXvvFQ_bkbY3VLj7hmxM9p929JXyqUCpXHJYw9V_OXI_JpFBipq932yfWAHhsvbi1zT0aL1npVLXQuWgkeyp44gcvUN0_VZdsdvwqw-ZA.png?alt=media) 変更を保存ボタンをクリックし、ページを公開して結果を確認してください。 {% hint style="info" %} **注**：上記のコードが機能しない場合は、この[コード](https://gist.githubusercontent.com/Sally165/bb201756c04293de1040300d2b6c7bf7/raw/81c2ad51aa3d02b8de8491e78ddcff8c2b9902da/gistfile1.txt)に変更できます。モバイルでページに固定セクションまたは固定ヘッダーがある場合は、このCSSにご注意ください。このコードは固定セクションを無効にします。 {% endhint %} ### ヒントとベストプラクティス * 要素の幅を確認：横スクロールを防ぐため、デバイスの幅を超える要素がないことを確認します。 * 負のマージンを避ける：負のマージンはオーバーフローを引き起こす可能性があります。注意して使用してください。 * カスタムCSSを使用：カスタムCSSを適用して、モバイルデバイスでの横スクロールに関する問題を修正します。 ### よくある質問 **1. 横スクロールの原因は何ですか？** デバイス画面よりも幅が広いコンテンツ、多くの場合、過大なサイズの要素または負のマージンが原因です。 **2. スクロール問題を修正するにはどうすればよいですか？** 提供されているカスタムCSSコードを使用して、オーバーフローの問題を修正します。 ### 追加リソース * [PageFlyスライドショー要素の使い方](https://help.pagefly.io/manual/slideshow-element/) * [PageFlyページリストが読み込みを停止しない](https://help.pagefly.io/manual/infinite-loading-error-in-pagefly-page-list/)