figure 要素
4.5.11 figure 要素
- カテゴリー
- フロー・コンテンツ
- セクショニング・ルート
- この要素を使うことができるコンテキスト:
- フロー・コンテンツが期待される場所
- コンテンツ・モデル:
- ひとつの
figcaption要素の後にフロー・コンテンツが続く、または、 - フロー・コンテンツの後に 1 つの
figcaption要素が続く、または、 - フロー・コンテンツ、のいずれか。
- コンテンツ属性:
- グローバル属性
- DOMインタフェース:
HTMLElementを使う。
figure 要素は、いくらかのフロー・コンテンツを表します。オプションで、キャプションを伴います。これは、自己完結したものとなり、通常は、ドキュメントのメインのフローから単独のユニットとして参照されるものとなります。
そのため、この要素は、挿絵、図表、写真、コードなどに注釈を付けるために使われます。これらは、ドキュメントのメインのコンテンツから参照されます。しかし、ドキュメントのフローに影響を与えることなく、主要なコンテンツから、ページのサイドや専用のページや付属ページなどへ切り離すことが可能です。
この要素の子に figcaption 要素があれば、その最初のものが、その figure 要素のコンテンツのキャプションを表します。子に figcaption 要素がなければ、キャプションを持たないことになります。
この例は、コードをマークアップした figure 要素を示しています。
<p>In <a href="#l4">listing 4</a> we see the primary core interface
API declaration.</p>
<figure id="l4">
<figcaption>Listing 4. The primary core interface API declaration.</figcaption>
<pre><code>interface PrimaryCore {
boolean verifyDataLine();
void sendData(in sequence<byte> data);
void initSelfDestruct();
}</code></pre>
</figure>
<p>The API is designed to use UTF-8.</p>
ここには、写真をマークアップした figure 要素があります。
<figure>
<img src="bubbles-work.jpeg"
alt="Bubbles, sitting in his office chair, works on his
latest project intently.">
<figcaption>Bubbles at work</figcaption>
</figure>
この例には、figure ではない画像と、figure となる画像とビデオがあります。
<h2>Malinko's comics</h2> <p>This case centered on some sort of "intellectual property" infringement related to a comic (see Exhibit A). The suit started after a trailer ending with these words: <blockquote> <img src="promblem-packed-action.png" alt="ROUGH COPY! Promblem-Packed Action!"> </blockquote> <p>...was aired. A lawyer, armed with a Bigger Notebook, launched a preemptive strike using snowballs. A complete copy of the trailer is included with Exhibit B. <figure> <img src="ex-a.png" alt="Two squiggles on a dirty piece of paper."> <figcaption>Exhibit A. The alleged <cite>rough copy</cite> comic.</figcaption> </figure> <figure> <video src="ex-b.mov"></video> <figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption> </figure> <p>The case was resolved out of court.
これは、詩の一部が figure を使ってマークアップされたものです。
<figure> <p>'Twas brillig, and the slithy toves<br> Did gyre and gimble in the wabe;<br> All mimsy were the borogoves,<br> And the mome raths outgrabe.</p> <figcaption><cite>Jabberwocky</cite> (first verse). Lewis Carroll, 1832-98</figcaption> </figure>
この例は、ある城について論じたもっと広範囲な作品の一部ですが、この figure の中には 3 つの画像があります。
<figure>
<img src="castle1423.jpeg" title="Etching. Anonymous, ca. 1423."
alt="The castle has one tower, and a tall wall around it.">
<img src="castle1858.jpeg" title="Oil-based paint on canvas. Maria Towle, 1858."
alt="The castle now has two towers and two walls.">
<img src="castle1999.jpeg" title="Film photograph. Peter Jankle, 1999."
alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>
※ 原文:http://www.w3.org/TR/2011/WD-html5-20110525/grouping-content.html#the-figure-element