レスポンシブモバイルの水平スクロールの問題

概要

モバイルでページを表示した際、ページの右側に不要な余白が表示されてしまうことがあります（左から右へスライドします）。この記事では、この問題を回避する方法を学びます。

レスポンシブ対応モバイル横スクロール問題はなぜ発生するのか？

基本的に、この問題が発生する主な理由は、ページコンテンツの幅がデバイスの幅よりも大きいことです。

例えば、モバイルデバイスの幅が375pxであるにもかかわらず、375pxを超える要素が存在する場合、その要素全体を見るために横スクロールが必要になります。

要素に負のマージン（margin-leftやmargin-right）を設定した場合も、この問題が発生することがあります。

レスポンシブ対応モバイル横スクロール問題の修正方法

より視覚的に理解するために、この動画チュートリアルをご確認ください：

• ステップ 1：カスタムコードエディターを開く

左下隅に移動し、ホバーすると「Add custom Code」機能が表示されるので、左クリックします。

ステップ 2：カスタムCSSコードを貼り付ける

次に、このリンクからコードを取得し、下の画像のようにカスタムCSSボックスに貼り付けます。

変更を保存ボタンをクリックし、ページを公開して結果を確認してください。

注：上記のコードが機能しない場合は、このコードに変更できます。モバイルでページに固定セクションまたは固定ヘッダーがある場合は、このCSSにご注意ください。このコードは固定セクションを無効にします。

ヒントとベストプラクティス

• 要素の幅を確認：横スクロールを防ぐため、デバイスの幅を超える要素がないことを確認します。

• 負のマージンを避ける：負のマージンはオーバーフローを引き起こす可能性があります。注意して使用してください。

• カスタムCSSを使用：カスタムCSSを適用して、モバイルデバイスでの横スクロールに関する問題を修正します。

よくある質問

1. 横スクロールの原因は何ですか？

デバイス画面よりも幅が広いコンテンツ、多くの場合、過大なサイズの要素または負のマージンが原因です。

2. スクロール問題を修正するにはどうすればよいですか？

提供されているカスタムCSSコードを使用して、オーバーフローの問題を修正します。

追加リソース

• PageFlyスライドショー要素の使い方

• PageFlyページリストが読み込みを停止しない