横に長い表のスクロール範囲を決める：本文を動かさず右端まで読む

比較表を載せたら、スマートフォンでは本文まで横へ動くようになった。横に長い表のスクロール範囲を決めるときは、ページの幅と、表が必要とする幅を分けます。文字を小さくして押し込む前に、表だけを動かして右端を読める状態を作りましょう。

題材は架空の教材セットの比較表です。HTMLの表とCSSのクラスを少し書ける人向けに、通常の一列の本文へ表を置きます。エディターとブラウザーを用意してください。列の固定や並べ替えは加えず、横に隠れた列へ到達することを完成条件にします。

本文は折り返し、比較に使う表は関係を残す

本文の一文は画面の幅で折り返せます。一方、「教材名・対象・所要時間・内容・準備物」を行ごとに比べる表は、すべての列を極端に狭めると、対応を追いにくくなる場合があります。今回は列の関係を残し、狭い画面では表の一部を横へ送って読む案を選びます。

W3Cのリフローの解説では、意味のために二次元の配置を必要とする表などを例外として扱っています。ただし、表の中の一つのセルまで折り返さなくてよい、という意味ではありません。説明文はセル内で折り返し、長い一行を強制しない構成にします。

二列の短い表なら、まず不要な固定幅や大きな余白を減らし、そのまま収まるかを試せます。情報を一件ずつ読むだけで比較しない内容なら、一覧へ組み替える案もあります。どんな表にも横スクロールを付けるのではなく、横に並べて比べる必要を先に判断してください。

幅を保つ表を、画面に収まる箱で囲む

表の外にdivを一つ置き、この箱へ横方向のはみ出しを扱うoverflow-x: autoを指定します。MDNのoverflowの説明で、autoは内容がはみ出した場合にスクロールできることを確認できます。

