スマホ表示で画面が横スクロールする現象の原因と直し方

スマートフォン
4~5年前まではスマホ対応化しているサイトはまだ少なかったですが、2014年ぐらいにGoogleが「スマホ対応化されているウェブサイトをSEOの面で優遇する」と発表したため、2018年現在ではほとんどのサイトがスマホ対応化されている時代になりました。
事実、私自身もスマホから人のブログを見に行くことも多い。

そこで気になるのが、スマホ対応化されているウェブサイトの画面全体(ページ全体)が左右にブレる(横スクロールが発生する)現象である。
わかりやすく例を挙げると、以下のようなページが、
スマホ対応化されたページ

ページ下方向にスクロールさせようとすると、横にブレ(揺れ)てしまうケースである。
スワイプしたら横にブレる
ページ全体が左右にブレる
操作する側からすれば画面下方向へスクロールさせたいのに、左右にブレてしまうせいで下方向へのスクロールができないことがあったりする。
これはユーザービリティの面で非常に良くない。

実際にその操作性の悪さを体感していただくため、今ご覧になっているこのサイト内のこのページだけは横方向へブレるように設定してあります。お試しください。
このページ以外のページでは横方向にブレることはないため、スクロール操作がしやすいのではないかと思います。

iOSのSafariでは横方向から縦方向へスクロールを移行できない

どうもiOSのSafariの場合は、一瞬でも横方向のスクロール判定と認識されてしまうと、一度画面上から指を離さない限りは縦方向へスクロールできないようだ。(iOS12のiPhone SEにて検証)
縦スクロール不可
斜め方向のスクロールと判定された場合は、その後に上下にも左右にも移行できるようです。

これはとても不便な仕様である。
そのような仕様であるから、意図していない横スクロールが発生してしまうとそこから縦スクロールさせるためには画面から一度指を離す必要があり、なおさら操作性が悪いことになります。

AndroidのChromeの場合は横方向へスクロールした時もそのまま縦方向へ指を動かせば画面は縦方向へスクロールされるようなので、操作性の面ではいくらかマシと言えるでしょう。(Nexus7やNexus5Xにて検証)

ページが横にブレる原因

スマホ
さて、このような現象が起きる原因は何かと言うと「画面の横幅以上の横幅を設定された要素があるから」なのです。

ウェブサイトをスマホやタブレットで表示させるとき、画面に表示される横幅はそのデバイスごとに設定されている「CSSピクセル」の幅で決まります。

例えば私が使用しているiPhone SEでのCSSピクセルは320ピクセルになるので、以下の例のように画面に表示されている範囲の横幅は320ピクセルになります。(iPhone4sやiPhone5も320ピクセルです)
CSSピクセル
iPhone6~8sやiPhoneXは375ピクセル、iPhone6 Plus~8s Plusは414ピクセルらしい。
参考ページ:2017年9月最新スマホ解像度とDPR、CSSサイズ(window.innerWidth)、縦横比一覧 | IROIRO

つまりこのCSSピクセル以上の幅を持つ要素がページ内に存在すると、ページ(画面)が左右方向にブレる現象が発生してしまうのです。

サイト制作時によくありがちな気を付けるべき点

注意
実際のサイト制作の際にレスポンシブでスマホ対応化させる場合は、どのようなデバイス(端末)で表示させた時にも横幅いっぱいに表示できるようにwidth : 320px;というような絶対的な指定はせず、width : 100%;というように%での相対指定をするのが一般的だと思われます。

その中で特にありがちなのが、width : 100%;となっている要素に左右のpaddingも併記してしまうと横幅の合計は、

100% + 左右のpadding分

となり、横幅が親要素をはみ出してしまっているケースです。
そのような場合は左右のpadding分を差し引いた幅をwidthに設定するか、またはbody要素などに対し、

body {
  box-sizing : border-box;
}

と設定しておけば、paddingやborderの値がwidthに含まれるようになります。
つまり、昔のInternet Explorer 6のような仕様になるのです。(当時のこの仕様はただの不具合だけどね)

症状の直し方

ページ全体が横スクロールしてしまう原因がわかれば、その直し方は簡単です。
スマホ表示させた際に画面幅以上の要素があるかどうかを、ブラウザに付属している「開発ツール」のような機能を使って1つ1つ確認していけばよいだけである。(下の画像はFirefoxの開発ツールの画面)
開発ツール
これを表示させるにはメニュー項目から探しても良いですが、F12キーを押すと一発で出てきます。

もちろんChromeにも同様の機能があり、Chromeの場合は「デベロッパーツール」といいます。これもF12キーで出てきます。
デベロッパーツール

インターネットエクスプローラーの場合は「F12 開発者ツール」と呼ぶらしい。
F12キーを押すと上画像と同じようなウインドウが表示されて調査ができます。

このような開発者用のウインドウを表示させてページ内の要素を1つ1つ確認していくと、body要素(CSSピクセル)の幅を超える要素がどこかにきっと見つかるでしょう。
bodyの幅を超える要素その要素の幅をCSSピクセル内に収まるように修正すれば、ページが左右にブレなくなります。

サポートBBS

サポートBBS

サイト内を検索
アップデート情報

この「アップデート情報」欄はコンテンツ・メーカーを使用して更新・表示しています。

サイト運用事例
提供サポートなど
メールフォーム

ダウンロード一覧へ

カレンダー

これはビジネスカレンダーのサイト組み込みサンプルです。
サンプル管理画面から定休日の変更操作ができます。
ご自由にお試しください。(ユーザ名はtani、パスワードは0000です)

ダウンロード一覧へ

スレッド式BBS

ダウンロード一覧へ

レスポンシブBBS

ダウンロード一覧へ

新着情報欄の更新

ダウンロード一覧へ

その他おすすめ

ダウンロード一覧へ

Web制作のブログ

ブログ記事一覧へ

カテゴリ別