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

更新: 2021/06/22 2383文字

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

あとがき・まとめ

  • レスポンシブでスマホ用サイトを組んだ時、スマホで横にずれることがある
  • 管理人の場合は、古いアドセンスコード(横幅指定&オーバー)と、広告ブロックの横マージンがスマホ時が効いていたことにより発生
  • 横幅オーバーしている要素を見つけたいときは、デベロッパーツールがわかりやすい

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

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


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

関連記事

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)
【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由
【ワードプレスstingerスマホ最適化】記事一覧タイトル表示場所をPC/SPで切り替えて、スマホレイアウトで見やすくする
【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装
WordPressのアーカイブって、記事が増えると長くてたいへん!CSSで短くして使いやすくするには?
【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介
bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】
【CSSで画像色合い調整やぼかしetc】 filterプロパティを使って、ぼかし・セピア・色調反転などをやってみる
サイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現
【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法
【CSS】letter-spacing(字間スペース)・line-height(行の高さ)を設定して、読みやすいデザインにする
【スマホ対応サイト】レスポンシブで、スマホからアクセスしたときに横にずれる・ディスプレイ領域の外にはみ出る現象を直したい