English 中文 العربية 日本語 Português

<menu>: MENU 要素

最終更新：2026-10-13

<menu>MENU 要素

コマンドやメニュー項目のリストを表します。ツールバーやコンテキストメニューに使われ、<li> や <button> を含められます。

カテゴリフォーム
コンテンツモデルフローコンテンツ
許可される親要素フローコンテンツを受け入れる要素
閉じタグ必要 </menu> タグ
ステータス標準

📝 構文

<menu>
  <li><button>コピー</button></li>
  <li><button>貼り付け</button></li>
</menu>

⚙️ 属性

この要素はグローバル属性に加え、以下の属性をサポートします：

属性値説明
typeMenu type: toolbar (default) or context.
labelA human-readable label, often for context menus.
すべてのグローバル属性を見る → すべてのイベント属性を見る →

▶ サンプル

下のコードを編集して、playground でリアルタイム結果を確認：

▶ 試してみる

🌐 ブラウザサポート

ブラウザ ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<menu> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
すべての主要ブラウザでサポート
ヒント： menu は <ul> に似ていますがコマンドリストを意味します。レンダリング対応はブラウザーによって異なるため、単純なリストには <ul> を使いましょう。

❓ よくある質問

Qmenu と nav の違いは何ですか？
A意味が近く、歴史も絡み合っています。HTML5 は最終的に <menu> を「ツールバー／コマンドメニュー」と定義し、<ul> と意味的に同等にしました。サイトのナビゲーションは <nav>、アプリ内のツールバーやショートカットコマンドのリストには <menu> を使えます。実務では menu の使用率はかなり低いです。
Qmenu で右クリックメニューは作れますか？
Aかつては作れました。旧仕様には contextmenu 属性と menu/menuitem の方式がありましたが、完全に廃止され、主要ブラウザはどこも実装していません。独自の右クリックメニューは現在、JS とカスタム DOM で実装するしかありません。
Qmenu の中の項目はどう書きますか？
A<ul> と同じく、子項目は <li> です。コマンド系のメニューでは各 li の中に <button> を置くのが最もおすすめです（元々フォーカスとキーボード操作に対応）。メニューのコンテナには role と aria-label を加えると、アクセシビリティがさらに良くなります。
<ul> <li> <button>
今後さらにケーススタディを追加予定です。

📚 関連チュートリアル

HTML タグリファレンス
すべての HTML タグの構文・属性・例を確認できます。
Web-Tutorial.com

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

100%