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
|
---
title: '<figure>: キャプションが付けられる図要素'
slug: Web/HTML/Element/figure
tags:
- Element
- HTML
- HTML grouping content
- Information
- Presentation
- Reference
- figure
translation_of: Web/HTML/Element/figure
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML の <code><figure></code> (キャプションが付けられる図) 要素</strong>は、図表などの自己完結型のコンテンツを表し、任意で {{HTMLElement("figcaption")}} 要素を使用して表されるキャプションを付けることができます。</span>図、すなわちキャプションとその中身は一つの単位として参照されます。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></th>
<td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>, <a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots">区分化ルート</a>, 知覚可能コンテンツ</td>
</tr>
<tr>
<th scope="row">許可されている内容</th>
<td>{{HTMLElement("figcaption")}} 要素とそれに続く<a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>、またはフローコンテンツとそれに続く {{HTMLElement("figcaption")}} 要素、またはフローコンテンツ</td>
</tr>
<tr>
<th scope="row">タグの省略</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">許可されている親要素</th>
<td><a href="/ja/docs/Web/Guide/HTML/Content_categories#flow_content">フローコンテンツ</a>を受け入れるすべての要素</td>
</tr>
<tr>
<th scope="row">暗黙の ARIA ロール</th>
<td><a href="/ja/docs/Web/Accessibility/ARIA/Roles/Figure_Role">figure</a></td>
</tr>
<tr>
<th scope="row">許可されている ARIA ロール</th>
<td>子孫に <a href="/ja/docs/Web/HTML/Element/figcaption">figcaption</a> がない場合: <a href="https://www.w3.org/TR/html-aria/#dfn-any-role">any</a>、それ以外の場合は許可されているロールなし</td>
</tr>
<tr>
<th scope="row">DOM インターフェイス</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes">属性</h2>
<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみがあります。</p>
<h2 id="Usage_notes">使用上のメモ</h2>
<ul>
<li>ふつう <code><figure></code> は画像、イラスト、グラフ、コードの断片など、文書の本文の流れから参照されるものの、本文の流れに影響を与えることなく、文書のほかの部分や付録に移動することが可能なものに用います。</li>
<li><a href="/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots">区分化ルート</a>となり、 <code><figure></code> 要素のコンテンツのアウトラインは、文書の本文のアウトラインから除外されます。</li>
<li>キャプションは <code><figure></code> 要素の中に (最初または最後の子要素として) {{HTMLElement("figcaption")}} 要素を挿入することで表すことができます。図の中で最初に見つかった最初の <code><figcaption></code> 要素が図のキャプションとして表示されます。</li>
</ul>
<h2 id="Examples">例</h2>
<h3 id="Images">画像</h3>
<pre class="brush: html"><!-- 単なる画像 -->
<figure>
<img
src="https://developer.mozilla.org/static/img/favicon144.png"
alt="美しい MDN のロゴ">
</figure>
<!-- キャプションが付いた画像 -->
<figure>
<img
src="https://developer.mozilla.org/static/img/favicon144.png"
alt="美しい MDN のロゴ">
<figcaption>MDN ロゴ</figcaption>
</figure>
</pre>
<div>{{EmbedLiveSample("Images", "100%", 375)}}</div>
<h3 id="Code_snippets">コードスニペット</h3>
<pre class="brush: html"><figure>
<figcaption>Get browser details using <code>navigator</code>.</figcaption>
<pre>
function NavigatorExample() {
var txt;
txt = "Browser CodeName: " + navigator.appCodeName + "; ";
txt+= "Browser Name: " + navigator.appName + "; ";
txt+= "Browser Version: " + navigator.appVersion + "; ";
txt+= "Cookies Enabled: " + navigator.cookieEnabled + "; ";
txt+= "Platform: " + navigator.platform + "; ";
txt+= "User-agent header: " + navigator.userAgent + "; ";
console.log("NavigatorExample", txt);
}
</pre>
</figure></pre>
<div>{{EmbedLiveSample("Code_snippets", "100%", 250)}}</div>
<h3 id="Quotations">引用</h3>
<pre class="brush: html"><figure>
<figcaption><cite>Edsger Dijkstra:</cite></figcaption>
<blockquote>デバッグがソフトウェアのバグを取るプロセスであるならば、
プログラミングはそれを入れるプロセスだ。</blockquote>
</figure>
</pre>
<div>{{EmbedLiveSample("Quotations")}}</div>
<h3 id="Poems">詩</h3>
<pre class="brush: html"><figure>
<p style="white-space:pre">
Bid me discourse, I will enchant thine ear,
Or like a fairy trip upon the green,
Or, like a nymph, with long dishevell'd hair,
Dance on the sands, and yet no footing seen:
Love is a spirit all compact of fire,
Not gross to sink, but light, and will aspire.</p>
<figcaption><cite>Venus and Adonis</cite>,
by William Shakespeare</figcaption>
</figure></pre>
<div>{{EmbedLiveSample("Poems", "100%", 250)}}</div>
<h2 id="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}</td>
<td>{{Spec2('HTML5.2')}}</td>
<td>HTML 5.0 から変更なし</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.elements.figure")}}</p>
<h2 id="See_also">関連情報</h2>
<ul>
<li>{{HTMLElement("figcaption")}} 要素</li>
</ul>
|
