<figure> …… キャプション情報を表す

<figure>タグは、キャプション情報を表す際に使用します。

キャプション情報とは、コンテンツの理解を深めるための説明、図表、表題、字幕などです。 figure要素を使用すると、イラスト、図、写真、コードリストなどに注釈を付けることができます。

figure要素のコンテンツにキャプションを付ける際には、figcaption要素を使用します。 figure要素の子要素にfigcaption要素があれば、figure要素のコンテンツのキャプションを表します。 figure要素の子要素にfigcaption要素がなければ、figure要素のコンテンツのキャプションはありません。

■使用例

以下のサンプルは、写真をfigure要素でマークアップして、 そのfigure要素にfigcaption要素でキャプションを付けています。

HTMLソース

<figure>
 <img src="./sample/pieta.jpg" alt="キリストの亡骸を腕に抱く聖母マリア">
 <figcaption>サン・ピエトロ大聖堂のピエタ</figcaption>
</figure>

<nav>
 <a href="19414.html">前へ</a>
 <a href="19416.html">次へ</a>
</nav>

↓↓↓

ブラウザ上の表示

■使用例

以下のサンプルは、詩をfigure要素でマークアップしています。

<figure>
 <p>
 夕火の刻、粘滑なるトーヴ<br>
 遥場にありて回儀い錐穿つ。<br>
 総て弱ぼらしきはボロゴーヴ、<br>
 かくて郷遠しラースのうずめき叫ばん。
 </p>
 <figcaption><cite>ジャバウォックの詩</cite> (第1節). ルイス・キャロル, 1832-98</figcaption>
</figure>

※余談ですが、 『ジャバウォックの詩』は単語自体を創作して作られたナンセンスな作品です。 創作単語の発音などからイメージをふくらませるものなので、日本語訳にするとかえって意味不明かもしれません。 作者のルイス・キャロルは、『不思議の国のアリス』や『鏡の国のアリス』を書いた人物です。

相対参照ではなく、ラベル参照を推奨

メインコンテンツからfigure要素を参照する場合、 「上の写真で」とか「次の図が示すように」といった相対参照で誘導すると、 figure要素を移動した場合にページの意味が混乱することになります。

スタイルを変更してもページの意味に影響を与えないために、 相対参照ではなくラベル付けによってfigure要素を参照することが推奨されています。

figure要素で定義するキャプション情報は、 主軸となるコンテンツの横、専用ページなどの位置に付録のようにして配置されるかもしれません。

このような場合、figure要素のid属性でラベル付けして図表番号などで参照すると、 主軸となるコンテンツの流れに影響を与えることなくキャプション情報へと移動できます。

■使用例

以下のサンプルは、figure要素にid属性でラベル付けして、本文からid識別子でリンクしています。

<p><a href="#l4">コードリスト4</a>で、プライマリコアインターフェースAPI宣言をご覧いただけます。</p>

<figure id="l4">
 <figcaption>コードリスト4「プライマリコアインターフェースAPI宣言」</figcaption>

 <pre><code>interface PrimaryCore {
 boolean verifyDataLine();
 undefined sendData(sequence<byte> data);
 undefined initSelfDestruct();
}</code></pre>

</figure>

<p>このAPIは、UTF-8 を使用するように設計されています。</p>

interface PrimaryCore {
 boolean verifyDataLine();
 undefined sendData(sequence<byte> data);
 undefined initSelfDestruct();
}

aside要素のほうが適切なケース

figure要素は、それだけで自己完結するフローコンテンツのひとまとまりです。 ただし、独立したコンテンツというよりは、主軸となるコンテンツの補助情報の役割を果たします。 主軸となるコンテンツとは別の目的を果たす内容であれば、 figure要素よりもaside要素のほうが適切でしょう。

例えば、article要素の内容をリピート引用するプルクォートは、 figure要素よりもaside要素に適しています。 なぜなら、こうしたリピート引用は、読者を惹きつけたり重要なトピックを強調することが目的であり、 主軸となるコンテンツの一部ではないためです。

■使用例

以下のサンプルでは、最初のimg要素はfigure要素でマークアップしていません。 後のimg要素とvideo要素はfigure要素でマークアップしています。 最初のimg要素は文章の一部になっていて自己完結していないため、 figure要素でマークアップするのは不適切です。

