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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
|
---
title: <menu>
slug: Web/HTML/Element/menu
tags:
- HTML
- HTML 対話型コンテンツ
- 'HTML:フローコンテンツ'
- 'HTML:知覚可能コンテンツ'
- Reference
- Web
- ウェブ
- サイトナビゲーション
- メニュー
- ユーザーインターフェイス
- 要素
translation_of: Web/HTML/Element/menu
---
<div>{{HTMLRef}}{{SeeCompatTable}}</div>
<p><strong>HTML の <code><menu></code> 要素</strong>は、ユーザーが実行またはアクティブ化可能なコマンドのグループを表します。これはスクリーンの上部にあるリストメニューや、ボタンを押したときにボタンの下部に現れるような<a href="/en-US/docs/Web/HTML/Element/menu#Context_menu">コンテキストメニュー</a>を含みます。</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ja/docs/Web/HTML/Content_categories">コンテンツカテゴリ</a></th>
<td>
<p><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。要素の子が1個以上の {{HTMLElement("li")}} 要素を含んでいる場合は<a href="/ja/docs/Web/Guide/HTML/Content_categories#Palpable_content">知覚可能コンテンツ</a>。</p>
</td>
</tr>
<tr>
<th scope="row">許可されている内容</th>
<td>
<p>要素が<em>リストメニュー</em>状態である場合: <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>または0個以上の {{HTMLElement("li")}}, {{HTMLElement("script")}}, {{HTMLElement("template")}}。 (<em>リストメニュー</em>は、親要素が<em>コンテキストメニュー</em>状態の {{HTMLElement("menu")}} でない場合の既定の状態です。)</p>
<p>要素が<em>コンテキストメニュー</em>状態である場合は、任意の順序で、0個以上の {{HTMLElement("menu")}} (コンテキストメニュー状態に限る), {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}}, {{HTMLElement("template")}}。</p>
</td>
</tr>
<tr>
<th scope="row">タグの省略</th>
<td>{{No_Tag_Omission}}</td>
</tr>
<tr>
<th scope="row">許可されている親要素</th>
<td><a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>を受け入れるすべての要素</td>
</tr>
<tr>
<th scope="row">許可されている ARIA ロール</th>
<td>なし</td>
</tr>
<tr>
<th scope="row">DOM インターフェイス</th>
<td>{{DOMxRef("HTMLMenuElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="Attributes" name="Attributes">属性</h2>
<p>この要素には<a href="/ja/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">グローバル属性</a>があります。</p>
<dl>
<dt>{{HTMLAttrDef("label")}} {{Deprecated_inline}}</dt>
<dd>ユーザーに対して表示する、メニューの名称です。入れ子のメニューで、サブメニューへアクセスできるようにするためにラベルを与えます。親要素が<em>コンテキストメニュー</em>状態の {{HTMLElement("menu")}} である場合に限り、必須です。</dd>
<dt>{{HTMLAttrDef("type")}}</dt>
<dd>この属性は定義済みのメニューの種類を示すものであり、以下2つの値のいずれかを指定します。
<ul>
<li><code>context</code> {{Deprecated_inline}} : <em>ポップアップメニュー</em>状態であり、他の要素を経由してアクティブになるコマンドのグループを表します。 {{HTMLElement("button")}} 要素の {{HTMLAttrxRef("menu", "button")}} 属性や、 <a href="/ja/docs/Web/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> 属性を持つ要素を経由することが考えられます。 <code><menu></code> 要素が別の menu 要素の入れ子になっているとき、親要素がすでにこの状態であれば、子要素で値が指定されていない場合の既定値になります。</li>
<li><code>toolbar</code>: <em>ツールバー</em>状態であり、ユーザーと対話するための一連のコマンドを表します。これは {{HTMLElement("li")}} が並んだ番号なしリストの形か、子要素に <code><li></code> を含まない場合は、利用できるコマンドを記述した<a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>です。属性が指定されていない場合の既定値です。</li>
</ul>
</dd>
</dl>
<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
<p>{{HTMLElement("menu")}} 要素と {{HTMLElement("ul")}} 要素はともに順序なしリストの項目を表すものですが、 {{HTMLElement("ul")}} は主に項目の表示を目的とするのに対し、 {{HTMLElement("menu")}} 要素は操作を行うための対話型の項目を含めるためのものです。</p>
<p>HTML メニューは、コンテキストメニュー（一般的に、別の要素を右クリックすると表示される）またはツールバーを作成するために使用できます。</p>
<p><strong>{{anch("Context menu", "コンテキストメニュー")}}</strong>は、「メニューで選択可能な項目を表す {{HTMLElement("menuitem")}} 要素」「メニュー内のサブメニューを表す <code><menu></code> 要素」「メニューの内容をセクションに分けるセパレーター行を表す {{HTMLElement("hr")}} 要素」を包含する <code><menu></code> 要素で構成されます。. コンテキストメニューは、関連付ける要素の {{HTMLAttrxRef("contextmenu")}} 属性、または {{anch("Button menu", "ボタンでアクティブにするメニュー")}} であれば {{HTMLElement("button")}} 要素の {{HTMLAttrxRef("menu", "button")}} 属性を使用して、メニューをアクティブ化する要素に紐づけます。</p>
<p><strong>{{anch("Toolbar", "ツールバーメニュー")}}</strong> は、以下のいずれかをコンテンツにした <code><menu></code> 要素で構成されます: {{HTMLElement("li")}} 要素で表した項目の順不同リスト (それぞれの項目が、ユーザーが利用できるコマンドやオプションを表します)。または、(<code><li></code> 要素がない場合) 使用なコマンドやオプションを表す <a href="/ja/docs/Web/HTML/Content_categories#Flow_content">フローコンテンツ</a>。</p>
<p>この要素は HTML4 で非推奨になりましたが、 HTML5.1 および HTML living standard で再導入されました。本ドキュメントは、現行の Firefox の実装について説明します。 HTML 5.1 によって、type 属性の 'list' が 'toolbar' に変わりました。</p>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Context_menu" name="Context_menu">コンテキストメニュー</h3>
<p>{{Deprecated_header}}</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html;"><!-- A <div> element with a context menu -->
<div contextmenu="popup-menu">
Right-click to see the adjusted context menu
</div>
<menu type="context" id="popup-menu">
<menuitem>Action</menuitem>
<menuitem>Another action</menuitem>
<hr/>
<menuitem>Separated action</menuitem>
</menu>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css;">div {
width: 300px;
height: 80px;
background-color: lightgreen;
}
</pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample("Context_menu", "100%", 80)}}</p>
<h3 id="Menu_button" name="Menu_button">メニューボタン</h3>
<div class="blockIndicator warning">
<p>メニューボタンを実装しているブラウザーはまだありません。 <code><menu></code> 要素の {{HTMLAttrxRef("type", "menu")}} 属性は廃止されました。</p>
</div>
<div class="blockIndicator warning">
<p>{{HTMLElement("menuitem")}} 要素は廃止されました。</p>
</div>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html;"><!-- A button, which displays a menu when clicked. -->
<button type="menu" menu="popup-menu">
Dropdown
</button>
<menu type="context" id="popup-menu">
<menuitem>Action</menuitem>
<menuitem>Another action</menuitem>
<hr/>
<menuitem>Separated action</menuitem>
</menu>
</pre>
<h4 id="Result_2" name="Result_2">結果</h4>
<p>{{EmbedLiveSample("Menu_button", "100%", 50)}}</p>
<h3 id="Toolbar" name="Toolbar">ツールバー</h3>
<div class="blockIndicator warning">
<p>ツールバーメニューを実装しているブラウザーはまだありません。</p>
</div>
<h4 id="HTML_3">HTML</h4>
<pre class="brush: html;"><!-- A context menu for a simple editor,
- containing two menu buttons. -->
<menu type="toolbar">
<li>
<button type="menu" menu="file-menu">File</button>
<menu type="context" id="file-menu">
<menuitem label="New..." onclick="newFile()">
<menuitem label="Save..." onclick="saveFile()">
</menu>
</li>
<li>
<button type="menu" menu="edit-menu">Edit</button>
<menu type="context" id="edit-menu">
<menuitem label="Cut..." onclick="cutEdit()">
<menuitem label="Copy..." onclick="copyEdit()">
<menuitem label="Paste..." onclick="pasteEdit()">
</menu>
</li>
</menu>
</pre>
<h4 id="Result_3" name="Result_3">結果</h4>
<p>{{EmbedLiveSample("Toolbar", "100%", 100)}}</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", "grouping-content.html#the-menu-element", "<menu>")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>最新のスナップショット {{SpecName("HTML5.3")}} から変更なし</td>
</tr>
<tr>
<td>{{SpecName("HTML5.1", "interactive-elements.html#the-menu-element", "<menu>")}}</td>
<td>{{Spec2("HTML5.1")}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("html.elements.menu")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>他のリスト関連 HTML 要素: {{HTMLElement("ol")}}, {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("hr")}} および廃止済の {{HTMLElement("dir")}}</li>
<li><a href="/ja/docs/Web/HTML/Global_attributes#attr-contextmenu"><code>contextmenu</code></a> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>: {{HTMLAttrxRef("type", "menu", 'type="context"')}} がついた <code>menu</code> の <code>id</code> を参照するために使用することができる</li>
</ul>
|
