-
Notifications
You must be signed in to change notification settings - Fork 4
/
792.txt
196 lines (146 loc) · 10.3 KB
/
792.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
[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]]
[[要素]]を使うべきか迷うのであれば、使わなくて構いません。
* 歴史
[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日からこの標準時に従うことが義務づけられた。……..以下略…………</fieldset>
> <p>明日からですが……….これでズレが無くなるのかな?</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>