概要
多くの列を持つテーブル、または柔軟な測定単位ではなく固定の測定単位で作られたテーブルは、自然に幅広です — これはデスクトップ画面では問題ありませんが、よく作られたページの他のほとんどのコンテンツのように、はるかに狭い電話の画面に合わせて縮小することはありません。代わりに、ページ全体を横にスクロールさせるか、不快に圧縮されて読みにくくなります。
重要な理由
横スクロールは、電話で遭遇する中でも特に不快なものの1つです — ウェブの他のどこでも人々が期待する通常の上下スクロールパターンを破り、画面のすぐ右外にあるコンテンツを、そこにあることに気づかずに本当に見逃しやすくなります。他の点では完全にモバイルフレンドリーなページでも、1つの幅広でラップされていないテーブルが、モバイル訪問者にとって全体の体験を壊れているように感じさせる唯一の原因になり得ます。
修正方法
- サイト上のどのテーブルが多くの列を持っているか、または柔軟な幅ではなく固定ピクセル幅で作られているかを特定しましょう。
- 幅広の各テーブルをCSSプロパティ
overflow-x: autoを持つコンテナでラップしましょう — これによりテーブル自体のレイアウトは維持されますが、ページ全体がシフトするのではなく、訪問者が指のスワイプでそのテーブルだけを横にスクロールできるようになります。 - 列が多いテーブルについては、代わりにレスポンシブなテーブルパターンを検討しましょう — 例えば、すべてのサイズで従来のグリッドレイアウトを維持するのではなく、狭い画面では各行をそれぞれのラベル付きカードに積み重ねるなどです。
- ウェブサイトビルダーを使用している場合、カスタムの修正を構築する前に、そのテーブルブロックにすでに「モバイルスクロール」または「レスポンシブ」の切り替えがあるか確認しましょう。
- タッチスクロールはマウスとは異なる動作をするため、デスクトップブラウザウィンドウのサイズを変更するだけでなく、実際の狭い電話の画面(またはブラウザのモバイルプレビューモード)で修正をテストしましょう。