HTMLソース

<h2>訴訟のケーススタディ</h2>

<p>これは漫画の知的財産権の侵害に関する訴訟です。
まずは証拠品Ａを参照してください。
訴訟内容をまとめた映像の最後では、次の言葉が語られています。

<blockquote>
 <img src="./sample/promblem-packed-action.png" alt="この構図には盗用の疑いがある！">
</blockquote>

<p>…映像が流れました。
この映像の完全版は、証拠品Ｂを参照してください。

<figure>
 <img src="./sample/ex-a.png" alt="漫画の下書きが描かれている。">
 <figcaption>証拠品Ａ：疑惑の<cite>下書き</cite>スケッチ</figcaption>
</figure>

<figure>
 <video src="./sample/ex-b.ogv"></video>
 <figcaption>証拠品Ｂ：<cite>下書き</cite>が登場する映像</figcaption>
</figure>

<p>この訴訟は法廷外で和解しました。

↓↓↓

ブラウザ上の表示

訴訟のケーススタディ

これは漫画の知的財産権の侵害に関する訴訟です。 まずは証拠品Ａを参照してください。 訴訟内容をまとめた映像の最後では、次の言葉が語られています。

…映像が流れました。 この映像の完全版は、証拠品Ｂを参照してください。

この訴訟は法廷外で和解しました。

■使用例

以下のサンプルでは、figure要素をネストすることで、 グループ全体のキャプションと、グループ内の各図の個別のキャプションを提供しています。

HTMLソース

<figure>
 <figcaption>時代を経た城：それぞれ1423年、1858年、1999年</figcaption>
 <figure>
  <figcaption>エッチング／作者不明／1423年</figcaption>
  <img src="./sample/castle1423.jpg" alt="城は廃墟となっています。">
 </figure>
 <figure>
  <figcaption>キャンバスに油性絵具／マリア・トール／1858年</figcaption>
  <img src="./sample/castle1858.jpg" alt="城には２つの塔と２つの城壁があります。">
 </figure>
 <figure>
  <figcaption>フィルム写真／ピーター・ジャンクル／1999年</figcaption>
  <img src="./sample/castle1999.jpg" alt="城には１つの塔と周囲に高い壁があります。">
 </figure>
</figure>

↓↓↓

ブラウザ上の表示

■使用例

上記サンプルは、より簡潔に書くこともできます。 以下のサンプルでは、figure要素とfigcaption要素のペアの代わりに、img要素にtitle属性を指定しています。

HTMLソース

<figure>
 <img src="./sample/castle1423.jpg" title="エッチング／作者不明／1423年"
      alt="城は廃墟となっています。">
 <img src="./sample/castle1858.jpg" title="キャンバスに油性絵具／マリア・トール／1858年"
      alt="城には２つの塔と２つの城壁があります。">
 <img src="./sample/castle1999.jpg" title="フィルム写真／ピーター・ジャンクル／1999年"
      alt="城には１つの塔と周囲に高い壁があります。">
 <figcaption>時代を経た城：それぞれ1423年、1858年、1999年</figcaption>
</figure>

↓↓↓

ブラウザ上の表示

■使用例

figure要素は、コンテンツから暗黙的にのみ参照される場合があります。 以下のサンプルは、ニュース記事全体のイメージ画像を、figure要素でマークアップしています。

HTMLソース

<article>
 <h1>財政交渉は難航</h1>
 <figure>
  <img src="./sample/whitehouse.jpg" alt="ホワイトハウスとアメリカ国旗">
  <figcaption>財政交渉の行われた議事堂／ホワイトハウス報道写真</figcaption>
 </figure>
 <p>
 行き詰まり打開を目指した財政交渉は、着地点を見いだせず散会した。
 期限が近づく国の借入期間を延長する方向で調整している。
 </p>
 ...
</article>

↓↓↓

ブラウザ上の表示

財政交渉は難航

行き詰まり打開を目指した財政交渉は、着地点を見いだせず散会した。 期限が近づく国の借入期間を延長する方向で調整している。

...

■関連項目

Sponsors