★HTML Living Standard リファレンス

私たちはカジノサイトを独自にレビューしています。当社のリンクを通じてサインアップすると、追加料金なしで当社に手数料が発生する場合があります。

<figure> …… キャプション情報を表す
Internet Explorer
Microsoft Edge
Google Chrome
Safari
Firefox
Opera
広告



<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 ">前へ</a>
 <a href="19416 ">次へ</a>
</nav>
↓↓↓

ブラウザ上の表示

キリストの亡骸を腕に抱く聖母マリア
サン・ピエトロ大聖堂のピエタ

■使用例

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

HTMLソース

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

↓↓↓

ブラウザ上の表示

夕火の刻、粘滑なるトーヴ
遥場にありて回儀い錐穿つ。
総て弱ぼらしきはボロゴーヴ、
かくて郷遠しラースのうずめき叫ばん。

ジャバウォックの詩 (第1節). ルイス・キャロル, 1832-98

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

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

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

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

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

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

■使用例

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

HTMLソース

<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>

↓↓↓

ブラウザ上の表示

コードリスト4で、プライマリコアインターフェースAPI宣言をご覧いただけます。

コードリスト4「プライマリコアインターフェースAPI宣言」
interface PrimaryCore {
 boolean verifyDataLine();
 undefined sendData(sequence<byte> data);
 undefined initSelfDestruct();
}

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

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

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

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

■使用例

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

HTMLソース

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

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

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

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

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

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

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

↓↓↓

ブラウザ上の表示

訴訟のケーススタディ

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

この構図には盗用の疑いがある!

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

漫画の下書きが描かれている。
証拠品A:疑惑の下書きスケッチ
証拠品B:下書きが登場する映像

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

■使用例

以下のサンプルでは、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="城には2つの塔と2つの城壁があります。">
 </figure>
 <figure>
  <figcaption>フィルム写真/ピーター・ジャンクル/1999年</figcaption>
  <img src="./sample/castle1999.jpg" alt="城には1つの塔と周囲に高い壁があります。">
 </figure>
</figure>

↓↓↓

ブラウザ上の表示

時代を経た城:それぞれ1423年、1858年、1999年
エッチング/作者不明/1423年
城は廃墟となっています。
キャンバスに油性絵具/マリア・トール/1858年
城には2つの塔と2つの城壁があります。
フィルム写真/ピーター・ジャンクル/1999年
城には1つの塔と周囲に高い壁があります。

■使用例

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

HTMLソース

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

↓↓↓

ブラウザ上の表示

城は廃墟となっています。
城には2つの塔と2つの城壁があります。
城には1つの塔と周囲に高い壁があります。
時代を経た城:それぞれ1423年、1858年、1999年

■使用例

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

HTMLソース

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

↓↓↓

ブラウザ上の表示

財政交渉は難航

ホワイトハウスとアメリカ国旗
財政交渉の行われた議事堂/ホワイトハウス報道写真

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


■関連項目

  • <figure> …… キャプション情報を表す
  • <figcaption> …… figure要素のキャプションを表す
  • <img> …… 画像を表す
  • <video> …… ビデオを表す
  • <audio> …… サウンドやオーディオを表す
  • <article> …… 自己完結する内容であることを表す
  • <section> …… 一般的なセクションを表す
  • <nav> …… ナビゲーションリンクのセクションを表す
  • <aside> …… メインコンテンツとは別のコンテンツであることを表す
広告



山田 太郎
テック・リード
山田太郎は、ウェブ開発やグラフィックスプログラミングに10年以上の経験を持つテクノロジーの専門家です。特にHTML5 CanvasやJavaScript、インタラクティブメディアに精通しており、動的なユーザーインターフェースや最先端のウェブアプリケーションの開発に携わってきました。複雑な図形描画や画像操作、リアルタイムグラフィックスに関する知識が豊富で、ウェブ技術の限界を追求する開発者たちにとって頼りになる存在です。知識の共有に情熱を持ち、初心者からプロフェッショナルまで幅広く支援するため、技術フォーラムやブログにも積極的に貢献しています。

ギャンブルガイド もっと見る

カジノファインダー

どのカジノが自分に最適か分からないですか?

サインアップは必要なく、1 分以内に最適なブックメーカーを簡単に見つけることができます。
カジノを探す
Back
質問
Select one of the following options
{"is_any_tile":true}

どのカジノが自分に最適か分からないですか?

Back
Restart
やったー!
これはあなたの選択に基づいた最高のカジノです...
51 users signed up
もっと表示する