Edit

Page

Page title:

Page body:

[18] [DFN[[CODE(HTMLe)@en[figure]]]] [[要素]]は、
[[図]]を表します。

* 意味

[23] 
[CODE(HTMLe)@en[figure]] [[要素]]は図表を表すために使うことができます。
図表には一般的に「図1. 小学生の平均身長」のような題名が付されていることが多いですが、
[CODE(HTMLe)@en[figure]] [[要素]]はそうでなくても使うことができます。

[24] 
ここでいう図表というのは、 [CODE(HTMLe)@en[img]] [[要素]]や [CODE(HTMLe)@en[table]]
[[要素]]という意味ではありません。[[文書]]の一部を構成するものの[[本文]]自体には含まれないような独立した部分であれば、
広く用いることができます。具体的には、[[写真]]、[[表]]、
[[詩]]、[[プログラムコード]]、[[引用文]]、[[列挙]]、
[[公式]]や[[定理]]を含む[[数式]]や[[化学式]]、
[[ASCIIアート]]、[[地図]]などに使えます。

[25] 
[[雑誌]]や[[論文]]などでは、図表は[[本文]]の流れから離れて[[ページ]]の端などにまとめる形で[[配置]]される場合があります。
しかし [CODE(HTMLe)@en[figure]] [[要素]]はそうした表示方法に限定されるものではなく、
通常の [[CSS]] の指定により任意の方法で表示できます。
もちろん [CODE[float]] などで[[本文]]とは離して表示することもできますし、
何も指定せず[[本文]]の流れの中で表示することもできます。
[CODE[display: fixed]] など[[紙媒体]]とは異なる手法で表示しても構いません。

;; [26] [[ページ]]の最後に関連事項の[[コラム]]が付属している場合のように、
図表とは違って[[本文]]との関係性が強くない場合には、 [CODE(HTMLe)@en[aside]]
[[要素]]を使うことができます。

;; [27] 他の[[HTML要素]]同様に、 [CODE(HTMLe)@en[figure]] [[要素]]は必ず使わなければならないというものではありません。
[[著者]]が図表だと判断すれば使うことができますし、図表とは思わない、
図表と明示する必要性が薄いと判断すれば [CODE(HTMLe)@en[figure]]
[[要素]]を使わなくて構いません。 [CODE(HTMLe)@en[figure]]
[[要素]]を使うべきか迷うのであれば、使わなくて構いません。

* 内容

[32] [CODE[figcaption]] [[要素]]を先頭または末尾のいずれかに高々
1つ置くことができます。

;; [33] [[論文]]などでは、
[[表題]]は上側、[[図題]]は下側といった[[スタイルガイド]]が定められていることがあります。
しかし [[HTML]] ではそうした内容に依存した制約はありません。

* [CODE[imggroup]] 要素 (DTBook)

[36] [[HTMLもどき]]の [[DTBook]] には 
[DFN[[CODE[imggroup]]]]
[[要素]]があります。

[38] 
[[HTML]] とほぼ同じ [CODE[img]] [[要素]]があってそのまま使うこともできますが、
[CODE[imggroup]] [[要素]]でいくつかグループ化したり、
[CODE[caption]] や [CODE[prodnote]] と組み合わせたりできました。

[39] 
後の [[HTML]] の [CODE[figure]] / [CODE[figcaption]] を先取りした形といえます。

- [37] [CITE@en-US[DAISY ANSI/NISO Z39.86-2002 - The DAISY Consortium]], [TIME[2023-11-26T05:17:33.000Z]] <https://daisy.org/info-help/document-archive/archived-projects/daisy-ansi-niso-z39-86-2002-archived/>

* 関連

[34] [[表]]については、 [CODE[table]] [[要素]]と [CODE[caption]]
[[要素]]があります。これは [CODE[figure]] [[要素]]の特殊ケースとも言えます。

[35] [CODE[fig]] [[要素]]とは異なります。

* 歴史

[40] 
[TIME[1994-04-07]]に HTML DTD に追加されました。
現在の
[CODE[figure]] 
に相当すると思われます。
しかしこのとき限りの実験に終わり、以後の DTD には出現しません。

