INDEX
captionタグの概要
| 表のタイトルを設定 HTMLタグ | ||
|
<table> <caption>表のタイトル</caption> … </table> 概要 |
||
|
captionタグの基本的な使い方
以下の例では、captionタグを使って表のタイトルを設定します。
<table border="1">
<caption>都道府県別の人口</caption>
<tr>
<th>都道府県</th>
<th>人口（万人）</th>
</tr>
<tr>
<td>東京都</td>
<td>1400</td>
</tr>
<tr>
<td>大阪府</td>
<td>880</td>
</tr>
</table>表示例：
| 都道府県 | 人口（万人） |
|---|---|
| 東京都 | 1400 |
| 大阪府 | 880 |
CSSを使ってcaptionのデザインを変更
captionタグのデザインをCSSで変更できます。
<style>
caption {
font-size: 18px;
font-weight: bold;
color: blue;
text-align: left;
margin-bottom: 10px;
}
</style>
<table border="1">
<caption>製品価格一覧</caption>
<tr>
<th>製品名</th>
<th>価格（円）</th>
</tr>
<tr>
<td>スマートフォン</td>
<td>80,000</td>
</tr>
</table>表示例：
| 製品名 | 価格（円） |
|---|---|
| スマートフォン | 80,000 |
captionの位置を変更する
デフォルトではcaptionは表の上部に配置されますが、CSSを使って下部に移動できます。
<style>
caption {
caption-side: bottom;
text-align: center;
font-style: italic;
color: gray;
}
</style>
<table border="1">
<caption>データの出典: 統計庁</caption>
<tr>
<th>カテゴリ</th>
<th>値</th>
</tr>
<tr>
<td>A</td>
<td>100</td>
</tr>
</table>表示例：
| カテゴリ | 値 |
|---|---|
| A | 100 |
SEOとアクセシビリティへの影響
- SEO効果:
captionタグを適切に使用すると、検索エンジンが表の内容を正しく理解しやすくなる。 - アクセシビリティ: スクリーンリーダーが表の目的を正しく伝えるため、
captionの活用が推奨される。
注意事項
- 各
tableには1つのcaptionタグのみ使用可能。 - テーブルの説明をより詳細に記述したい場合は、
summary属性（HTML5では廃止）やaria-describedbyを利用する。 - デザインを変更する場合は、CSSの
caption-sideを使用する。
よくある質問
- Q: captionタグは必須ですか？
- A: いいえ、必須ではありません。しかし、表の意味を明確にするために推奨されます。
- Q: captionタグの代わりにpタグを使ってもよいですか？
- A: 可能ですが、スクリーンリーダーやSEOの観点からは
captionタグを使用するのが望ましいです。 - Q: captionのデザインを自由に変更できますか？
- A: はい、CSSを使ってフォントサイズ、位置、色などを変更できます。
まとめ
- captionタグは表のタイトルを指定するために使用される。
- デフォルトでは表の上部に表示されるが、CSSで位置を変更できる。
- SEOやアクセシビリティの向上に役立つ。
- デザインの変更には
caption-sideを使用する。