HTMLのcaptionタグの使い方！表にタイトル・説明をつける

html

HTMLのcaptionタグについて書いています。

captionタグは、<table>要素（表）にタイトルや説明を付けるために使用されます。
このタグは、表の内容が何であるかを簡潔に伝え、ユーザー、特にスクリーンリーダーを使用するユーザーが表の目的を素早く理解するのに役立つ、非常に重要なセマンティック要素です。

captionタグの基本的な使い方と配置

captionタグは、<table> タグの直後に記述します。
これは、表の最初の子要素でなければなりません。captionタグで囲まれたテキストが、表のタイトルとして表示されます。

<table>
  <caption>2025年上半期 売上実績</caption>
  <thead>
    <tr>
      <th>月</th>
      <th>製品A</th>
      <th>製品B</th>
      <th>合計</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1月</td>
      <td>100</td>
      <td>150</td>
      <td>250</td>
    </tr>
    <tr>
      <td>2月</td>
      <td>120</td>
      <td>180</td>
      <td>300</td>
    </tr>
  </tbody>
</table>

上記のHTMLは、ブラウザで以下のように表示されます。(Chromeのデフォルト)
通常、キャプションは表の上に中央揃えで表示されます。
captionタグが表の上部に中央揃えで表示された例（売上実績表）

captionタグの意味合いと重要性

captionタグは、囲まれたコンテンツが表の内容を説明するタイトルであることを示す意味合い（セマンティクス）を持っています。

これは、単に見た目を表のタイトルにする目的ではなく、表の目的や内容を明確にします。
そして、特にスクリーンリーダーなどの支援技術が表を読み上げる際に、まずキャプションを読み上げることで、ユーザーが表の全体像を把握できるようにするために重要です。

captionタグとアクセシビリティ

captionタグを適切に使用することは、Webサイトのアクセシビリティ向上に不可欠です。

  • スクリーンリーダーのサポート: スクリーンリーダーは、表にアクセスした際にまずcaptionタグの内容を読み上げます。これにより、視覚障碍のあるユーザーは、表の複雑な内容を読み始める前に、その表が何に関するものかを理解できます。これは、表のナビゲーションにおいて非常に重要なヒントとなります。
  • 文脈の提供: キャプションは、表の文脈を簡潔に提供するため、すべてのユーザーが表の内容をより効率的に理解するのに役立ちます。

captionタグにスタイルを適用する

captionタグのデフォルトのスタイル（中央揃え、表の上に表示）は、CSS で上書きしたり、さらに他のスタイルを追加したりすることができます。
caption-sideプロパティを使うと、キャプションを表の上下に配置できます。

table {
  width: 80%;
  border-collapse: collapse;
  margin: 20px auto; /* 表を中央寄せ */
}

caption {
  font-size: 1.2em;
  font-weight: bold;
  padding: 10px;
  background-color: #f2f2f2;
  color: #333;
  caption-side: top; /* キャプションを上部に表示（デフォルト） */
  /* caption-side: bottom; */ /* キャプションを下部に表示 */
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #e0e0e0;
}

上記のCSSを適用することで、キャプションのフォントサイズや背景色、位置などをカスタマイズし、表全体の見た目を改善できます。
最初のテーブルに、こちらのスタイルを適用すると、下記のように見やすくなりました。
HTMLのcaptionタグにスタイルを適用する

captionタグを使用する際の注意点

  • <table>の直後に記述する: captionタグは、必ず<table>タグの直後、他の<thead>や<tbody>、<tr>などの要素の前に記述する必要があります。
  • 1つの<table>につき1つの<caption>: 各<table>要素には、1つだけ<caption>要素が存在するべきです。
  • 簡潔で分かりやすい内容: キャプションは、表の内容を簡潔かつ明確に説明するテキストであるべきです。長文にならないようにしましょう。
  • 装飾目的でインデントしない: <caption>タグは、表のタイトルとしての意味合いを持っています。単にテキストを中央揃えにしたり、インデントしたりするためだけの装飾目的で使用するべきではありません。
  • CSSでのスタイリング: キャプションの見た目を変更したい場合は、CSSを使用しましょう。

captionタグの記述例

以下に、様々な状況におけるcaptionタグの記述例を示します。

<table>
  <caption>月別インターネット利用者数（2024年）</caption>
  <thead>
    <tr>
      <th>月</th>
      <th>利用者数（万人）</th>
      <th>前月比</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1月</td>
      <td>8,500</td>
      <td>-</td>
    </tr>
    <tr>
      <td>2月</td>
      <td>8,650</td>
      <td>+1.8%</td>
    </tr>
  </tbody>
</table>

<table>
  <caption>主要都市の平均気温</caption>
  <thead>
    <tr>
      <th>都市</th>
      <th>平均気温 (℃)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>東京</td>
      <td>22.5</td>
    </tr>
    <tr>
      <td>福岡</td>
      <td>23.1</td>
    </tr>
  </tbody>
</table>

まとめ

captionタグは、HTMLの <table> 要素にタイトルを提供し、その表が何であるかを明確に伝えるための重要なセマンティック要素です。
特にアクセシビリティの観点から非常に重要であり、スクリーンリーダーを使用するユーザーが表の内容を理解する上で大きな助けとなります。

表を作成する際には、必ずcaptionタグを用いて適切なタイトルを付与し、すべてのユーザーにとって分かりやすい表を作成しましょう。

HTML
yasuaki

コメント