仕様

FIGURE要素は、
図表などの
自己完結型のコンテンツを
表します。

figureキャプション付きの図 (figure)
カテゴリ
  • フローコンテンツ
  • パルパブルコンテンツ
  • セクショニング・ルート
種類通常要素
この要素を
使用できる
状態		フローコンテンツを受け入れる要素。
許可されて
いる内容		いずれか：
1つの figcaption要素とそれに続くフローコンテンツ。
または、フローコンテンツの後に1つの figcaption要素が続きます。
または、フローコンテンツのみ。
属性グローバル属性のみ。
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		figcaption要素がある場合はなし、ない場合は任意。
[既定値 : figure]
DOM
インター
フェイス		HTMLElement
レンダリング
フローコンテンツ
  1. figure {
  2. display: block;
  3. margin-block-start: 1em;
  4. margin-block-end: 1em;
  5. margin-inline-start: 40px;
  6. margin-inline-end: 40px;
  7. unicode-bidi: isolate;
  8. unicode-bidi: bidi-override;
  9. }

CSS を大雑把に読むと、 フローレイアウトに配置されたときにブロックレベルのボックスを生成します。 ブロック方向の前後(上下)の余白を１文字分空けます。 インライン方向の前後(左右)の余白を40px空けます。 などになります。

参加
コンテキスト		ブロックフォーマットコンテキスト
確立
コンテキスト		ブロックフォーマットコンテキスト
figure要素は、図表などの自己完結型のコンテンツを表します。

figure要素は、(完全な文のように)自己完結型であり、通常はドキュメントのメインフローから単一のユニットとして参照される、オプションでキャプション付きのフローコンテンツを表します。

  1. <div>
  2. <figure>
  3. <figcaption>caption</figcaption>
  4. <img src="./hani_c0504.gif" alt="Sample gif">
  5. </figure>
  6. </div>
caption
Sample gif
参照元
  1. HTML Living Standard. 4.4.12 The figure element
  2. HTML Living Standard. 15 Rendering 15.3.3 Flow content
  3. HTML 5.2 W3C 勧告. 4.4.12 The figure element
  4. MDN Web Docs. HTML <figure>: 任意のキャプション付きの図要素

使用可能な箇所

フローコンテンツを
受け入れる要素に
配置できます。

figure要素は、フローコンテンツを受け入れる要素に配置できます。

  1. <div>
  2. <figure>text</figure>
  3. </div>

フローコンテンツを配置できる div要素のコンテンツの一部として、figure要素を配置できます。

text

配置できるコンテンツ

figcaption要素,
フローコンテンツを
配置できます。

figure要素は、1つの figcaption要素とそれに続くフローコンテンツを配置できます。
または、フローコンテンツの後に1つの figcaption要素を続けて配置できます。
または、フローコンテンツのみを配置できます。

  1. <figure>
  2. <figcaption>caption</figcaption>
  3. <img src="./hani_c0504.gif" alt="Sample gif">
  4. </figure>

figure要素のコンテンツの一部として、フローコンテンツである img要素を配置できます。
figure要素のコンテンツの一部として figcaption要素を配置できます。

caption
Sample gif

属性

グローバル属性のみ、
設定できます。

figure要素は、グローバル属性のみ 設定できます。

気を付ける点

自己完結型

  1. <figure>
  2. <figcaption>caption</figcaption>
  3. <img src="./hani_c0504.gif" alt="Sample gif">
  4. </figure>

接線方向にのみ関連するコンテンツ、または周囲のフローとは別の目的を果たすコンテンツの場合は、aside要素を使用する必要があります（それ自体で図をラップできます）。figure要素の内容は、周囲の流れの一部です。ページの目的が図を表示することである場合、たとえば画像共有サイトの写真の場合、図と figcaption要素を使用して、その図のキャプションを明示的に提供できます。

caption
Sample gif