140204

HTML5で追加された要素にFIGURE要素があります。この要素がどのようなものなのか、HTML5.jpさんの『HTML 5 differences from HTML 4』日本語訳で確認してみますと・・・、

figureは、自己完結するフロー・コンテンツを表します。通常は、その文書の本文から、ひとつの単位として参照されます。

・・・うん、難しいですね。

という訳で、このFIGURE要素とはどうやって使えばいいのか？を探っていこうと思います。

あ、毎度のことながら、要素の詳細な解説はHTML5.jpさんのfigure 要素をご覧ください。合わせてfigcaption 要素、img 要素もご覧いただくと、より理解が深まると思います。

「figure」の意味

さて、FIGURE要素を理解する為に、まずfigureの意味を調べてみました。ええ、そうです、そのレベルからのスタートです。

調べてみると、「姿」、「形」、「図形」などの意味の他に、「挿絵」とか「図解」とかの意味もあるそうですね。お、少しイメージできてきました。書籍などによくある「・・・これは、図３を見れば解る通り・・・」とかの“図”や「・・・これらをまとめてみると（別表４を参照）・・・」の“表”のように、“本文から”“参照され”るモノをFIGURE要素でマークアップすれば良いということですね。また、“自己完結する”とあるように、ひとつのFIGURE要素はそれ自体で成立するモノでなくてはいけないようです。

FIGURE要素とFIGCAPTION要素

FIGURE要素は、子要素（中に入る要素）としてFIGCAPTION要素を一つだけ持つことができます（必要という訳ではありません）。また、FIGCAPTION要素はFIGURE要素の冒頭か末尾に置かなくてはなりません。そして、FIGCAPTION要素はFIGURE要素の「キャプション」となります。

<figure>
<figcaption>キャプション</figcaption>
なにかのコンテンツ
・・・
</figure>

または、

<figure>
なにかのコンテンツ
・・・
<figcaption>キャプション</figcaption>
</figure>

「なにかのコンテンツ」とした部分は、まぁ、いろんな要素を入れることができます。具体的にはフロー・コンテンツになりますが、早い話が「ほぼ何でも」ということになります。ですから、IMG要素だけでなく、リスト要素（OL要素、UL要素、DL要素）や表組要素（TABLE要素）などなど、“本文から”“参照され”るコンテンツをFIGURE要素でマークアップする、ということになります。

FIGURE要素をどう使うか

だんだんとFIGURE要素の理解が深まってきました。では、実際にこの要素どのように使うか？という話に入るのですが・・・これが・・・なかなか・・・コレ！というのが判明しなかったのですよ・・・。

例えば文中の画像とかリストとか表組を「全て」FIGURE要素でマークアップするのが妥当なのか？全てをマークアップしなくて良いのなら、それはどこで判断するのか？ etc.

うんうん悩んで出した結論が、「その一纏まりのコンテンツにキャプションが必要ならFIGURE要素でマークアップする」というものです。写真などの画像にしろ、データなどの表組にしろ、キャプションが必要なものであればFIGCAPTION要素で説明し、FIGURE要素でグルーピングする、というのがFIGURE要素の（無難な？）使い方なのではないかと思うのです。

・・・と、ここまで考えた時点でWEBCRE8.jpさんの正しいfigure要素の使い方という記事を発見しました。・・・ああ、とても深く、且つ丁寧に考察されていますね・・・最初からここを拝見できれば良かったのですね・・・検索するって、大事ですね・・・。