<figure> - 図表

• トップ
• HTMLリファレンス
• <figure>

• 概要
• 説明
• 属性
• 使用例
• 関連項目
• リンク

概要

形式

<figure>～</figure>

サポート

https://caniuse.com/mdn-html_elements_figure

カテゴリ

フローコンテンツ

セクショニングルート

パルパブルコンテンツ

親要素

フローコンテンツ を子要素に持てるもの

子要素

フローコンテンツ と 0個か1個の figcaption要素。figcaption要素は最初か最後に記述する。

タグの省略

開始タグ:必須 / 終了タグ:必須

属性

グローバル属性

説明

本筋から参照されるものの、本文の流れに影響を与えることなく付録などに移動可能な写真、図表やソースコードなどを記述します。figure 要素のキャプションを figcaption 要素で指定することができます。figcaption 要素は省略可能です。省略しない場合、HTML5 では figcaption 要素は、figure 要素の一番最初、または、一番最後に記述する必要があります。HTML 5.1 ではこの制限は解除されましたが、HTML Living Standard では制限されたままです。

Chrome, Edge, Firefox, Safari, Opera などの主要ブラウザでは、通常よりも少し右寄り(左インデントをつけて)表示されるようです。

属性

グローバル属性

詳細は グローバル属性 を参照してください。

使用例

<figure>
  <figcaption>○○ちゃん</figcaption>
  <img src="picture123.jpg" width="100" height="100" alt="○○ちゃん">
</figure>

関連項目

• <figcaption>

リンク

• https://html.spec.whatwg.org/multipage/grouping-content.html#the-figure-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/figure
• https://caniuse.com/#feat=html5semantic