スマホ対応の WordPress テーマや HTML テンプレートを使っていても、広告や表が画面からはみ出してしまったり、ぐらぐらと横揺れしてしまうことがありますよね。 レスポンシブ web デザインはそうならないように設計されていますが、HTML タグの使い方や CSS の指定によっては表示が崩れてしまいます。 よくある横揺れの原因と具体的な対策方法、一発で解消できる CSS コードを見ていきましょう。 スマホの横揺れがおきる原因 横揺れは、Web サイトの幅(≒ スマホの画面幅)より大きな要素があるときに発生します。 枠内におさまっているように見えても、はみ出している要素のぶんだけ横スクロールが発生してしまうわけです。 どの要素が飛び出しているか探るときは、以下の CSS を追加してみてください(色や太さはお好みで)。
![スマホサイトの横揺れ・横スクロール・見切れ・はみ出しの原因と対策 - Naifix](https://cdn-ak-scissors.b.st-hatena.com/image/square/c0fbd153f50a11a42c82d858bb91d5d35f4ffc60/height=288;version=1;width=512/https%3A%2F%2Fnaifix.com%2Fwp-content%2Fuploads%2F2016%2F10%2Fmobile-overflow-x.jpg)