次をtable-scroll.htmlとして保存し、ブラウザーで開きます。これだけで使える練習用文書です。表の名前と見出しの基本は表に見出しを付ける記事を参照し、今回は表の外側の箱に注目してください。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>教材の比較｜横スクロールの練習</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 1rem; font-family: sans-serif; line-height: 1.7; }
    main { max-width: 64rem; margin-inline: auto; }
    .table-scroll { max-width: 100%; overflow-x: auto; }
    .table-scroll:focus-visible {
      outline: 3px solid #175ca4;
      outline-offset: 3px;
    }
    table { width: 100%; min-width: 48rem; border-collapse: collapse; }
    caption { text-align: left; font-weight: bold; padding-block: 0.5rem; }
    th, td { border: 1px solid #555; padding: 0.75rem; text-align: left; }
    th { background: #f1eee8; }
  </style>
</head>
<body>
  <main>
    <h1>教材セットを比べる（架空の練習例）</h1>
    <p>内容と準備物を見比べて、練習する教材を選びます。</p>
    <p id="scroll-help">表が収まらない場合は横へスクロールできます。
      キーボードでは表の枠へTabキーで移り、左右の矢印キーで動かします。</p>
    <div class="table-scroll" tabindex="0" role="region"
         aria-labelledby="table-name" aria-describedby="scroll-help">
      <table>
        <caption id="table-name">教材セットの比較</caption>
        <thead>
          <tr>
            <th scope="col">教材名</th><th scope="col">対象</th>
            <th scope="col">所要時間</th><th scope="col">内容</th>
            <th scope="col">準備物</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">紙の立体</th><td>初めての人</td>
            <td>30分程度</td><td>折り方による形の変化を比べる</td>
            <td>厚紙とはさみ</td>
          </tr>
          <tr>
            <th scope="row">糸の模様</th><td>編み方を試した人</td>
            <td>45分程度</td><td>二色の糸で模様の違いを作る</td>
            <td>二色の糸と台紙</td>
          </tr>
        </tbody>
      </table>
    </div>
    <p><a href="#notes">練習の補足へ</a></p>
    <section id="notes">
      <h2>練習の補足</h2>
      <p>掲載した教材、時間、準備物は説明用の設定です。</p>
    </section>
  </main>
</body>
</html>

48remは、この例で列を比較するための最小幅です。どの表にも必要な数値ではありません。tableはその幅を保ち、外の箱は本文の幅に収まります。箱の窓から見える範囲だけを動かす、と考えると二つの幅を区別できます。

高さは固定していないので、行や文章が増えれば下へ伸びます。幅390px程度では横送り、1280px程度では表全体が収まる状態を比べてください。スクロールバーを常に表示するかは環境で異なるため、バーの見た目だけで可否を判定しません。

ページ全体が動くなら、最小幅の置き場所を見る

最初の失敗は、min-width: 48remをtableではなく、外のtable-scrollへ付けることです。外側の箱まで画面より広くなるので、表専用の狭い窓を作れず、本文を含むページ全体が横へ動く原因になります。

修正では外側の最小幅を外し、tableへ戻します。幅390pxで、表を横に送っても、その上の説明文の左端が同じ場所に残ることを再確認してください。本文が動かないことと、表の最後の列を読めることを両方見ます。

Flexboxの横並びへ組み込んだ後だけ再発するなら、外側の要素が縮めるかも調べます。その問題はFlexboxの最小幅を確認する記事の範囲です。今回の一列の例へ不要な指定を増やさず、組み込んだ先の親子関係から原因を探します。

右端が読めない状態を、隠して解決しない

二つ目の失敗は、横へのはみ出しを消すためにoverflow-x: hiddenへ変えることです。見える範囲は収まっても、この例の右端にある準備物を利用者が横送りして読めなくなります。表の幅を削ったのではなく、見えない部分を切り取っているためです。

修正ではautoへ戻します。再確認は右端まで動かし、二行目の「二色の糸と台紙」を読めることです。その後左へ戻り、行の名前が「糸の模様」であることも照合します。横スクロールでは行名が画面外になることもあるため、行数や列数を増やす場合は比較を続けられるかを見直します。

本文や見出しまで大きなスクロール領域へ入れると、表を見る操作で読む場所を失いやすくなります。今回の箱に入れるのは表だけです。説明文と次のリンクを箱の外へ残して、スクロール範囲を目で確認できるようにします。

キーボードで入る場所と、出る場所を確かめる

マウスで動かせても、キーボードだけでは表へ移れない場合があります。例のtabindex="0"は、外の箱をTabキーによる移動先へ加える指定です。MDNのtabindexの説明にあるとおり、0なら文書に書いた順の移動に参加します。優先順位を作る正の数は付けません。

regionは名前のある領域として示す役割、aria-labelledbyはその名前に使う要素を指す属性です。ここではcaptionのidを参照します。aria-describedbyは操作の補足文へつなぎ、フォーカスが来た箱にはCSSで枠を表示します。

Tabで箱へ移り、左右キーで端まで送り、もう一度Tabを押して「練習の補足へ」に移れるかを試します。表へ入る確認だけで終えず、出られることも確かめましょう。読み上げを使う場合は名前と操作の伝わり方を実際に聞き、属性確認だけの結果と区別して記録します。

表の右端を読んでから、次のリンクへ進めるか

二行目の「内容」に一文を足し、狭い幅と広い幅で確認します。解答となる状態は、セル内の文章が折り返し、行の高さが増えても末尾まで残ることです。次の条件を確認表へ書いてください。

• 幅390pxで表を横へ送っても、前後の本文は画面内に収まり、左端が動かない。
• 右端まで送ると準備物の二行を読め、左端へ戻ると対応する教材名を確認できる。
• Tab、左右キー、Tabの順で、表へ入る・右端を読む・次のリンクへ出る操作ができる。
• 幅1280pxでは表全体が収まり、長くした内容の末尾も切れずに残る。

タッチ端末が使えるなら、表の上で横へ送った場合も確かめます。文字を拡大した状態は、通常の狭い画面とは別の条件として残してください。レスポンシブCSSの無料レッスンで幅の調整を練習する際も、画面全体が収まったかだけでなく、必要な情報へ最後まで届いたかを確認しましょう。