最終更新日：2022.06.16 [木]　公開日：2019.02.15 [金]　カテゴリー：html・CSS・jQuery・JS備忘

スマホで見ると、身に覚えのない余白が右側にできて、それゆえ横スクロールが出てしまって、画面が揺れまくると言う現象は・・・
あるあるですね。いや、あってはいけないのですが！

そう言うとき、さくっと解決対処法です。

注意

この方法をしたらスクロールバーが２本出る時があるのでご注意です・・・
スクロールバーが２本出た時は以下のエントリーの方法でやってます。

[CSS]スクロールバーが２本出てしまう時

コンテンツからはみ出している要素がないかの確認

これは、わかりやすく余白にはみ出しているものがあれば、その要素が原因なので、サイズを設定すればいいだけです。

よくあるパターンに、
width:100%;
padding:10px;

とか、うっかりやってしまってることがあります。
本体１００％指定してるのに、さらに余白１０pxあてがったら、１００％＋２０pxになるので、はみ出ます。
横スクロール出てしまって当然です。

他にも、PCサイズからレスポンシブサイズに変更するときに、サイズを書き替え忘れて・・・などもあるかもしれません。

そういうのを修正していきましょう。

苦戦したら

一つ一つやっていっても、原因箇所が見つけられないときの、私がやってる方法。
①まず、これから手を加えるファイルを全部バックアップして別のフォルダに保存しておく。
これから色々と手を入れるので、元に戻せるように。
②原因箇所を探るために、不必要な部分を全部削っていく。
これは絶対関係ないなって箇所を１つ削る→スマホでチェック→余白まだある→最初に戻る
を繰り返し、余白が消える場所を探す。
余白が消えたら、今消したコンテンツが原因。
他にも原因がある場所もあるので、これを繰り返して原因を潰していく。

自分のスタイルシート設定ではみだしてる箇所はなさそうな場合

例えば、スライドショーとか何らかのプラグインとか原因ではみ出てる場合もあります。
私は何度かスライドショーで苦戦したことがあります。

そういうのって、だいたいrelativeとかabsoluteとかになっているし、なんかもうプラグインのスタイルシート複雑なので触るの怖い・・・ってなりますよね。

なので自分のスタイルシートのほうで、スタイルを上書きしてみます、それで行けたらラッキーですが、状況によってはプラグインの動作に影響が出たり、うまく余白が消えないこともあります・・・ものすごい苦戦します。

最終手段

bodyの直下とか、だいたい大枠のdiv要素があると思います。なかったら作りましょう。

こう言う感じです。

そして、このwrapperに以下のようにスタイルを当てましょう。

#wrapper{
width:100%;
overflow-x: hidden !important;
}

だいたいこれでうまくいきます！！！

bodyとかhtmlにoverflow-x: hiddenは、やめておいた方が良いです

スクロールが、カックカクになることがあります。
するするする〜って動くはずが、カックカクです。