HTML captionタグ：表のタイトルと上下の表示位置
HTML <caption> は表全体のタイトルまたは短い説明を提供します。これを table 内の最初の子要素として配置し、CSS caption-side を使用して表の上または下に表示するかを制御します。
表のタイトルを列および行のヘッダーと区別する
captionは表全体の主題を説明し、thは特定の列や行の見出しを示します。captionの代わりに表の最初の行のtdへタイトルを書くと、表タイトルとデータセルの関係が変わります。「表1」だけではなく対象と範囲を具体的に書き、表をざっと読む場合や支援技術で移動する場合にも目的が分かるようにします。
tableごとにcaptionは1つだけ使用してください。表のタイトルを複数のcaption要素に分けるのではなく、長い解釈、注意事項、またはデータソースは近くのテキストに追加してください。
完全な例: キャプションの位置を確認する
コードをtable-caption.htmlとして保存し、ブラウザーで開きます。数字は表構造を説明するために使用される練習データです。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表のタイトルの配置</title>
<style>
body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
.jb-table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.6rem; border: 1px solid #8c9399; text-align: left; }
caption { caption-side: top; text-align: left; padding: 0.6rem 0; font-weight: bold; }
</style>
</head>
<body>
<h1>練習用データ</h1>
<div class="jb-table-scroll">
<table class="jb-table-01">
<caption>練習用資料の分類別サンプル文書数</caption>
<thead>
<tr><th scope="col">分類</th><th scope="col">文書数</th></tr>
</thead>
<tbody>
<tr><th scope="row">HTML</th><td>3</td></tr>
<tr><th scope="row">CSS</th><td>2</td></tr>
</tbody>
</table>
</div>
</body>
</html>表の上にキャプション練習用資料の分類別サンプル文書数が表示され、その後に分類および文書数の列と2つのデータ行が続きます。captionは表の目的を説明し、th要素とscopeは列および行のヘッダーを特定します。
CSS caption-side: topをcaption-side: bottomに変更してページをリロードします。タイトルは表の下に移動しますが、HTMLでは依然として最初の子要素として残ります。元の位置を復元するには、topに戻します。水平位置合わせには廃止されたalign属性の代わりにtext-alignを使用してください。
役立つ表のキャプションを書く
caption は可視のタイトルであり、テーブルのアクセシブルな名前を提供するのに役立ちます。実際のスクリーンリーダーの動作は、ブラウザ、支援技術、およびその他のアクセシビリティ属性によって異なります。キャプションを追加するだけでは、複雑なテーブルのすべてのアクセシビリティ問題が解決するわけではありません。ヘッダーとデータセルの関係や読み順も確認してください。
tableに設定した背景色はcaptionに自動適用されないため、必要ならcaptionにも背景色を指定します。figureの中身が表だけの場合は、同じタイトルをcaptionとfigcaptionで重複させず、figureの説明にfigcaptionを使用します。規則と例はMDNのcaption要素リファレンスで確認できます。
