<menu>: メニュー要素
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<menu> は HTML の要素で、HTML 仕様書では <ul> とは異なる意味づけとして記述されていますが、ブラウザーでは <ul> と違いのないものとして扱われます（そしてアクセシビリティツリーで公開されます）。これは（<li> 要素で表現される）項目の順序のないリストを表します。
試してみましょう
<div class="news">
<a href="#">NASA’s Webb Delivers Deepest Infrared Image of Universe Yet</a>
<menu>
<li><button id="save">Save for later</button></li>
<li><button id="share">Share this news</button></li>
</menu>
</div>
.news {
background-color: bisque;
padding: 1em;
border: solid thin black;
}
menu {
list-style-type: none;
display: flex;
padding: 0;
margin-bottom: 0;
gap: 1em;
}
属性
この要素にはグローバル属性があります。
使用上の注意
<menu> 要素と <ul> 要素はともに順序なしリストの項目を表すものです。主な違いは、<ul> は主に項目の表示を目的とするのに対し、 <menu> 要素は操作を行うための対話型の項目のためのものです。関連する <menuitem> 要素は非推奨になりました。
メモ:
HTML 仕様書の初期の版では、<menu> 要素にはコンテキストメニューとしての追加の用途がありました。この機能は廃止されたと考えており、仕様書にはありません。
例
ツールバー
この例では、<menu> を編集アプリケーションのためのツールバーを生成するために使用しています。
HTML
html
<menu>
<li><button onclick="copy()">コピー</button></li>
<li><button onclick="cut()">切り取り</button></li>
<li><button onclick="paste()">貼り付け</button></li>
</menu>
なお、機能的には次のものと違いはありません。
html
<ul>
<li><button onclick="copy()">コピー</button></li>
<li><button onclick="cut()">切り取り</button></li>
<li><button onclick="paste()">貼り付け</button></li>
</ul>
CSS
css
menu,
ul {
display: flex;
list-style: none;
padding: 0;
width: 400px;
}
li {
flex-grow: 1;
}
button {
width: 100%;
}
結果
技術的概要
| コンテンツカテゴリー | |
|---|---|
| 許可されている内容 |
0 個以上の |
| タグの省略 | なし。開始タグと終了タグの両方が必須です。 |
| 許可されている親要素 | フローコンテンツを受け入れるすべての要素 |
| 暗黙の ARIA ロール |
list
|
| 許可されている ARIA ロール |
directory, group,
listbox, menu, menubar,
none, presentation,
radiogroup, tablist,
toolbar or tree
|
| DOM インターフェイス | HTMLMenuElement |
仕様書
| Specification |
|---|
| HTML # the-menu-element |
ブラウザーの互換性
Loading…