今回の症状と検証範囲
スマホではカードの右側が画面からはみ出し、内容を見るために横へ動かさなければならない状態を想定しました。実際のお客様のサイトを修正した事例ではありません。表示する案内と文章はすべて架空です。
この例ではカードの幅を固定したことだけを原因にします。比較用の枠の外にはみ出さないようにしているため、このページ自体は横にスクロールしません。
同じ案内カードで、修正前後を比較
案内の内容は両方とも同じです。修正前は幅が狭い画面で右側が隠れ、修正後は画面幅に合わせてカードが縮みます。
修正前
右側を見るには横へ動かす必要がある
この枠の中だけ左右にスクロールできます。Tabで枠へ移動し、矢印キーでも確認できます。
修正後
同じ内容が画面幅に収まる
カードの内容は修正前と同じです。幅の指定だけを変えています。
原因はカードの固定幅
修正前のカードは幅を360pxに固定しています。カードを表示できる場所がそれより狭いと、右側が枠からはみ出します。ここでは画面全体ではなく、上の比較枠の中だけで症状を再現しています。
画面幅に合わせる修正
修正後は、広い画面ではカードの最大幅を360pxに保ち、狭い画面では使える幅を超えないようにしました。文章や色、案内の内容は変えていません。
修正後に確認すること
- PCでは同じ案内カードを並べて比較できること。
- 狭い画面では比較枠が縦に並び、ページ全体には横スクロールが出ないこと。
- 修正前の枠はキーボードで選べて、その枠内だけを左右に動かせること。
- 修正後のカードは右端まで読めること。
実際のサイトでは別の原因で表示がはみ出すこともあります。このデモだけで、その原因や修正方法を決められるわけではありません。実サイトの調査や実機スマホでの動作確認も、この合成例には含みません。