東京・多摩市のホームページ制作(更新・運用)・ウェブマーケティング会社  株式会社グルコム

ホームページ制作・ウェブマーケティング会社  株式会社グルコム
TEL042-319-3967
Web関連

挿絵・図解などの意味? HTML5で追加された要素『FIGURE要素』とは


140204

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

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

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

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

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

「figure」の意味

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

調べてみると、「姿」、「形」、「図形」などの意味の他に、「挿絵」とか「図解」とかの意味もあるそうですね。お、少しイメージできてきました。書籍などによくある「・・・これは、図3を見れば解る通り・・・」とかの“図”や「・・・これらをまとめてみると(別表4を参照)・・・」の“表”のように、“本文から”“参照され”るモノを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要素の使い方という記事を発見しました。・・・ああ、とても深く、且つ丁寧に考察されていますね・・・最初からここを拝見できれば良かったのですね・・・検索するって、大事ですね・・・。

株式会社グルコムについて

私たちは、ウェブ制作・ウェブマーケティングサービスを提供して、12年以上の実績がある会社です。 これまでの経験を活かし、ウェブ制作・運用・集客・SEO対策や、セミナー・ウェブ担当者向け教育サービスなどをお客様にご提供しています。