<figure>

<figure>は図とキャプションを表わすHTML要素です。この記事では、<figure>タグの使い方をサンプルを交えてご紹介しています。

構文

figureは図表を表わすHTML要素である。子要素としてimgとfigcaptionを持つことができる。

<figure>
  <!-- flow content -->
</figure>

サンプル

図の下にキャプションをつけるサンプルを示す。

<figure>
  <img src="/img/avator.png">
  <figcaption>図1 Tsukamoto Hiroyuki</figcaption>
</figure>

上記のHTMLは次のように表示される。

図1 Tsukamoto Hiroyuki

図のキャプションは上につけることもできる。

<figure>
  <figcaption>図1 Tsukamoto Hiroyuki</figcaption>
  <img src="/img/avator.png">
</figure>
図1 Tsukamoto Hiroyuki

属性

次に示す属性をfigureタグに指定できる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
<figure class="responsive">
  <img src="/img/avator.png">
</figure>
data-*
カスタムデータ属性を指定する。
id
このHTML文書内で一意な識別子を指定する。この要素をCSSJavaScriptから識別するのに使用する。
<figure id="example">
  <img src="/img/avator.png">
</figure>
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

JavaScript

JavaScriptからHTMLElementインタフェースを通じてfigure要素へアクセスできる。

HTMLElementインタフェースのプロパティ
プロパティ 説明
accessKey DOMString figure要素のaccessKey属性
accessKeyLabel DOMString 要素に割り当てられたアクセスキー(読取り専用)
contentEditable DOMString この要素が編集できるかどうか (true/false)
isContentEditable Boolean この要素が編集できるかどうか(読取り専用)
dataset DOMStringMap この要素のカスタムデータ属性
dir DOMString figure要素のdir属性
draggable Boolean この要素がドラッグできるかどうか
innerText DOMString ノードに描画されるテキスト
lang DOMString figure要素のlang属性
style DOMString figure要素のstyle属性
tabIndex long figure要素のtabIndex属性
title DOMString figure要素のtitle属性

<figcaption>

<figcaption> は画像のキャプションを表すHTMLタグである。

<figcaption>
  <!-- flow content -->
</figcaption>

属性

次に示す属性をfigureタグに指定できる。

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。
data-*
カスタムデータ属性を指定する。
id
このHTML文書内で一意な識別子を指定する。この要素をCSSJavaScriptから識別するのに使用する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

内容

figcaption要素はフローコンテンツを内容に含めることができる。具体的には次の要素である。

親要素

figcaptionの親要素はfigure要素である。figcaption要素は、figure要素の最初の子要素または最後の子要素でなければならない。

HTMLタグ

参考文献

WHATWG. 2021. HTML Living Standard