Webサイトにおけるデータ表示の際、表（テーブル）は情報を整理して伝えるための強力なツールとなります。
特にアクセシビリティやSEOを意識したコーディングを行う場合、その表が何を示しているのかを正しく定義することが求められます。
HTMLで表にタイトルを付ける際に最も適切で標準的な方法が、<caption>タグの使用です。
この記事では、<caption>タグの基本的な使い方から、アクセシビリティを向上させるためのポイント、さらにはCSSを用いたスタイリング方法について詳しく紹介します。
正しくタイトルを設定することで、ユーザーにとっても検索エンジンにとっても理解しやすいコンテンツ制作を目指しましょう。
captionタグの役割と基本仕様
<caption>タグは、HTMLの<table>要素に対してタイトルや説明文を付与するための専用タグです。
このタグを使用することで、表の内容を一言で表す見出しを提供し、文書の構造を明確にすることができます。
HTMLの仕様上、<caption>タグは必ず<table>タグの開始直後に配置しなければなりません。
他の要素、例えば<thead>や<tr>の後に記述することは認められていないため、注意が必要です。
また、一つのテーブルに対して使用できる<caption>タグは一つだけです。
複数のタイトルを付けたい場合でも、一つのタグ内にまとめるか、別の構造を検討する必要があります。
基本的な記述例
まずは、最も標準的な<caption>タグの使用例を見てみましょう。
<table>
<!-- tableタグの直後にcaptionを配置 -->
<caption>2026年度 第1四半期 売上実績表</caption>
<thead>
<tr>
<th>月</th>
<th>売上高</th>
</tr>
</thead>
<tbody>
<tr>
<td>4月</td>
<td>1,200,000円</td>
</tr>
</tbody>
</table>このコードを実行すると、ブラウザのデフォルト設定では表の上部中央にタイトルが表示されます。
[ 2026年度 第1四半期 売上実績表 ]
-------------------
| 月 | 売上高 |
-------------------
| 4月 | 1,200,000円 |
-------------------アクセシビリティの向上とcaptionタグ
<caption>タグを使用する最大のメリットの一つは、アクセシビリティの向上にあります。
視覚障害を持つユーザーがスクリーンリーダー（音声読み上げソフト）を使用する場合、表に遭遇するとまずこの<caption>の内容が読み上げられます。
これにより、ユーザーは表の中身をすべて確認する前に、そのデータが自分にとって必要かどうかを判断できます。
もし<caption>を使わずに、表の直前に<p>タグや<h2>タグでタイトルを記述した場合、それらは表の一部として認識されません。
スクリーンリーダーの機能によっては、表の一覧をナビゲートする際に見出しをスキップしてしまう可能性があります。
セマンティックなマークアップを行うことは、現代のWeb標準において不可欠な要素です。
SEOへの影響
検索エンジンのクローラーも、<caption>タグの内容をその表の重要な要約として認識します。
表に含まれるデータが検索キーワードに関連している場合、正しくタイトルが設定されていることでコンテンツの評価が高まる期待が持てます。
キーワードを不自然に詰め込むのではなく、ユーザーにとって分かりやすい説明を記述することがSEOの観点からも推奨されます。
CSSによるcaptionのスタイリング
デフォルトでは<caption>は表の上部に配置されますが、デザインの都合上、下部に配置したい場合もあります。
そのような場合には、CSSのcaption-sideプロパティを使用します。
caption-sideプロパティの使い方
caption-sideプロパティには、主にtop（上部）とbottom（下部）の2つの値が指定可能です。
/* 表の下部にタイトルを表示する設定 */
table {
border-collapse: collapse;
width: 100%;
}
caption {
caption-side: bottom; /* 下側に配置 */
padding: 10px;
font-weight: bold;
color: #333;
text-align: right; /* 右寄せにする */
}
この設定を行うことで、HTMLの構造（<table>の直後に記述するルール）を維持したまま、見た目だけを自由に変更できます。
アクセシビリティを保ちつつデザインの柔軟性を確保できる点が、この手法の大きな利点です。
配置のカスタマイズ
タイルのテキスト配置を調整したい場合は、text-alignプロパティを併用します。
左寄せにしたい場合はtext-align: left;、中央揃えを維持したい場合はtext-align: center;を指定します。
また、表の横幅とタイトルの横幅を合わせる際、ブラウザによっては<caption>が表の幅を超えて広がってしまうことがあります。
その場合は、display: table-caption;という初期値を意識しつつ、マージンやパディングを適切に設定してください。
figure要素とfigcaptionタグとの使い分け
HTMLには表や図に説明を付ける別の方法として、<figure>タグと<figcaption>タグの組み合わせがあります。
これらは<caption>タグとどのように使い分けるべきでしょうか。
構造の違い
<caption>は表（<table>）の一部として、その表自体に名前を付けるためのものです。
一方で、<figcaption>は自己完結したコンテンツ（写真、イラスト、コード、表など）に対する注釈として機能します。
表を一つの図表として独立させ、本文から切り離して参照されるような形式にする場合は、<figure>でラップするのが適切です。
コードの比較
<!-- figureを使用したパターン -->
<figure>
<figcaption>図1：主要ブラウザのシェア推移</figcaption>
<table>
<!-- ここにはcaptionを記述しないか、あるいは両方記述する -->
<thead>...</thead>
<tbody>...</tbody>
</table>
</figure>
一般的には、単純な表のタイトルであれば<caption>を使い、より複雑なドキュメント構造の中で「図番号」などを振る必要がある場合は<figure>を選択します。
両方を併用することも可能ですが、情報の重複に注意し、どちらが主要な見出しとして機能するかを整理しておくことが望ましいです。
実務で役立つcaption運用の注意点
実務で<caption>タグを運用する際には、いくつかの注意点があります。
まず一つ目は、タイトルの長さです。
<caption>はあくまで見出しであるため、あまりに長い文章を詰め込むのは避けるべきです。
詳細な注釈が必要な場合は、表の下に<p>タグなどで別途補足情報を記載するか、aria-describedby属性を使用して説明文と紐付けるのがベストプラクティスです。
レスポンシブデザインへの対応
スマートフォンなどの小さな画面では、表が横スクロール（overflow-x: auto;）されることがよくあります。
このとき、<caption>タグはデフォルトで表の幅に追従しますが、スタイルによっては画面外に突き出たり、逆に不自然に折り返されたりすることがあります。
レスポンシブ対応を行う際は、タイトルが常に画面内に収まり、読みやすい状態を保てているか確認しましょう。
CSSでwhite-space: normal;を指定し、長いタイトルが適切に改行されるようにしておくことも大切です。
複雑な表におけるアクセシビリティ補足
非常に複雑なデータテーブルの場合、<caption>だけでは不十分なケースがあります。
例えば、行見出しと列見出しが多重に重なっているような表です。
その場合は、<caption>に加えてsummary属性（現在は非推奨ですが、代わりの手法があります）の代わりに、aria-labelやaria-labelledbyを活用することが検討されます。
しかし、まずは基本である<caption>を正しくマークアップすることが、アクセシブルなWebサイト制作の第一歩となります。
まとめ
HTMLの<caption>タグは、表にタイトルを付けるためのシンプルかつ強力な要素です。
<table>タグの直後に記述するというルールを守ることで、スクリーンリーダーや検索エンジンに対して正しい構造を伝えることができます。
見た目の位置を調整したい場合には、CSSのcaption-sideプロパティを活用して、デザインと構造を分離させましょう。
ユーザーが情報を素早く理解できるよう、簡潔で分かりやすいタイトルを付ける習慣を身につけることが、質の高いWebサイト作成に繋がります。
今回紹介したポイントを参考に、ぜひ日々のコーディングで<caption>タグを正しく活用してみてください。