【スマホ対応サイト】レスポンシブで、スマホからアクセスしたときに横にずれる・ディスプレイ領域の外にはみ出る現象を直したい

今回は、スマホ対応や管理をしやすくするためにレスポンシブにしたはいいけど、『ずれる』みたいな問題が見つかったので、対処してみます。
レスポンシブでpc/sp同じhtmlを使うので、横のmarginが大きすぎる・一部の要素が横幅オーバーしていると予測できました。さっそく、どういう状況になっていたかをみてみましょう。

スマホで横にずれる・ディスプレイ領域の外にはみ出る現象とは？

管理人が以前制作した、コミックや映画・ドラマのブログです。WPフリープランにつき、スマホアクセス時は広告がでますが、この広告が曲者でした。スマホの横幅より大きいバナーが出てしまい（自分で貼ったものなら、タグもレスポンシブに切り替えたりできます）、スクロール時に右側に指が動いたときに、このようにずれてしまいます。こういう状況が、ネット上でもいくつか確認されました。

サイトを見れないというわけではないのですが、ずれるたび指でスライドさせていちいち直さなければならなく、ユーザーに余計な操作をさせてしまうのが難点です。

とはいえ、これに遭遇していたから、他の自分所有のサイトでにたような現象が起きたときに『バナー横幅がオーバーしてるんじゃないか？』というような予測ができるようになりました。次の段落では、管理人が遭遇した、この状況に対処してみます。

管理人が最近確認した、スマホレスポンシブが横にずれる原因（主に広告タグ）

原因はCSSやサイズ設定ミスなどいろいろあるようですが、ここでは管理人が自社運営サイトで遭遇した例を紹介いたします。原因がわかっていると、対処しやすくなります。主に、アドセンスなどの広告タグ古いバージョン・横幅オーバー・余計なマージンorパディングなどが原因となるようです。

例１：アドセンス広告タグ古いバージョンで、横幅がwidth:728pxになっていた

<ins class=”adsbygoogle”
style=”display:inline-block;width:728px;height:90px”
data-ad-client=”ca-pub-○○○”data-ad-slot=”○○○”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

上記のコードは、アドセンスの古いバージョンです。最近では自動広告やレスポンシブ広告が出ていますが、古いバージョンではバナーサイズが指定されています。
ＰＣビューのみで使用する場合は問題がありませんが、これが貼ってあるままだと、『スマホアクセス時にデバイスの横幅よりオーバーする』ので、その分横にずれるようになってしまいます。

対処方法としては『自動広告やレスポンシブ広告』、または『スマホでも表示できるサイズにする』などです。

例２：バナーや画像のサイズが大丈夫でも、マージンが余計だと横にずれる

<div style=”margin-left:90px;”>
<script type=”text/javascript”>
<!–google_ad_client = “ca-pub-○○○”;
/* .smartphone.footer */
google_ad_slot = “○○○”;
google_ad_width = 336;
google_ad_height = 280;//–>
</script>
</div>

サイズに336と書いてありますが、これ単体ではズレが発生しませんでした。しかし、管理人がmargin-left:90px;をつけてちょっとずらし、それをつけたままレスポンシブ化してしまったため、『マージンが加わって横幅オーバー → スクロール時に、横にずれる』という状況に。

対処は『このdivを単純にカット』『メディアクエリで、横幅が広いデバイスのときだけマージンが出るようにする』などがあります。

サイズオーバーしている要素発見のしかた・Chromeなどのデベロッパー・ツールを使う

横ズレには、横幅オーバーしている要素が関係していることがわかりましたが、心当たりが無い場合は、原因の発見が困難です。
その場合はF12キーを押して、ディベロッパーツールを立ち上げ、各要素を検証します。（管理人のブラウザはvivaldiです）この画像のように、各要素のサイズがどのようになっているかも確認できます。

開発者用ツールなので少しややこしいですが、細かく要素を検証していけば、原因究明できる可能性が高くなるので、ぜひこちらも使ってみてください。

あとがき・まとめ

まとめるとこのようなところでしょうか。特にスマホの横ずれが大きい＆何回も遭遇すると、読者もストレスがたまると思います（いちいち戻さなければないので）。要素の横幅やマージン（場合によってはpaddingなども）チェックしつつ、対応してみてください。