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

      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
【タグ】 -

  関連記事

【スマホ対応サイト】レスポンシブで、スマホからアクセスしたときに横にずれる・ディスプレイ領域の外にはみ出る現象を直したい
bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】
bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える
wordpressの仕組み~ヘッダーに入ってくるCSSは、どのように出力されるか(wp_headにcustomize_cssをadd_action)
【CSSで画像色合い調整やぼかしetc】 filterプロパティを使って、ぼかし・セピア・色調反転などをやってみる
【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)
スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)
CSSのみで超軽量な、クリック開閉式ボックスのつくりかた【FAQやよくある質問に・jQuery/javascript不使用】
ヘッダー・見出しを、『片方だけ丸い・台形・矢印』などおしゃれデザインにできるCSS
有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)
【WordPressテーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど
【ワードプレスstingerスマホ最適化】記事一覧タイトル表示場所をPC/SPで切り替えて、スマホレイアウトで見やすくする