HTML Living Standard/menu
menu 要素
[編集]<menu> 要素は、コマンドまたはオプションのリストを表すために使用されます。この要素は、ユーザーインターフェイスのコンテキストメニューや設定メニューなど、特定の用途に適したリストを作成するために設計されています。
基本構造
[編集]以下は、<menu> 要素の基本的な例です：
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Menu Example</title> </head> <body> <menu> <li><a href="/new">新規作成</a></li> <li><a href="/open">開く</a></li> <li><a href="/save">保存</a></li> </menu> </body> </html>
この例では、<menu> 要素内に複数のリスト項目（<li> 要素）が含まれています。
用途と特徴
[編集]<menu> 要素は、特に以下のような場合に有効です：
- ユーザーインターフェイスのコンテキストメニューを表現する。
- ツールバーやアプリケーションメニューを表現する。
- ナビゲーションを補完するための特定のオプションリストを提供する。
ただし、一般的なナビゲーションリストには <ul> や <ol> を使用するのが一般的です。
属性
[編集]HTML Living Standardにおいて、<menu>要素のtype属性は有効ではありません。
なぜtype属性が使用できないのか？
[編集]- 廃止された属性: HTML5の仕様がHTML Living Standardに移行する際に、多くの要素や属性が廃止または再定義されました。
<menu>要素のtype属性もその一つであり、現在は使用することができません。 - よりセマンティックな要素: HTML Living Standardでは、より明確な意味を持つ要素が導入されており、
<menu>要素のtype属性で表現していた機能は、これらの要素を用いて実現することが推奨されています。
代替方法
[編集]<menu>要素のtype属性の代わりに、以下の要素や属性を用いて、同様の機能を実現することができます。
<nav>要素: ナビゲーションメニュー全体を囲みます。<ul>要素: リスト形式のメニューを作成します。<ol>要素: 番号付きリスト形式のメニューを作成します。<menu>要素: コンテキストメニューやツールバーなどを表します。- ただし、
<menu>要素自体も、HTML Living Standardでは一部の機能が制限されています。
- ただし、
例
[編集]<menu type="contextmenu"> <li><a href="#">コピー</a></li> <li><a href="#">貼り付け</a></li> </menu> <nav aria-label="コンテキストメニュー"> <ul> <li><a href="#">コピー</a></li> <li><a href="#">貼り付け</a></li> </ul> </nav>
まとめ
[編集]HTML Living Standardでは、<menu>要素のtype属性は使用できなくなりました。よりセマンティックな要素を用いて、目的とする機能を実現するようにしましょう。
- 補足
-
- ARIA属性: アクセシビリティを向上させるために、ARIA属性（aria-labelなど）を適切に利用することも重要です。
- CSS: CSSを利用して、メニューの外観をカスタマイズすることができます。
その他
[編集]HTML Living Standardは常に更新されており、新たな仕様が追加されることがあります。最新の情報を把握するためには、MDN Web Docsなどの公式ドキュメントを参照することをおすすめします。
ネストされたメニュー
[編集]<menu> 要素内に別の <menu> 要素を含めることで、階層的なメニューを作成できます。
- 例：
<menu> <li>ファイル <menu> <li><a href="/new">新規作成</a></li> <li><a href="/open">開く</a></li> <li><a href="/save">保存</a></li> </menu> </li> <li>編集 <menu> <li><a href="/cut">切り取り</a></li> <li><a href="/copy">コピー</a></li> <li><a href="/paste">貼り付け</a></li> </menu> </li> </menu>
アクセシビリティ
[編集]<menu> 要素は、スクリーンリーダーなどの支援技術でメニューとして認識されます。ただし、適切なラベル付けやキーボード操作のサポートを考慮する必要があります。
例として、ARIA属性を用いたアクセシビリティ対応：
<menu aria-label="編集メニュー"> <li><a href="/cut">切り取り</a></li> <li><a href="/copy">コピー</a></li> <li><a href="/paste">貼り付け</a></li> </menu>
CSS を使用したスタイリング
[編集]<menu> 要素は、リスト形式のデフォルトスタイルを持つため、CSS を使用して見た目をカスタマイズできます。
- 例：
<menu style="list-style-type: none; padding: 0;"> <li style="display: inline; margin-right: 10px;"><a href="/home">ホーム</a></li> <li style="display: inline; margin-right: 10px;"><a href="/about">概要</a></li> <li style="display: inline;"><a href="/contact">連絡先</a></li> </menu>
この例では、メニュー項目を横並びに表示しています。
使用例
[編集]シンプルなメニュー
[編集]<menu> <li><a href="/help">ヘルプ</a></li> <li><a href="/settings">設定</a></li> <li><a href="/logout">ログアウト</a></li> </menu>
ツールバー形式
[編集]<menu type="toolbar"> <li><a href="/undo">元に戻す</a></li> <li><a href="/redo">やり直す</a></li> </menu>
コンテキストメニュー
[編集]<menu type="context"> <li><a href="/refresh">再読み込み</a></li> <li><a href="/inspect">検証</a></li> </menu>
注意点
[編集]- サポート状況:
- 一部のブラウザでは
<menu>要素が完全にはサポートされていない場合があります。実装状況を確認してください。 - ⇒ HTML element: menu -- Can I use
- 一部のブラウザでは
- 用途の適合性:
- アクセシビリティ:
- 必要に応じて、ARIA 属性やキーボード操作のサポートを追加してください。