[FIG(data)[ [216] [[HTML要素概説]]

:[F[要素名]]:[CODE[fig]]
:日付:[TIME[1994-04-07]]
:説明:
[TIME[1994-04-07]]、
[[HTML DTD]] に
[CODE[fig]]
が追加された。
現在の
[CODE[figure]] 
に当たると思われる。
[SEE[>>43]]
[SRC[HTML19940407]]
:注釈:
-
[43] 
しかしこのとき限りに終わり、以後の [[HTML DTD]] に出現しない。

]FIG]

[FIG(data)[ [284] [[HTML要素概説]]

:[F[要素名]]:[CODE[fig]]
:[F[要素名]]:[CODE[caption]]
:日付:[TIME[1995-12-20]]
:説明:
[TIME[1995-12-20]]版
[CITE@en[HTML3 Linking and Embedding Model]]
に、
[CODE[fig]], [CODE[caption]]
が将来拡張案として示されている。
[CODE[insert]] と併用する。
[SRC[>>44]]
現在の
[CODE[figure]], [CODE[figcaption]], [CODE[object]]
に当たる。
:出典:
[REFS[

-
[44] 
[CITE@en[HTML3 Linking and Embedding Model]], 
[DATA(.author)[[[W3C]]]],
[DATA(.status)[Working Draft]],
[TIME(.published)[20-Dec-95][1995-12-20]],
[TIME[1999-02-04T17:57:09.000Z]], [TIME[2024-08-15T07:38:59.446Z]] <https://www.w3.org/TR/WD-insert-951220.html>

]REFS]

]FIG]

** HTML5

[41] [CITE@en[the figure element and associated trappings]], [[Hixie]], [TIME[2006-11-28 07:22:02 +09:00]], [TIME[2024-09-01T12:29:49.000Z]] <https://github.com/whatwg/html/commit/32bff0ac1cc9a040ec4d45fdea206b4e9ce09059#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d>

[FIG(data)[ [42] [[HTML要素概説]]

:[F[要素名]]:[CODE[figure]]
:日付:[TIME[2006-11-28]]
:説明:
[TIME[2006-11-28]]、
[CITE[HTML5]]
に
[CODE[figure]]
が追加された。
現行仕様である。
:出典:
[REFS[

- [CITE[HTML5 r365]],
[DATA(.author)[[[Hixie]]]], 
[TIME(.published)[2006-11-28 07:22:02 +09:00]], [TIME[2024-09-01T12:29:49.000Z]] <https://github.com/whatwg/html/commit/32bff0ac1cc9a040ec4d45fdea206b4e9ce09059>

]REFS]

]FIG]

[1]
[CITE[Re: several messages about <figure> and related subjects]] ([[Ian Hickson <ian@...>]] 著, [TIME[2008-02-25 22:42:29 +09:00]] 版) <http://permalink.gmane.org/gmane.org.w3c.whatwg.discuss/13332>
([[名無しさん]])

