【WEB制作者向け】スマホサイトで画面がずれる6つの原因と対処法

Programming Web

スマホサイトの画面がずれて困っているWeb制作者
「スマホサイトが意図せず横に動いてしまう」
「ズレ解消のためにCSSの修正方法を知りたい」

こういった疑問にお答えします。

本記事の内容

  • スマホサイトで画面がずれる5つの原因
  • スマホサイトで画面がずれるときの対処法

こんにちは、mineです。
Web制作歴は7年になります。

スマホ用にコーディングをしていると(もしくは普通にサイトを見ている時)、一見モバイルフレンドリーになっているようで、画面を指でスワイプしてみると画面が横にずれてしまうことがあります。

モバイルフレンドリーがGoogleの検索結果に影響するのは既に周知の事実で、Googleもレスポンシブデザインを推奨しています。
【参考】Googleレスポンシブデザイン

Web制作者からすると、ちゃんと正しくCSSを書いているはずなのに意図せずずれてしまっていると面倒ですよね。

Web制作者向けに、スマホサイトの画面が横にずれる原因とその解決策を詳しく説明します。

スマホサイトがずれる原因

  • 要素の幅がデバイスの大きさを超えている
  • 画像のサイズが最適化されてない
  • 余計なマージン、パディング、ボーダーが入っている
  • adsenseやアフィリエイト広告の大きさがスマホサイズに合っていない
  • 長いURLや英文字が改行されていない場合

要素の幅がデバイスの大きさを超えている

スマホ

要素の幅がデバイス画面サイズを超えてしまっている場合、画面のずれが発生します。

例えば、デバイスの最大幅が320px(iphone5系)だとして、実際に指定している要素の幅を、デバイスの最大幅を超える500pxにしていると画面の外にまで要素が飛び出して結果的に画面がずれてしまいます。

対処法

CSSでbodyの幅を100%に指定して(デバイスの幅に合わせる)、body内の要素については、幅の長さはpxで指定せずに%で指定するようにして画面内に要素を収めます。

画像のサイズが最適化されてない

スマホ

先述の要素の幅がデバイスの大きさを超えている時と同じように、画像の横幅がデバイスの最大幅を超えた場合に画面がずれます。

対処法

デバイスの最大幅を超えている画像(imgタグ)に対してCSSでwidthを100%以下で指定します。

余計なマージン、パディング、ボーダーが入っている

スマホ

「要素の幅、画像の幅も最適化して完璧!」と思ってスマホをスワイプしてみると若干ずれが生じることは少なくありません。

こういった時は要素・画像にマージン(margin)やパディング(padding)、ボーダー(border)が指定されている(※)可能性があります。

※要素の幅を画面幅に合わせてwidth:100%;としている場合などにマージン、パディング、ボーダーを指定した分が画面からはみ出してしまうことがあります。
これはCSSのボックスモデルが原因であり、通常内側から外側に向かってcontent(内容)、padding、border、marginの順番で成り立っています。

例えばとあるdiv要素をwidth:100%;で指定したとするとcontentの部分が100%で指定されているに過ぎず、padding、border、marginに関してはwidth:100%;に含まれません。

対処法

まず画面内に収まるように、幅を調整したり、マージン、パディング、ボーダーを調整したりします。
また、CSSでbox-sizingプロパティを使用して、box-sizing:border-box;と指定すると幅指定の際にborderまでを含めてくれるので、幅指定の計算が楽になります。

Adsenseやアフィリエイト広告のサイズが大きすぎる

スマホ

収益を目的として、GoogleAdSense(グーグルアドセンス)やアフィリエイト広告を掲載する場合があります。

本来ならスマホ対応は完璧なのに、Adsenseやアフィリエイト広告がスマホ最適化されていないがために画面からはみ出てしまうということがあります。

対処法

スマホ用に広告画像を最適化して広告のコードを発行してくれる場合が多いので、スマホ対応している広告を掲載します。
Adsenseはレスポンシブ広告などの用意があり、アフィリエイト広告などはスマホ対応しているかどうかを念のためチェックしておきます。

Adsenseなどの広告のHTMLに余分なmarginやpaddingが指定されている

表示される広告のサイズもちゃんと収まっているはずなのになぜかスマホからはみ出てしまうことがあります。

可能性として、広告のHTMLに対して、marginpaddingが意図せず指定されてしまっていることが考えられます。

広告内のHTMLの例

  • <ins>タグ
  • <iframe>タグ
  • <img>タグ

対処法

上記の「広告内のHTMLの例」にあるようなタグに対して、marginpaddingを上書き指定する方法があります。

長いURLや英文字が改行されていない場合

長いURLや英文字が長い場合、画面幅の狭いスマホで見た時に改行されず画面外まで伸びて表示されている場合があります。

完璧にモバイル最適化されているはずなのに…という時に長いURLや英文字が記載されているのか、または改行されているかどうかを確認しましょう。

対処法

長いURLや英文字の要素に対して、CSSでword-wrapプロパティを使用してword-wrap:break-wordを使用すれば、画面をはみ出さずに改行して収めてくれます。

まとめ

レスポンシブ設定対応しているのにもかかわらず、意図しない画面のずれが起こったときは当記事で挙げた原因を見て少しでも役にたてていただければと思います。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 YouTubeライブで気をつけるべきチャットへのコメントマナーまとめ

おすすめ記事 お名前.comのドメインプロテクションは必要か【採算がとれるか】