このワイヤーの特徴
PCでは見比べ、SPでは1件ずつ読める
PCでは行を並べて見比べやすく、SPでは横に並べると列が細くなって読めません。同じHTMLのまま、PCでは表、SPではカードとして表示を切り替えています。
SPでも、項目の意味が分かる
カードに組み替えるときに値だけを並べると、何の情報かが分からなくなります。各項目に列の見出しと同じラベルを付け、カードの中でも項目の意味が分かるようにしています。
カードの見出しで、どの対象か分かる
カードの最初に所在地が来ると、どの店舗の情報か分かりません。行の見出し（店舗名）をカードの見出しにし、下に線を引いて区切っています。
PCとSPで、内容がずれない
SP用に別のHTMLを用意すると、更新したときに片方だけ直し忘れることがあります。1つの表を見た目だけで切り替え、内容が1か所で管理できるようにしています。
制作時のよくある失敗
SP用に、別のHTMLを用意する
PC用とSP用で2つの表を持つと、更新のたびに両方を直す必要があり、内容がずれやすくなります。
1つの表の見た目を切り替えます。
ラベルを付けずに、値だけを並べる
「10:00〜20:00」だけでは、営業時間なのか受付時間なのかが分かりません。
項目ごとにラベルを付けます。
カード化で、表として読み上げられなくなる
表の表示を変えると、環境によっては表として読み上げられなくなることがあります。
読み上げで確かめ、必要なら role 属性で表の役割を補います。
カードの区切りが分かりにくい
カードの間の余白や線が少ないと、どこで1件が終わるのかが分かりません。
カードに枠を付け、間に余白をとります。
よくある質問
横スクロールとカード化は、どう使い分ければよいですか?
行どうしを横に見比べることが目的なら、先頭の列を固定して横にスクロールさせる形が向くと考えられます。
1件ずつ読むことが多い一覧なら、カード化のほうが読みやすくなります。
ラベルの文字は、どこに持たせればよいですか?
このワイヤーでは、各セルに列の見出しと同じ言葉を data 属性で持たせ、SPのときだけ表示しています。
疑似要素で表示した文字は、環境によって読み上げでの扱いが違うため、列の見出しは表の中に残しています。
何列以上あれば、カード化したほうがよいですか?
列の数より、SPで1つのセルが何行にも折り返すかどうかで判断するのが分かりやすいと考えられます。
住所や説明のように長い内容の列があるなら、列が少なくてもカード化を検討します。
