> For the complete documentation index, see [llms.txt](https://help.pagefly.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pagefly.io/pagefly-help-center-japanese/faqtotoraburushtingu/troubleshooting/live-site-issue/responsive-mobile-horizontal-scroll-issue.md).

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

### 概要

モバイルでページを表示した際、ページの右側に不要な余白が表示されてしまうことがあります（左から右へスライドします）。この記事では、[この問題を回避する方法](https://help.pagefly.io/manual/responsive-mobile-horizontal-scroll-issue/)を学びます。

![](/files/sEO7lBfcz1JePt0O8Ab9)

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

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

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

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

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

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

{% embed url="<https://youtu.be/b6nBY2qwv4k?si=wf7-7mNCG4VRJhhn>" %}

* **ステップ 1：**[**カスタムコードエディター**](https://help.pagefly.io/manual/custom-code-editor/)**を開く**

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

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

次に、この[リンク](https://gist.githubusercontent.com/Sally165/733ac26f923c45527660767f6b560031/raw/8cbc2635a11c2200126c7f4f15d3e92ffcf0ee3c/gistfile1.txt)からコードを取得し、下の画像のようにカスタムCSSボックスに貼り付けます。

![](/files/Dt2JBwgg90QCCKLSTQPS)

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

{% 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/)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.pagefly.io/pagefly-help-center-japanese/faqtotoraburushtingu/troubleshooting/live-site-issue/responsive-mobile-horizontal-scroll-issue.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.