[2] [CITE[IRC logs: freenode / #whatwg / 20091219]]
([TIME[2010-01-05 22:40:48 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20091219>

[14] [CITE[IRC logs: freenode / #whatwg / 20100107]]
([TIME[2010-01-09 14:17:58 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20100107#l-220>

[3] [CITE[''''''[''''''whatwg'''''']'''''' Various threads with feedback on HTML elements]]
( ([TIME[2013-10-16 00:30:44 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-October/041109.html>

[4] [CITE@en[(X)HTML5 Tracking]]
([TIME[2010-01-30 21:19:42 +09:00]] 版)
<http://html5.org/tools/web-apps-tracker?from=4635&to=4636>

[5] [CITE@en[Web Applications 1.0 r7991   Broaden the possible use case for <figure>.]]
( ([TIME[2013-06-20 03:53:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7990&to=7991>

[6] [CITE@en[Web Applications 1.0 r3859        Parser changes: <dc>, <ds>, <dialog> are now treated differently. Styling changes: <dialog>, <dc>, <ds>, and <details> are now treated differently. Semantic changes: Dropped <dialog>. <figure> and <details> now use <dt>/<dd> instead of <legend>. Editorial changes: Added a section on how to mark up conversations, moved the sections on footnotes and tag clouds around. Updated lots of examples. Validator changes: Changed rules for missing alt='' given the new elements.]]
( ([TIME[2009-09-15 20:09:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=3858&to=3859>

[7] [CITE@en[Web Applications 1.0 r8550   Adjust how <figure> gives captions to <img>s to exclude cases where <img>s are not alone]]
( ([TIME[2014-03-18 05:14:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8549&to=8550>

[FIG(quote)[
[FIGCAPTION[
[8] [CITE@ja[年賀状のサルを12年前と比べてみたら...デザイナーは同じ人、ヒツジでも話題に]]
([TIME[2015-12-31 14:23:03 +09:00]] 版)
<http://www.huffingtonpost.jp/2015/12/30/new-years-card-monkey-2004-and-2016_n_8893298.html>
]FIGCAPTION]

> 
> 				                	<figure>
> 									    <img src="" alt="" width="20" height="20" />
> 									</figure>
> 								    <span class="username">$USERNAME</span>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[9] [CITE@ja[時事ドットコム:文化庁の京都移転有力に=「一部機能」軸に検討-政府]]
([TIME[2015-12-31 14:45:39 +09:00]] 版)
<http://www.jiji.com/jc/zc?k=201512/2015123000492&g=pol>
]FIGCAPTION]

> 
> <div id="article-body">
>  <figure>
>  	<div class="figure" style="width:200px;float:right;">
>  	<a href="/jc/zc?g=pol&k=201512/2015123000492&p=151230kat23&rel=pv"><img src="../news/kiji_photos/151230kat23_t.jpg" align="right" ></a>
>  	<figcaption><div class="figcaption">政府機関の地方移転で、有力候補とされる文化庁が入る合同庁舎=22日、東京都千代田区</div></figcaption>
>  	</div>
>  </figure>
>  <p>
>   政府は年明け以降、

]FIG]

[FIG(quote)[
[FIGCAPTION[
[10] [CITE@ja[【今日は何の日?】あこぎという駅が開業 | 乗りものニュース]]
([TIME[2015-12-31 15:08:32 +09:00]] 版)
<http://trafficnews.jp/post/47402/>
]FIGCAPTION]

> 駅名は「あこぎ」と読みます。</p>
> <figure><a href="http://trafficnews.jp/post/47402/151231_akogi_01/"><img src="http://trafficnews.jp/assets/2015/12/151231_akogi_01-600x400.jpg"></a><figcaption>阿漕駅は津駅の隣にある(2013年4月、恵 知仁撮影)。</figcaption></figure><p>「あこぎ」という単語には

]FIG]

[FIG(quote)[
[FIGCAPTION[
[11] [CITE[【茨城新聞】つくばみらい・陽光台小披露 木を多用、開放感]]
( ([TIME[2016-05-27 19:05:42 +09:00]]))
<http://ibarakinews.jp/news/newsdetail.php?f_jun=14267651108083>
]FIGCAPTION]

> 
>                         <dl id="photo" style="width:300px;float:right;padding:5px 0px 5px 10px;">
> 			<dt style="float:left"><img src="http://ibarakinews.jp/photo/14267651108083_1.jpg" alt="廊下側の壁が三角形に空いている教室を見学する内覧会の参加者=陽光台小"></dt>
> 			<dd style="background-color:rgba(255,255,255,0.7);float:left;width:280px">廊下側の壁が三角形に空いている教室を見学する内覧会の参加者=陽光台小</dd>
> 			</dl>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[12] [CITE@ja[HTML5における<figure>タグの使い方 | UX MILK]]
( ([TIME[2016-06-03 15:39:11 +09:00]]))
<http://uxmilk.jp/33364>
]FIGCAPTION]

> <figure>タグは、図や表などをグループ化する際に使用します。

> 同じように画像などをマークアップするものに、<p>タグがありましたが、HTML5からは、図や表は<figure>でマークアップすることでより文章構造として正しいマークアップが可能になり、推奨されています。ただし、<figure>を使えるのは、独立している自己完結できる内容に限定されます。独立している内容というのは、たとえ違うページにあったり、ページのどこにあっても、コンテンツが成り立っている状態のものです。
> 画像などであっても、文章などから独立しておらず、前後のコンテンツがないと成り立たないものの場合は、<figure>タグではなく、<p>タグを利用する必要があります。

]FIG]

[13] >>12 本文読んでも「グループ化」の意味がわからなかった。
[[開始タグ]]と[[終了タグ]]で囲むことを「グループ化」と呼ぶのだろうか?

[15] >>12 どこで誰が「推奨」しているのかわからない (少なくても [[HTML Standard]]
では無さそう)。「独立」していなければ [CODE(HTMLe)@en[p]] を使え、
というのもよくわからない。

[FIG(quote)[
[FIGCAPTION[
[16] [CITE@ja[8月23日からタイ標準時を導入 | チエンマイブログ日々雑感]]
( ([TIME[2016-06-03 22:48:43 +09:00]]))
<http://payap.net/blog/2008/08/8%E6%9C%8823%E6%97%A5%E3%81%8B%E3%82%89%E3%82%BF%E3%82%A4%E6%A8%99%E6%BA%96%E6%99%82%E3%82%92%E5%B0%8E%E5%85%A5>
]FIGCAPTION]

> 
> 		<fieldset><legend>バンコク週報、タイの情報</legend>【社会】<br />   海軍・河海測量局がタイ標準時を決定・管理することが決まり、国内のテレビ・ラジオ局などは8月23日からこの標準時に従うことが義務づけられた。&#8230;&#8230;..以下略&#8230;&#8230;&#8230;&#8230;</fieldset>
> <p>明日からですが&#8230;&#8230;&#8230;.これでズレが無くなるのかな?</p>

]FIG]

[17] [CITE@en[match the W3C in preferring `footer`s instead of `figcaption`s to give attribution for `blockquote`s in `figure`s · Issue #1650 · whatwg/html]]
([TIME[2016-08-11 10:42:40 +09:00]])
<https://github.com/whatwg/html/issues/1650>

[19] [CITE@en[Expand on example and other ways of referencing]]
([[domenic]]著, [TIME[2017-07-18 04:03:25 +09:00]])
<https://github.com/whatwg/html/commit/d43036c99ab37ef1ce0c1eeaf747aa447872b155>

[20] [CITE@en[dfn what it means for elements to be “referenced” by sideshowbarker · Pull Request #2841 · whatwg/html]]
([TIME[2017-07-18 21:13:14 +09:00]])
<https://github.com/whatwg/html/pull/2841>

[21] [CITE@en[dfn what it means for elements to be “referenced” by sideshowbarker · Pull Request #2841 · whatwg/html]]
([TIME[2017-07-18 21:15:53 +09:00]])
<https://github.com/whatwg/html/pull/2841>

[22] [CITE@en[dfn what it means for elements to be “referenced”]]
([[sideshowbarker]]著, [TIME[2017-07-15 19:05:30 +09:00]])
<https://github.com/whatwg/html/commit/d0872abf29373f284c93434875e2e30d12602081>

[28] [CITE@en[25552 – Shouldn't <figure> also allow intermixed script-supporting elements (before/after the <figcaption>)?]]
([TIME[2017-07-24 15:36:27 +09:00]])
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=25552>

[29] [CITE@en[updated figure mapping to reflect figure role in core-aam]]
([[stevefaulkner]]著, [TIME[2017-11-23 21:40:02 +09:00]])
<https://github.com/w3c/html-aam/commit/037f1d93862ee027e9ed9b86f9da55347f7e5264>

[30] [CITE@en[figure/figcaption sparse flow content not valid · Issue #2450 · whatwg/html]]
([TIME[2018-01-18 13:28:25 +09:00]])
<https://github.com/whatwg/html/issues/2450>

[31] [CITE@en[Restrict the main element to be used once per document]]
([[annevk]]著, [TIME[2018-01-23 17:10:16 +09:00]])
<https://github.com/whatwg/html/commit/1dec930b3df93c799d5f3f685a46940913476086>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)