概要
CSS(ページの見た目を制御するスタイルコード)は、要素をピクセルのような固定単位(例えば、正確に800ピクセル幅に設定されたボックス)、またはパーセンテージのような相対的で柔軟な単位でサイズ設定できます。後者はページが表示されるどんな画面にも自動的に適応します。「固定幅要素」とは、柔軟な値ではなく、これらの固定ピクセル値の1つでサイズ設定されたページの一部(画像、テーブル、コンテナボックスなど)のことです。
これは画面がその固定値より広い限り問題なく機能しますが、実際の画面(特に電話)が要素の固定幅より狭くなった瞬間、ブラウザはそれに対応するためにページを横にスクロールさせる以外の選択肢がありません。明示的に設定されたサイズより要素を縮小することができないためです。
重要な理由
水平スクロールは、電話で遭遇する最も不快で紛れもないモバイルレイアウトの崩れの兆候の1つです。通常に読むためだけに訪問者を2方向に同時にスクロールさせ、モバイル訪問者がどこでも期待する上下スクロールとはまったく異なる、より苛立たしい閲覧パターンを強制するからです。通常、ページのどこかに1つの大きすぎる要素(幅広の画像、埋め込まれたテーブル、固定幅のボックス)があるだけで、その1つの要素の周辺だけでなくページ全体にこの動作を強制するのに十分です。
これはしばしば、最初にデスクトップ用に設計されたコンテンツの名残です — スプレッドシートからコピーされたテーブル、または元の非圧縮ピクセル寸法で挿入された画像など — サイト全体のデザインの根本的な欠陥ではありません。
修正方法
- 電話(または狭いブラウザウィンドウ)でサイトを開き、ページ全体が横にスクロールするかどうか、または始まる特定のセクションを確認しましょう。
- オーバーフローを引き起こしている特定の要素を探しましょう — 多くの場合、幅広の画像、埋め込まれたテーブル、またはスタイルで明示的にピクセル幅が設定されたボックスです。
- 固定ピクセル幅を、パーセンテージのような相対単位に置き換えるか、要素が画面の実際の幅を決して超えないように
max-width: 100%ルールを追加しましょう。 - 特に幅広のテーブルについては、ページ全体を横にスクロールさせるのではなく、そのテーブル1つに限定したスクロール可能なコンテナにラップすることを検討しましょう。
- 各変更後に電話で再確認し、水平スクロールがなくなったことを確認しましょう。