【WEB制作者向け】スマホサイトで画面がずれる6つの原因と対処法
この記事の概要
Web制作者
スマホサイトが意図せず横に動いてしまう。ズレ解消のためにCSSの修正方法を知りたい。
管理人
スマホサイトのズレについて、5つの原因を挙げてみます。詳しい対処法は後述しますね。
本記事の内容
- スマホサイトで画面がずれる5つの原因
- スマホサイトで画面がずれるときの対処法
スマホ用にコーディングをしていると（もしくは普通にサイトを見ている時）、一見モバイルフレンドリーになっているようで、画面を指でスワイプしてみると画面が横にずれてしまうことがあります。
【参考】Googleレスポンシブデザイン
Web制作者からすると、ちゃんと正しくCSSを書いているはずなのに意図せずずれてしまっていると面倒ですよね。
Web制作者向けに、スマホサイトの画面が横にずれる原因とその解決策を詳しく説明します。
スマホサイトがずれる原因
- 要素の幅がデバイスの大きさを超えている
- 画像のサイズが最適化されてない
- 余計なマージン、パディング、ボーダーが入っている
- adsenseやアフィリエイト広告の大きさがスマホサイズに合っていない
- 長いURLや英文字が改行されていない場合
要素の幅がデバイスの大きさを超えている
要素の幅がデバイス画面サイズを超えてしまっている場合、画面のずれが発生します。
例えば、デバイスの最大幅が320px(iphone5系)だとして、実際に指定している要素の幅を、デバイスの最大幅を超える500pxにしていると画面の外にまで要素が飛び出して結果的に画面がずれてしまいます。
対処法
画像のサイズが最適化されてない
先述の要素の幅がデバイスの大きさを超えている時と同じように、画像の横幅がデバイスの最大幅を超えた場合に画面がずれます。
対処法
余計なマージン、パディング、ボーダーが入っている
「要素の幅、画像の幅も最適化して完璧！」と思ってスマホをスワイプしてみると若干ずれが生じることは少なくありません。
こういった時は要素・画像にマージン（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に対して、marginやpaddingが意図せず指定されてしまっていることが考えられます。
広告内のHTMLの例
<ins>タグ<iframe>タグ<img>タグ
対処法
marginやpaddingを上書き指定する方法があります。
長いURLや英文字が改行されていない場合
長いURLや英文字が長い場合、画面幅の狭いスマホで見た時に改行されず画面外まで伸びて表示されている場合があります。
完璧にモバイル最適化されているはずなのに…という時に長いURLや英文字が記載されているのか、または改行されているかどうかを確認しましょう。
対処法
まとめ
レスポンシブ設定対応しているのにもかかわらず、意図しない画面のずれが起こったときは当記事で挙げた原因を見て少しでも役にたてていただければと思います。