HTML Living Standard/figcaption

figcaption 要素

<figcaption> 要素は、<figure> 要素内のコンテンツに関連するキャプション（説明やタイトル）を提供するために使用されます。この要素を使用することで、図表やメディアの内容を明確にし、アクセシビリティや文書の理解を向上させます。

概要

役割: 図表やメディアコンテンツの説明やタイトルを提供する。
特徴: <figure> 要素の最初または最後に配置される。
主な用途:
- 画像のキャプション
- 図表の説明
- コードスニペットの補足情報

使用例

基本的な使用例

以下は、画像とそのキャプションを含む <figure> と <figcaption> の例です。

<figure>
  <img src="landscape.jpg" alt="山の風景">
  <figcaption>図1: 美しい山の風景</figcaption>
</figure>

この例では、<figcaption> が画像の内容を説明しています。

文章コンテンツのキャプション

以下は、文章とその説明を含む例です。

<figure>
  <blockquote>
    人間は失敗から学ぶ。それが人間の特権だ。
  </blockquote>
  <figcaption>– Aldous Huxley</figcaption>
</figure>

ここでは、引用の出典が <figcaption> で示されています。

属性

<figcaption> 要素はグローバル属性をサポートします。これには、id、class、style、およびその他の一般的な属性が含まれます。

スタイリングの例

以下は、CSS クラスを使用してキャプションをスタイリングする例です。

<figure>
  <img src="example.jpg" alt="サンプル画像">
  <figcaption class="custom-caption">図2: サンプル画像の説明</figcaption>
</figure>

CSS

.custom-caption {
  font-style: italic;
  text-align: center;
  color: gray;
}

`<figcaption>` 要素の仕様

許可される親要素: <figure> 要素のみ。
配置: <figure> の最初または最後に配置される必要があります。
子要素: 任意のフローコンテンツ（例: テキスト、リンク、画像など）。

配置の例

以下は、<figcaption> を <figure> の最初と最後に配置した場合の例です。

<!-- 最初に配置 -->
<figure>
  <figcaption>図3: 地図の説明</figcaption>
  <img src="map.jpg" alt="地図">
</figure>

<!-- 最後に配置 -->
<figure>
  <img src="diagram.png" alt="ダイアグラム">
  <figcaption>図4: ダイアグラムの説明</figcaption>
</figure>

アクセシビリティの考慮

意味を明確に: <figcaption> を使用して図表やメディアの意味を補足する説明を提供します。
スクリーンリーダー対応: <figcaption> 内のテキストはスクリーンリーダーで読み上げられるため、簡潔かつ正確な内容を記述します。

ベストプラクティス

明確で簡潔な説明: <figcaption> 内の内容は、図表やメディアの内容を簡潔に説明するように記述します。
一貫したスタイル: 文書全体でキャプションのスタイルを統一するために、CSS を使用してデザインを調整します。
不要な情報を避ける: キャプションには、すでに図表やメディアで明らかな情報を繰り返さないようにします。

使用上の注意

単独使用の禁止: <figcaption> は必ず <figure> 内で使用する必要があります。
配置の注意: <figcaption> を <figure> の外側に配置すると、仕様に反するため無効です。

まとめ

<figcaption> 要素は、図表やメディアコンテンツに適切なキャプションを提供するために欠かせない要素です。正しく使用することで、文書の可読性とアクセシビリティを大幅に向上させることができます。