HTML Living Standard/caption

caption 要素

<caption> 要素は、HTML 表（<table> 要素）にタイトルや説明を付けるために使用されます。この要素は表の最初に配置され、表の内容を簡単に理解する助けとなります。

基本構造

<caption> 要素は、<table> 要素の最初の子要素として使用される必要があります。以下は基本的な構造です：

<table>
  <caption>この表は商品の価格を示します</caption>
  <tr>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>ノートパソコン</td>
    <td>100,000円</td>
  </tr>
</table>

使用例

以下は、<caption> 要素を使った表の例です：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Table with Caption Example</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <table border="1">
      <caption>製品情報一覧</caption>
      <thead>
        <tr>
          <th>商品名</th>
          <th>価格</th>
          <th>在庫状況</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ノートパソコン</td>
          <td>100,000円</td>
          <td>在庫あり</td>
        </tr>
        <tr>
          <td>スマートフォン</td>
          <td>80,000円</td>
          <td>在庫なし</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

属性

<caption> 要素自体には特定の属性はありませんが、HTML のグローバル属性をサポートします：

class: CSS クラスを指定します。
id: 一意の識別子を指定します。
style: インラインスタイルを指定します。

スタイリングの例

CSS を使用して caption 要素をスタイリングする例を示します：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Styled Caption Example</title>
    <style>
      caption {
        font-weight: bold;
        font-size: 1.2em;
        text-align: center;
        margin-bottom: 10px;
        color: #333;
      }
    </style>
  </head>
  <body>
    <table border="1">
      <caption>月間売上データ</caption>
      <tr>
        <th>月</th>
        <th>売上</th>
      </tr>
      <tr>
        <td>1月</td>
        <td>1,000,000円</td>
      </tr>
      <tr>
        <td>2月</td>
        <td>900,000円</td>
      </tr>
    </table>
  </body>
</html>

アクセシビリティ

<caption> 要素を使用することで、スクリーンリーダーを利用しているユーザーにも表の内容を分かりやすく説明できます。以下のポイントを考慮してください：

表の内容を簡潔に要約する説明文を記載します。
表の目的が明確になるように記述します。

練習問題

練習1: あなたが最近購入した商品のリストを含む表を作成し、<caption> を使用してタイトルを付けてください。
練習2: CSS を使って caption のフォントサイズと色を変更してください。
練習3: スクリーンリーダーを使用しているユーザーにも分かりやすい表を設計してください。

caption 要素

基本構造

使用例

属性

スタイリングの例

アクセシビリティ

関連仕様

練習問題