料金表・比較表をスマホで読みやすくする｜3つの方法を幅375pxで実測

1. 何も指定しないと、ページ全体が広がる

測定に使ったのは、プラン・初年度・翌年・容量・独自ドメインの5列、3行の料金表です。各列の最小の幅を110pxにして、幅375pxの画面に置くと、表の幅は636pxになり、ページ全体の幅は652pxに広がりました（左右の余白16pxを含む）。画面の幅が320pxでも、結果は同じでした。ページ全体が横にずれる原因は、スマホで横にはみ出す原因と直し方に整理しています。

2. 3つの方法を測る

測定はChrome 152（macOS）です。

B 表を枠で包む

表そのものは変えず、外側の枠の中だけを横にスクロールさせます。行と列の関係が変わらず、比較表に向きます。

<div class="scroll" role="region" tabindex="0" aria-label="料金表（横にスクロールできます）">
  <table>…</table>
</div>

.scroll { overflow: auto; max-width: 100%; }

MDNは、スクロールできる領域が、キーボードだけでは操作できないブラウザがあると説明しています。対策として、tabindex="0"で、枠にキーボードのフォーカスを当てられるようにし、role="region"と、aria-labelなどの名前を付けることを勧めています。上のコードはその形です。この手帖の比較表も、この方法で作っています。

C 各行を縦に積む

1行を1枚のカードのように、項目名と値を縦に並べます。横にスクロールする必要がなく、読むのは楽になります。一方、表の高さは705pxで、方法Bの約4倍でした。行が多い表では、ページが長くなりすぎます。

<td data-label="初年度">12,000円</td>

td { display: grid; grid-template-columns: 7em 1fr; }
td::before { content: attr(data-label); font-weight: 600; }
thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

表の部品にdisplay:gridなどを指定すると、読み上げの機器で、表として扱われなくなる場合があります。この方法を使うときは、実際の読み上げで、行と項目の関係が伝わるかを確かめます。

D 狭い画面では列を隠す

比較の優先度が低い列を、画面の幅に応じて隠します。表の高さは変わらず、横にもはみ出しません。ただし、隠した列の情報は、スマホでは見られません。隠してよい列かどうかを、先に決めておきます。

@media (max-width: 480px) {
  th:nth-child(3), td:nth-child(3),
  th:nth-child(4), td:nth-child(4) { display: none; }
}

3. どれを使うか

迷うときは、方法Bから始めます。表の中身を変えず、スマホでも情報が失われないためです。

4. 表のマークアップは、直す前に整える

MDNは、表に<caption>で内容の説明を付け、見出しのセルには<th>にscope="col"やscope="row"を付けるよう案内しています。読み上げの機器は、この見出しを使って、セルと見出しを結び付けます。表示の方法を変える前に、表の構造が整っているかを確認します。

<table>
  <caption>プラン別の料金</caption>
  <thead>
    <tr><th scope="col">プラン</th><th scope="col">初年度</th>…</tr>
  </thead>
  <tbody>
    <tr><th scope="row">ライト</th><td>12,000円</td>…</tr>
  </tbody>
</table>

直したら、幅320px・375px・414pxで、表が読めるか、キーボードのTabキーで枠に入れるかを確認します。チェックリストの表示と操作の項目にも書き込めます。