webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

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

      2021/03/04

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

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

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

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

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

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

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

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

例1:アドセンス広告タグ古いバージョンで、横幅が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>

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

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

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

<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なども)チェックしつつ、対応してみてください。


【カテゴリ】 - CSS
【タグ】 -

  関連記事

CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】

今回は、管理人がリメイクしていたサイトで、『CSSだけでクリック ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【CSSエディット】『&nbsp;』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装

今回は、当サイトでもよく取り上げているCSSを使ったアニメーショ ...

【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)

今回は、一般的には『クソ重い』とされる、スライダー・スライドショ ...

【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装

今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニュ ...