<menu></menu>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / 内容にli要素を含む場合：パルパブル・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | li要素を0個以上 / スクリプトサポート要素 |
menu要素は、リスト項目で構成されるツールバー（操作メニュー）を表します。ツールバー内の項目は、この要素内に配置するli要素で表すことになります。
- デフォルトスタイル（上下マージン、左パディング）
<menu>
<li><button onclick="...">操作項目A</button></li>
<li><button onclick="...">操作項目B</button></li>
<li><button onclick="...">操作項目C</button></li>
</menu>
menu要素を使用すると、ユーザーが操作できるツールバーを作成することができます。
とはいえ、見た目に関してはul要素と変わらないため、ツールバー風に表現するためには別途CSSの設定が必要です。menu要素は、その内容がツールバーであるということを意味的に表すものとなります。
要素のデフォルトスタイル
一般的なブラウザでは、この要素の上下に1em程度のマージン、左に50px程度のパディングが入ります。
以下は、1つ目のメニューはテキストで、2つ目のメニューはボタンで作成しています。
- 上記のように、デフォルトではリストマーカーが表示されてしまいます。
- 旧HTMLからの変更点
-
- HTML5：menu要素が廃止されました。
- HTML5.1：menu要素が再定義されました。（ポップアップメニュー）
- HTML5.2：menu要素が再度廃止されました。
- HTML LS：menu要素が再々定義されました。（リスト項目で構成されるツールバー）
使用例
<menu>
<li><button onclick="alert('操作A')">操作項目A</button></li>
<li><button onclick="alert('操作B')">操作項目B</button></li>
<li><button onclick="alert('操作C')">操作項目C</button></li>
</menu>
- 表示例
<!DOCTYPE html>
<html>
<head>
<title>文書のタイトル</title>
<style>
menu {
margin: 0;
padding: 5px;
background-color: #c0c0c0;
}
menu li {
display: inline-block;
}
</style>
</head>
<body>
<menu>
<li><button onclick="alert('操作A')">操作項目A</button></li>
<li><button onclick="alert('操作B')">操作項目B</button></li>
<li><button onclick="alert('操作C')">操作項目C</button></li>
</menu>
</body>
</html>
- 表示例