【HTML Living Standard】caption要素の使い方
caption要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
captionオブジェクトは、HTMLのテーブル（表）のキャプション（表題）を表すオブジェクトです。このオブジェクトは、テーブル全体の内容を簡潔に説明する短いタイトルを提供し、ユーザーがテーブルの目的やデータを素早く理解できるよう支援することを目的としています。
caption要素は、必ず<table>要素の直下に配置する必要があります。また、<thead>、<tbody>、<tfoot>、<tr>といった他のテーブル構成要素よりも前に記述しなければなりません。一つの<table>要素につき、caption要素は一つだけ配置できるという制約があります。
この要素の利用は、特にウェブアクセシビリティの向上に大きく貢献します。スクリーンリーダーを利用するユーザーにとって、テーブルの複雑なデータ構造に入る前に、caption要素が提供する表題はテーブルの文脈を把握するための重要な情報源となります。これにより、視覚に頼らない情報伝達においても、テーブルの内容が理解しやすくなります。
captionの内容は、テーブルの情報を的確かつ簡潔に表すタイトルであることが推奨されます。長文ではなく、短くても意味が明確に伝わる記述を心がけることで、情報の伝達効率を高めることができます。このようにcaptionオブジェクトを適切に利用することで、Webページの情報の構造化が促進され、あらゆる利用者にとって理解しやすいコンテンツを提供することが可能になります。
構文(syntax)
1<table> 2 <caption>表のタイトルまたは説明</caption> 3 <!-- テーブルのヘッダー、ボディ、フッターなどのコンテンツが続きます --> 4</table>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML captionタグでテーブルのタイトルを設定する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML captionタグのサンプル</title> 7 <style> 8 /* テーブルの基本的なスタイル設定 */ 9 table { 10 width: 80%; 11 border-collapse: collapse; /* セルの境界線を結合 */ 12 margin: 20px auto; /* テーブルを中央に配置 */ 13 box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 軽い影を追加 */ 14 } 15 16 /* ヘッダーとデータセルのスタイル */ 17 th, td { 18 border: 1px solid #ddd; /* 薄い境界線 */ 19 padding: 10px; /* セル内の余白 */ 20 text-align: left; /* テキストを左寄せ */ 21 } 22 23 /* ヘッダーセルの背景色 */ 24 th { 25 background-color: #f2f2f2; 26 font-weight: bold; 27 } 28 29 /* captionタグのスタイル設定 */ 30 caption { 31 font-weight: bold; /* テキストを太字に */ 32 font-size: 1.5em; /* フォントサイズを大きく */ 33 margin-bottom: 10px; /* 下部に余白 */ 34 text-align: center; /* テキストを中央寄せ */ 35 color: #333; /* 文字色 */ 36 padding: 10px; 37 } 38 </style> 39</head> 40<body> 41 42 <!-- 43 captionタグのサンプルコード 44 captionタグは、<table>要素の最初の直接の子要素として配置し、 45 テーブル全体のタイトルや説明を提供するために使用されます。 46 --> 47 <table> 48 <!-- captionタグはテーブルの内容を簡潔に説明します --> 49 <caption> 50 2023年度 第1四半期 地域別売上実績 51 </caption> 52 <thead> 53 <tr> 54 <th>地域</th> 55 <th>製品A売上 (万円)</th> 56 <th>製品B売上 (万円)</th> 57 <th>合計 (万円)</th> 58 </tr> 59 </thead> 60 <tbody> 61 <tr> 62 <td>関東</td> 63 <td>500</td> 64 <td>350</td> 65 <td>850</td> 66 </tr> 67 <tr> 68 <td>関西</td> 69 <td>420</td> 70 <td>300</td> 71 <td>720</td> 72 </tr> 73 <tr> 74 <td>九州</td> 75 <td>280</td> 76 <td>200</td> 77 <td>480</td> 78 </tr> 79 </tbody> 80 <tfoot> 81 <tr> 82 <td colspan="3">総計</td> 83 <td>2050</td> 84 </tr> 85 </tfoot> 86 </table> 87 88</body> 89</html>
HTMLの<caption>タグは、<table>要素に配置され、そのテーブル全体のタイトルや簡潔な説明を提供する目的で使用されます。このタグは、必ず<table>要素の最初の直接の子要素として記述する必要があります。テーブルの直下に配置することで、そのテーブルがどのような内容であるかを明示し、ユーザーが情報を素早く理解する手助けとなります。
サンプルコードでは、地域別の売上実績を示すテーブルに対して、『2023年度 第1四半期 地域別売上実績』というタイトルを<caption>タグで設定しています。これにより、複雑なデータを持つテーブルであっても、そのテーマや内容を一目で把握できるため、情報の伝達効率が向上します。
<caption>タグ自体には、特定の引数や戻り値はありません。そのため、特別な設定をすることなく使用できます。ただし、CSS（スタイルシート）を用いることで、フォントサイズや色、配置などを自由にカスタマイズすることが可能です。サンプルコードのスタイル定義では、<caption>のテキストを太字にして中央に配置し、フォントサイズを大きくすることで、テーブルのタイトルとして視覚的に際立たせています。このように、<caption>タグは、データを見やすく、理解しやすくするための重要な要素です。
captionタグは、<table>要素の表全体にタイトルや説明を与えるために使用されます。最も重要な注意点は、必ず<table>要素の直後、かつ他の<thead>や<tbody>などの要素より前に、最初の直接の子要素として配置する必要がある点です。これを守らないと、HTMLの文法エラーとなり、ブラウザでの表示が意図せず崩れる可能性があります。captionタグ自体には特別な属性はありませんが、サンプルコードのようにCSSを用いて文字の太さ、サイズ、配置などを自由に調整し、テーブルの内容を効果的に説明することができます。これにより、テーブルのアクセシビリティとユーザビリティが向上します。
HTML captionと画像でテーブルを装飾する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML captionと画像のサンプル</title> 7 <style> 8 /* テーブルの基本的なスタイル設定 */ 9 table { 10 width: 80%; /* テーブルの幅 */ 11 border-collapse: collapse; /* セルの境界線を結合 */ 12 margin: 20px auto; /* 上下に20pxのマージン、左右中央揃え */ 13 box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 軽い影で立体感を出す */ 14 } 15 16 /* テーブルヘッダーとデータセルのスタイル */ 17 th, td { 18 border: 1px solid #ddd; /* 薄い灰色の境界線 */ 19 padding: 10px; /* セル内の余白 */ 20 text-align: left; /* テキストを左揃え */ 21 } 22 23 /* テーブルヘッダーの背景色 */ 24 th { 25 background-color: #f8f8f8; /* 薄い灰色の背景 */ 26 font-weight: bold; /* フォントを太字に */ 27 } 28 29 /* caption要素のスタイル */ 30 caption { 31 font-size: 1.3em; /* フォントサイズを大きく */ 32 font-weight: bold; /* フォントを太字に */ 33 margin-bottom: 15px; /* テーブルとの間に下マージン */ 34 text-align: left; /* キャプションを左揃えにする */ 35 padding: 5px 0; /* 上下のパディング */ 36 } 37 38 /* caption内の画像スタイル */ 39 caption img { 40 vertical-align: middle; /* 画像とテキストを垂直方向中央で揃える */ 41 margin-right: 8px; /* 画像の右に余白 */ 42 width: 24px; /* アイコン画像の幅 */ 43 height: auto; /* 高さは自動調整 */ 44 } 45 46 /* テーブル内の画像プレビューのスタイル */ 47 .image-preview { 48 max-width: 60px; /* 最大幅 */ 49 height: auto; /* 高さは自動調整 */ 50 display: block; /* ブロック要素として扱い、余計な余白を防ぐ */ 51 border-radius: 4px; /* 角を少し丸める */ 52 } 53 </style> 54</head> 55<body> 56 57 <h1>画像情報を表示する製品リスト</h1> 58 59 <!-- 60 <table>要素は表形式のデータを定義します。 61 <caption>要素は<table>要素の直下に配置され、テーブル全体のタイトル（キャプション）を提供します。 62 ここでは、キャプション内にテキストと小さなアイコン画像を組み合わせて、より分かりやすいタイトルを作成しています。 63 --> 64 <table> 65 <!-- 66 <caption>はテーブルのタイトルです。 67 <img>要素は画像を埋め込み、alt属性は画像が表示されない場合の代替テキストを提供します。 68 src属性は画像のURLを指定します。ここではダミー画像を使用しています。 69 --> 70 <caption><img src="https://via.placeholder.com/24x24?text=🖼️" alt="画像アイコン"> 製品ギャラリー情報</caption> 71 <thead> 72 <tr> 73 <th>ID</th> 74 <th>製品名</th> 75 <th>プレビュー</th> 76 <th>詳細説明</th> 77 </tr> 78 </thead> 79 <tbody> 80 <tr> 81 <td>P001</td> 82 <td>スマートフォンX</td> 83 <td><img src="https://via.placeholder.com/60x60?text=PhoneX" alt="スマートフォンXの画像プレビュー" class="image-preview"></td> 84 <td>最新の高性能スマートフォンです。5G対応、大容量バッテリー。</td> 85 </tr> 86 <tr> 87 <td>P002</td> 88 <td>スマートウォッチY</td> 89 <td><img src="https://via.placeholder.com/60x60?text=WatchY" alt="スマートウォッチYの画像プレビュー" class="image-preview"></td> 90 <td>健康管理機能が充実したスマートウォッチです。防水仕様。</td> 91 </tr> 92 <tr> 93 <td>P003</td> 94 <td>ワイヤレスイヤホンZ</td> 95 <td><img src="https://via.placeholder.com/60x60?text=EarphoneZ" alt="ワイヤレスイヤホンZの画像プレビュー" class="image-preview"></td> 96 <td>高音質で長持ちするワイヤレスイヤホンです。ノイズキャンセリング機能。</td> 97 </tr> 98 </tbody> 99 </table> 100 101</body> 102</html>
HTMLの<caption>要素は、<table>要素に設定されるテーブル全体のタイトル（見出し）を定義するために使用されます。この要素は、必ず<table>要素の直下に配置する必要があります。<caption>要素自体は、特定の引数や戻り値を持ちません。
提供されたサンプルコードでは、製品リストを表示するテーブルに「製品ギャラリー情報」というタイトルを付けるために<caption>が使われています。この例では、タイトルテキストの前に小さな画像アイコン（<img>要素）を組み合わせており、これにより視覚的に分かりやすいキャプションが作成されています。<caption>要素内に<img>要素のような他のHTML要素を含めることができるため、テキストだけでなくアイコンやロゴなどを表示して、デザイン性を高めることが可能です。
CSS（スタイルシート）を使用することで、<caption>要素のフォントサイズ、色、配置、さらにはその中の画像のサイズや位置といった見た目を細かく調整することができます。このように<caption>要素を使うことで、表データの意図を明確に伝え、ウェブページのアクセシビリティとユーザビリティを向上させることができます。
<caption>要素は、必ず<table>要素の直下に配置し、テーブル全体のタイトルや説明を提供するために使用します。このサンプルコードのように、<caption>内に<img>要素を配置して視覚的な要素を追加することも可能ですが、その際も<img>要素には、画像の内容を簡潔に説明するalt属性を必ず設定してください。alt属性は、画像が表示されない場合や、スクリーンリーダーを利用するユーザーがウェブページの内容を理解するために不可欠な情報です。これらの適切な使用により、ウェブページのアクセシビリティが向上し、より多くのユーザーにとって理解しやすいコンテンツとなります。<caption>の見た目は、CSSで自由に調整できます。