menuタグ -メニューリストを作成する｜HTML辞典

<menu>タグとは？

<menu> タグは、メニューリストを作成するためのタグです。
従来はコンテキストメニューやナビゲーションメニューを定義する目的で使用されていましたが、HTML5 では順序なしリスト（<ul>）と同様に使えます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）。

閉じタグの有無

<menu> は 開始タグ（<menu>）と閉じタグ（</menu>）の両方が必要 です。

基本的な記述方法

<menu>
    <li>ホーム</li>
    <li>サービス</li>
    <li>お問い合わせ</li>
</menu>

✅ リスト形式のメニューが表示されます。

使用できる主な属性

属性名	説明	例
type	メニューの種類（現在は非推奨）	<menu type="toolbar">

CSSを使ったデザイン変更

<menu> タグのスタイルを変更できます。

menu {
    list-style: none;
    padding: 0;
}

menu li {
    display: inline-block;
    margin: 0 10px;
}

✅ リストのマーカーが消え、横並びのメニューになります。

適切な使用例

✅ menu を使ってシンプルなナビゲーションを作成する

<menu>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
</menu>

✅ menu をボタンリストとして利用する

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

適切でない使用例（誤った使い方）

❌ <menu> を <li> なしで使用する

<!-- NG: <menu> 内に直接テキストを書く -->
<menu>
    ホーム
    サービス
    お問い合わせ
</menu>

✅ 正しい書き方（<li> を使う）

<menu>
    <li>ホーム</li>
    <li>サービス</li>
    <li>お問い合わせ</li>
</menu>

❌ <menu> を <ul> や <nav> の代わりに無理に使用する

<!-- NG: <ul> や <nav> の代わりに使用 -->
<menu>
    <li><a href="/">トップ</a></li>
    <li><a href="/news">ニュース</a></li>
</menu>

✅ <ul> や <nav> を使う方が適切な場合が多い

<ul>
    <li><a href="/">トップ</a></li>
    <li><a href="/news">ニュース</a></li>
</ul>

<menu>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<menu>	メニューリスト	<li> でリスト作成	ツールバーやボタンメニュー
<ul>	順序なしリスト	<li> を使用	一般的なリスト
<nav>	ナビゲーション	他のページへのリンク	Web サイトのグローバルナビ
<ol>	順序付きリスト	<li> を使用	番号付きリスト

使用上の注意点

✅ <menu> は <ul> の代替として使用できるが、非推奨のケースも多い

• 通常のリストには <ul> を使う方が適切。

✅ <menu> の type 属性は現在非推奨

• HTML5 では type="toolbar" などの指定は意味を持たない。

関連タグ

• <ul> – 順序なしリスト
• <ol> – 順序付きリスト
• <li> – リストの項目
• <nav> – ナビゲーションを定義

まとめ

<menu> タグは、HTML の メニューリストを作成するためのタグ です。
現在は <ul> の代替として利用できますが、特定の用途以外では推奨されていません。