×

スマホサイトでスワイプした時に意図せず画面が横にずれる5つの原因と解決策

2015年9月5日 コーディング

スマホスワイプ

ちょっと前にモバイルフレンドリー(スマホ対応している)がGoogleの検索結果に影響するようになり、かつレスポンシブデザインをGoogleが推奨しています。

これらの影響で、Web制作の人間はスマホ用にhtmlやCSSをコーディングすることがほぼ必須となりました。

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

※スワイプとはスマホの画面を一定方向(縦・横・斜め)にスッとなぞることを指します。

意図せずスマホの画面が横にずれてしまうよくある原因と解決策を紹介します。

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

要素の幅がデバイス画面サイズを超えてしまっている場合、画面のずれが発生します。
例えば、デバイスの最大幅が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はレスポンシブ広告などの用意があり、アフィリエイト広告などはモバイルに対応しているかどうかを念のためチェックしておきます。

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

長いURLや英文字が長い場合、画面幅の狭いスマホで見た時に改行されず画面外まで伸びて表示されている場合があります。
完璧にモバイル最適化されているはずなのに…という時に長いURLや英文字が記載されているのか、または改行されているかどうかを確認しましょう。

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

まとめ

いかがでしたか?

今となってはウェブサイトのモバイル最適化は必須となっています。
意図しない画面のずれが起こったときは当記事で挙げた原因を見て少しでも役にたてていただければと思います。

関連記事