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
|
---
title: '<summary>: 概要明示要素'
slug: Web/HTML/Element/summary
tags:
- Disclosure Box
- Disclosure Control
- Disclosure Summary
- Element
- HTML
- HTML interactive elements
- Reference
- Summary
- Web
translation_of: Web/HTML/Element/summary
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML の概要明示要素</strong> (<strong><code><summary></code></strong>) は、 {{HTMLElement("details")}} 要素の内容の要約、キャプション、説明、凡例を表します。</span> <code><summary></code> 要素をクリックすると、親の <code><details></code> 要素の開閉状態を切り替えることができます。</p>
<div>{{EmbedInteractiveExample("pages/tabbed/summary.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">許可されている内容</th>
<td><a href="/ja/docs/Web/Guide/HTML/Content_categories#Phrasing_content">記述コンテンツ</a>。または <a href="/ja/docs/Web/Guide/HTML/Content_categories#Heading_content">見出しコンテンツ</a> のうちひとつの要素</td>
</tr>
<tr>
<th scope="row">タグの省略</th>
<td>不可。開始タグと終了タグの両方が必要。</td>
</tr>
<tr>
<th scope="row">許可されている親要素</th>
<td>{{HTMLElement("details")}} 要素</td>
</tr>
<tr>
<th scope="row">暗黙の ARIA ロール</th>
<td><code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></td>
</tr>
<tr>
<th scope="row">許可されている ARIA ロール</th>
<td>許可されている <code>role</code> なし</td>
</tr>
<tr>
<th scope="row">DOM インターフェイス</th>
<td>{{domxref("HTMLElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>この要素は<a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>のみを持ちます。</p>
<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
<p><code><summary></code> 要素の中身には、見出しコンテンツ、プレーンテキスト、段落内で使用できる HTML が入れられます。</p>
<p><code><summary></code> 要素は、 <code><details></code> 要素の最初の子として<em>のみ</em>使用できます。ユーザーが概要をクリックすると、親の <code><details></code> 要素が開閉し、 <code><details></code> 要素に {{event("toggle")}} イベントが送信され、状態が変化したことを知るために使用することができます。</p>
<h3 id="Default_label_text" name="Default_label_text">既定のラベルテキスト</h3>
<p><code><details></code> 要素の最初の子が <code><summary></code> 要素でない場合、{{Glossary("user agent", "ユーザーエージェント")}}は既定の文字列 (ふつうは「詳細」) を折りたたみボックスのラベルとして使用します。</p>
<h3 id="Default_style" name="Default_style">既定のスタイル</h3>
<p>HTML 標準では、<code><summary></code> の既定のスタイルに <code>display:list-item</code> が含まれています。これで、ラベルの隣に既定で (多くは三角形で) 表示される折りたたみウィジェットのとして表示さえるアイコンを変更したり削除したりすることができます。</p>
<p>スタイルを <code>display:block</code> に変更すると、展開用の三角印を削除することができます。</p>
<p>詳しくは{{anch("Browser compatibility", "ブラウザーの互換性")}}の節をご覧ください。すべてのブラウザーがこの要素の機能すべてに対応しているわけではありません。</p>
<h2 id="Examples" name="Examples">例</h2>
<p>以下に <code><summary></code> を使用している例をいくつか示します。 {{HTMLElement("details")}} 要素のドキュメントにもいくつか例があります。</p>
<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
<p>{{HTMLElement("details")}} 要素の中で <code><summary></code> の使用を示す簡単な例です。</p>
<pre class="brush: html notranslate"><details open>
<summary>Overview</summary>
<ol>
<li>Cash on hand: $500.00</li>
<li>Current invoice: $75.30</li>
<li>Due date: 5/6/19</li>
</ol>
</details></pre>
<p>{{EmbedLiveSample("Basic_example", 650, 120)}}</p>
<h3 id="Summaries_as_headings" name="Summaries_as_headings">見出しとしての概要</h3>
<p>次のように、 <code><summary></code> の中で見出し要素を使用することができます。</p>
<pre class="brush: html notranslate"><details open>
<summary><h4>Overview</h4></summary>
<ol>
<li>Cash on hand: $500.00</li>
<li>Current invoice: $75.30</li>
<li>Due date: 5/6/19</li>
</ol>
</details></pre>
<p>{{EmbedLiveSample("Summaries_as_headings", 650, 120)}}</p>
<p>これは現在のところ、間隔の問題をいくつか抱えており、 CSS を使用して修正することができます。</p>
<div class="blockIndicator warning">
<p><strong>警告:</strong> <code><summary></code> 要素の既定のロールは <a href="/ja/docs/Web/Accessibility/ARIA/Roles/button_role">button</a> (子要素からはすべてのロールを外す) ですので、この例は読み上げソフトのような支援技術のユーザーには動作しません。 <code><h4></code> のロールが削除されますので、これらのユーザーからは見出しとして扱われなくなります。</p>
</div>
<h3 id="HTML_in_summaries" name="HTML_in_summaries">概要の中の HTML</h3>
<p>この例は、 <code><summary></code> 要素にいくらか意味を追加して、ラベルを重要であると示します。</p>
<pre class="brush: html notranslate"><details open>
<summary><strong>Overview</strong></summary>
<ol>
<li>Cash on hand: $500.00</li>
<li>Current invoice: $75.30</li>
<li>Due date: 5/6/19</li>
</ol>
</details></pre>
<p>{{EmbedLiveSample("HTML_in_summaries", 650, 120)}}</p>
<h2 id="Specifications" name="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', 'interactive-elements.html#the-summary-element', '<summary>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '<summary>')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("html.elements.summary")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{HTMLElement("details")}}</li>
</ul>
|
