項目・値型 テーブル

通称：定義リストKey-value table (definition table)会社概要や商品の仕様のように、項目と値を2列で並べる表を指します。HTML の dl 要素の呼び名でもあります。

見本の中のメニューやボタンは押して動きを試せます（リンク先へは移動しません）。

会社概要やサービスの仕様のように、1つの対象についての情報を「項目名」と「内容」の2列で並べる表です。いちばん出番の多い形で、ほかの型の土台にもなります。

自分のサイトの中身で、この形を作らせる指示文です。最初の「サイトの情報」を書き換えてから渡します。今あるページを直させるときは、その HTML を貼ります。

この形で作る 
# サイトの情報（ここを書き換える）
- どんなサイトか：〈例：工務店のサイト、税理士事務所のサイト、ネットショップ〉
- 入れたい文言・項目：〈見出し・ボタンの文言・項目の数など。決まっていなければ空けてよい〉
- 今あるページ：〈今のページを直すなら、その HTML を貼る。新しく作るなら空ける〉

# 部品の呼び名
一般に「定義リスト」（Key-value table (definition table)）と呼ばれる部品です。会社概要や商品の仕様のように、項目と値を2列で並べる表を指します。HTML の dl 要素の呼び名でもあります。

# 作ってほしいもの
項目・値型の表（Key-value table）。会社概要のように、1つの対象の基本情報を「項目名｜内容」の2列で並べる。

# 並べるもの（上から1行ずつ）
- 表の名前を caption で付ける
- 項目名と内容を6行
- 内容が複数あるもの（事業内容）は、セルの中に箇条書き（ul）で入れる

# 守ってほしいこと
- table 要素で組み、項目名のセルは th scope="row" にする（読み上げで「どの項目の内容か」が伝わるように）
- 項目名の列は幅を固定して（PC で 180px 前後）、内容の列の左端をそろえる
- 項目名の列は薄い灰色の面、内容の列は白にして、色の差で2列を分ける。セルを1つずつ枠で囲まない
- 1行に1項目。「所在地・電話番号」のように2つの項目を1行にまとめない
- 行の区切りは横線だけ。表のいちばん上は少し太い線にする

# SP（画面幅 599px 以下）
- 2列をやめ、項目名を上、内容をその下に積む
- 項目名は灰色の帯、内容は白の面にして、どこからどこまでが1項目かわかるようにする

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 色は CSS 変数（--accent など）にまとめ、あとから変えやすくする
- 文言は「サイトの情報」に合わせて考える。決まっていないところは〈 〉で囲んだ仮の文言にする
- 「並べるもの」に書いた項目の名前（エリア・間取りなど）は一例。サイトに合うものに置き換える
- 今あるページを渡したときは、そのページの色・文字・余白に合わせ、変えた場所を最後に箇条書きで知らせる

表（テーブル）を11つの型に分け、AIへの指示文・動く見本・コードを載せています。

テーブルはどの型を選ぶか

表を作る前に、読み手がその表で何をしたいのかを決めます。1つのものを詳しく知りたいのか、いくつかを比べたいのか、たくさんの中から探したいのか、数字の大小を読みたいのか。目的が決まれば型はほぼ決まり、あとは行と列の数に合わせて SP での扱い（積む・カードにする・横にスクロールさせる）を選びます。

こんなとき 向いている型
会社概要・募集要項など、1つの対象の情報を並べる項目・値型
年度ごとの件数や売上を比べる数値表型
プランごとに、機能に対応しているかを比べる○×比較型
仕様の項目が多く、違いのある所だけを見たい差分強調型
条件を2つ選ぶと答えが決まるマトリクス型
曜日ごとの診療時間・営業時間を示す時間割型
件数の多い一覧を、日付や数で並べ替えて探す並び替え型
件数の多い一覧から、会場や種類の条件に合う行だけを残したい絞り込み型
一覧は要点だけにして、1件ごとの詳しい内容を必要なときに見せたい行を開く型
縦にも横にも長い集計表を見せる見出し固定型
列が多く、SP では1件ずつ読ませたいSPカード化型

SPカード化型と見出し固定型は「大きな表をどう見せるか」の型なので、数値表型や並び替え型に重ねて使えます。

どの型でも守ること

  1. 見出しのセルを th にする。列の見出しは scope="col"、行の見出しは scope="row" を付けます。読み上げソフトが、値と見出しを組にして読めるようになります。
  2. 表に名前を付ける。caption で「何の表か」を書きます。見出しを別に置くときは、aria-labelledby でつなぎます。
  3. 色だけで意味を伝えない。休み・対応の有無・増減は、文字や記号の形でも示し、色は補助にします。
  4. 数字は右ぞろえ、文字は左ぞろえ。数字の列は font-variant-numeric: tabular-nums で桁の幅をそろえ、単位は見出しにまとめます。
  5. SP の幅で必ず確かめる。表を縮小して文字が読めない大きさにせず、積む・カードにする・横にスクロールさせる、のどれかを選びます。

よくある質問 (FAQ)

表の形をしたデータにだけ使い、ページの並べ方には使いません。カードを横に並べる、画像と文を左右に置くといった配置は、CSS の grid や flex で組みます。table で組むと、読み上げソフトが「3行2列の表」と読み、SP で並べ替えるのも難しくなります。

行と行を見比べる表なら横スクロール、1行ずつ読む表ならカード化です。料金や仕様の比較表は、カードにすると見比べるために上下を行き来させることになります。求人や物件の一覧のように1件ずつ読まれるものは、カードの形が向いています。

見出しのセルに position: sticky と top: 0 を付けます。ただし、表が横スクロールの枠に入っていると、ページをスクロールしても見出しは残りません。sticky はいちばん近いスクロールする枠の中で効くためです。行の多い表は、高さを決めた枠の中で縦にもスクロールさせると、見出しと先頭の列を両方残せます。

記号の意味を表の上に書き、読み上げ用の文字を添えます。記号は aria-hidden="true" にして、visually-hidden で「対応」「対応していない」と書いておくと、読み上げソフトでも意味が伝わります。条件がつく △ を使ったマスには、注記でその条件を書いておきます。