コラム ／ 制作会社・広告会社向け
比較表の横スクロール実装｜スマホの見切れとキーボード操作を検証
比較表がスマホで見切れる例を再現し、表だけを横スクロールできるHTML/CSSへ修正します。見出しの対応、フォーカス表示、矢印キーとTabでの操作を確認する手順を示します。
商品仕様の比較表がスマホからはみ出すときは、ページ全体を横へ動かすのではなく、表だけをスクロールできる領域にします。文字を小さくして押し込まず、見出しとデータの関係、横へ動かせる案内、キーボードでの操作を一緒に確認することが大切です。
顧客の商品・展示備品の紹介ページを実装する制作会社様向けの例です。レスポンシブ表示の確認項目とは分け、表の見切れを再現してHTML/CSSを修正します。検証用データは架空で、顧客案件の実績ではありません。アイキャッチは生成イラストです。
比較が必要な表だけを横へ動かす
W3CのReflow解説では、一般の本文を320 CSS px相当の幅で読めることを求める一方、意味を保つために二次元の配置が必要なデータ表などを例外として説明しています。表なら何でも横長にしてよい、という意味ではありません。まず不要な列や長すぎるセルを減らします。
品名、幅、設置場所、相談時の確認事項を横断して比べる場合は、列同士の対応を残す意味があります。一方、各商品の説明を順に読むだけなら、商品ごとの見出しと箇条書きの方が読みやすい場合があります。顧客が何を比べるかを先に決めてから実装を選びます。
失敗例：はみ出した部分を隠す
.comparison { overflow: hidden; }
table { min-width: 680px; }この指定では、小さな画面で表の右側が隠れ、ポインターでも横へ移動できません。画面全体へoverflow-x:hiddenを付けて横揺れだけを止めても、読めないデータは戻りません。固定幅の表を残すなら、どの要素でスクロールを受け持つかを明示します。
修正例：表の外側に操作できる領域を作る
<div class="comparison-scroll" tabindex="0"
role="region" aria-label="展示備品比較表、横スクロールできます">
<table><!-- caption、th、tdを入れる --></table>
</div>
.comparison-scroll { max-width:100%; overflow-x:auto; }
.comparison-scroll:focus-visible {
outline:3px solid #735600; outline-offset:3px;
}tabindex=”0″は、その領域をTabキーの移動先へ加える指定です。MDNのoverflow解説は、スクロール領域をキーボードで操作するためのフォーカスと、領域の名前付けを説明しています。ブラウザーによる自動フォーカスの違いへ依存せず、対象環境でTab・左右矢印・次のリンクへの移動を確かめます。すべてのブロックへ無差別に付ける必要はありません。
実際の表にはcaptionで題名を付け、列見出しはth scope=”col”、行見出しはth scope=”row”で区別しました。名前付きの領域を付けても、セルと見出しの対応までは代わりに作れません。複雑に結合した表は、見出しの対応を別途設計します。
架空サンプルと確認結果
サンプルは「展示台A・幅900mm・屋内・搬入経路」と「案内台B・幅1200mm・屋内・電源位置」の2件、4列です。仕様が未確定の項目を空欄で隠さず、相談時に誰が確認するかを書きます。
2026年11月6日にmacOS上のCodex IABでHTML/CSSサンプルを確認しました。PC相当1280pxでは表領域900pxに全列が収まり、390pxでは領域342pxに対し表680px、左右矢印2回で80px移動しました。320pxでは領域272px、表680pxの右端まで約408px移動し、ページ幅は320pxのままでした。領域のフォーカス枠が表示され、Tabで次のリンクへ抜けられました。
ブラウザーの内部バージョンは取得できず未確認です。実機タッチ・スクリーンリーダーは未検証で、アクセシビリティ全体の適合を保証する試験ではありません。
| 品名 | 幅 | 設置 | 確認 |
|---|---|---|---|
| 展示台A | 900mm | 屋内 | 搬入経路 |
| 案内台B | 1200mm | 屋内 | 電源位置 |
制作の引き継ぎでは、読む条件を残す
表を受け取る時点で、比較したい列、長い品名や単位、未確定値、更新担当を共有してください。公開前は、狭い幅でもページ自体が横へはみ出さないか、表の右端へ到達できるか、フォーカスが見えるか、Tabで領域から抜けられるかを確認します。実機タッチや読み上げを試していない場合は、確認済みに含めません。
GreenCodingには、支給デザインの比較表実装、WordPress更新時の長い内容を含む表示調整、操作検証を相談できます。現在のURLと実際の列・代表データを添えて、コーディング・WordPressの実装支援をご覧ください。
公式参照情報
Web案件の進め方が未確定でも、
ご相談いただけます。
支給資料と現在決まっている範囲を確認し、必要な工程、役割分担、実装・検証範囲を整理します。
制作パートナー向けサービスを見る