HTML要素辞書 by Sentaro

<figcaption>

Figure Caption（図表キャプション）要素。<figure>要素内のコンテンツに説明的なキャプションを提供します。

info

概要

<figcaption> 要素は、親要素である <figure> 要素の内容に対する見出しや説明（キャプション）を定義します。
図、写真、コードブロック、ビデオなど、主要なコンテンツから独立して扱われるべきコンテンツ（フローコンテンツ）に意味的なキャプションを付与するために使用されます。

play_circle

デモ (静的表示)

HTML (Source)

<figure> <figcaption> 図1: <figure>要素と<figcaption>要素の関係 </figcaption> <img src="placeholder.png" alt="プレースホルダ画像"> </figure> <br> <div style="background-color: #f0f0f0; padding: 10px; border-radius: 5px;"> 図1: <figure>要素と<figcaption>要素の関係 </div>

Preview (Result)

図1: <figure>要素と<figcaption>要素の関係

list

属性 (Attributes)

属性名	説明
グローバル属性	全てのHTML要素に共通のグローバル属性（`class`, `id`, `style`など）のみを使用できます。独自の属性はありません。

code

実用例

1. 画像にキャプションを付与する基本的な使い方

<figure>
 <img src="sunset.jpg" alt="海岸線に沈む夕日">
 <figcaption>
  図2: 休暇中の美しい夕日の写真
 </figcaption>
</figure>

2. コードブロックにキャプションを付与する例

<figure>
 <figcaption>
  リスト1: Pythonの簡単なHello Worldコード
 </figcaption>
 <pre><code>
  print("Hello, World!")
 </code></pre>
</figure>

3. キャプションを上部に配置する例

<figure>
 <!-- <figure>内の最初の子要素として配置 -->
 <figcaption>
  図3: キャプションはコンテンツの上部にも配置可能です。
 </figcaption>
 <table border="1">...</table>
</figure>

lightbulb

知っておくべき重要事項

warning

親要素の制約
<figcaption> 要素は、**必ず**その親要素が <figure> 要素でなければなりません。また、<figure> 要素内では、<figcaption> は最初または最後の要素のどちらかでなければなりません。

accessibility_new

アクセシビリティ
<figure> と <figcaption> の組み合わせは、画像やコードなどのコンテンツと、それに対応する説明（キャプション）を意味的に関連付けるため、スクリーンリーダーのユーザーにとって非常に重要です。キャプションはコンテンツの文脈を理解するのに役立ちます。

私について利用規約プライバシーポリシー