<menu>タグの解説
<menu>は、ユーザーが操作可能なメニューを提供する場合に使用します。メニューは順序のないリストという意味で<ul>と同じですが、HTMLの仕様書では別の扱いとなっています。
メニュー項目は<li>を使って作成します。マークアップの基本はリスト要素である<ol>や<ul>と変わりありません。文章に対して何らかの文脈を持つ項目を並べたい場合はリストを、画面の中で操作可能な機能の項目を提供したい場合はメニューを採用します。
かつてtype属性を用いてコンテキストメニューを提供する機能も開発されていましたが、廃止されました。それに伴い、コンテキストメニューのパーツとして用意された<menuitem>も非推奨の扱いになっています。
<menu>タグの特徴
- レイアウトの初期値はブロックレベルです。文章の改行に影響を与えます。
- 視覚的な効果は特定されていません。ブラウザの実装状況に依存します。
- 同一のページ内に複数使うことができます。コンテキストメニューの場合、この要素自体を入れ子にすることも許可されています。
<menu>要素に指定できる属性
type（廃止）- メニューの形式を選択します。現状、選べるのは二種類です。
toolbar：ユーザーが操作可能なツールバーを提供します。基本的には<li>で項目を作成します。context：画面上の要素で起動できるポップアップメニューを提供します。インターフェイスはOSの右クリックメニューのようなものを想定します。
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<menu>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。子要素として配置できるのは、<li>、<script>、<template>のいずれかになります。
<menu>
// ユーザーが操作可能な機能
</menu>
以下のようにページの中で動作するボタン類をまとめる場合、<ol>や<ul>要素よりもメニューの方が相応しいと言えます。
<menu>
<li><button onclick="play()">再生</button></li>
<li><button onclick="stop()">停止</button></li>
<li><button onclick="prev()">前の曲</button></li>
<li><button onclick="next()">次の曲</button></li>
<li><button onclick="paus()">一時停止</button></li>
</menu>
スタイルシートを使ってオーディオの操作パネルのようなものを再現できます。提供するサービスの内容によってボタンの名前を変えて、期待する結果をJavaScriptで返すように設定すれば、実際の環境でも使用できます。
.sample-block {
padding: 1rem;
border-radius: 5px;
background-color: #333;
}
.sample-block menu {
display: flex;
padding: 0;
margin: 0;
list-style-type: "";
}
.sample-block menu li {
flex-grow: 1;
}
.sample-block menu button {
inline-size: 100%;
cursor: pointer;
}