VIDEO LESSON

HTMLのmenuタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

再生時間 8:03動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03エイチティーエムエルタグ編の五十一本目は、メニュータグです。
0:07メニューは、保存や複製といった操作項目をリストとしてまとめるためのタグです。
0:12見た目は普通のリストに近いのですが、並んでいるものが文章ではなく、押して使う操作である点が特徴です。
0:19今回は、よく似たユーエルとの違い、基本の書き方、ボタンとの組み合わせ、そしてメニューだけでは動かないという大切な注意点まで、
0:24順に学んでいきましょう。
0:28名前は知っていても、使いどころが分かりにくいタグの一つなので、具体例を中心に丁寧に進めます。
0:34まず、どんな場面で使うのかを整理します。
0:38メニューが向いているのは、編集画面のツールバーのように、利用者が選んで実行する操作が複数並ぶ場面です。
0:46たとえば、保存する、複製する、名前を変える、といった操作です。
0:51一つひとつの項目が、読むための情報ではなく、実行するための命令になっています。
0:57逆に、お知らせの一覧や材料のリストのように、読むことが目的の並びには、後で比べるユーエルやオーエルが向いています。
1:06並べるものが操作かどうかが、判断の分かれ目です。
1:10操作が増えるほど、まとまりの意味を正しく伝えることが、使いやすさと読み上げでの分かりやすさにつながります。
1:18基本の形を確認します。
1:20メニューは開始タグと終了タグを明示して書きます。
1:24その中に、エルアイで項目を一つずつ分け、各項目の中にボタンを置くのが基本形です。
1:30画面の例では、保存ボタンと複製ボタンが、それぞれエルアイに包まれて並んでいます。
1:37メニュー自体が項目を表すのではなく、項目の入れ物である点に注意してください。
1:43また、ボタンにはタイプ属性でボタンを指定しておくと、フォームの中で送信ボタンと誤解される事故を防げます。
1:51入れ子の順番を覚えることが第一歩です。
1:54この形は、ツールバーだけでなく、記事ごとの操作一覧など、似た場面でもそのまま応用できます。
2:01よく似たリスト系のタグと比べてみましょう。
2:05ユーエルは、買い物リストのように順番に意味がない項目の並びです。
2:11オーエルは、手順や順位のように、順番そのものに意味がある並びです。
2:17そしてメニューは、ボタンなどの操作項目の並びです。
2:22見た目はいずれも箇条書きに近く、シーエスエスで見た目を揃えることもできますが、
2:27タグの意味は異なります。
2:31ブラウザーや支援技術は、この意味の違いを手がかりに内容を伝えます。
2:37見た目ではなく、中身が何かで選ぶのが正しい使い分けです。
2:43迷ったときは、項目を読ませたいのか、押させたいのかを自問すると、選ぶタグが見えてきます。
2:51メニューの属性について説明します。
2:54この要素には、必須となる専用の属性はありません。
2:57必要に応じて、グローバル属性と呼ばれる共通の属性を使います。
3:02代表例は、文書内で一意の識別子であるアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
3:09内容の言語を示すラング、そしてアプリ独自の値を保持するデータ属性です。
3:16注意したいのは、子要素であるボタン側の属性と混同しないことです。
3:21タイプ属性などはボタンのものであって、メニューの属性ではありません。
3:26役割ごとに分けて考えましょう。
3:29クラス名は、ツールバーなど役割が分かる名前を付けると、後からスタイルを直すときにも迷いません。
3:36記事の活用事例を、もう少し広げて読み解きます。
3:40画面の例は、保存、複製、削除という三つの操作ボタンを、メニューの中に並べたものです。
3:47ポイントは二つあります。
3:49一つ目は、各ボタンをエルアイで区切ることで、操作が三項目あることが構造からも明確になることです。
3:58二つ目は、ボタンの文字を、押した結果が分かる言葉にすることです。
4:04決定や実行のような曖昧な言葉ではなく、保存、複製と具体的に書くことで、利用者が迷わず選べます。
4:12まず静的な形を作り、動作は次の段階で加えます。
4:16項目の数が増えたら、よく使う操作を前に置くなど、並び順にも利用者の視点で気を配りましょう。
4:24なぜ項目の中にボタンを置くのか、理由を確認します。
4:28メニュー自体は、あくまで項目をまとめる入れ物であり、それ自体を押して何かが起きる要素ではありません。
4:36実際に押せる要素として、操作の実行にはボタン要素、別のページへの移動にはエー要素を使います。
4:43ボタンを使えば、タブキーで項目を移動し、エンターやスペースで実行するという、
4:47キーボードの標準的な操作も自然に成り立ちます。
4:52エルアイの中にただ文字だけを書いて、クリック処理だけを付け足す書き方は避けましょう。
4:59支援技術を使う人にとっても、ボタンであることが伝わることで、操作方法の見通しが立ちやすくなります。
5:06ここが最も大切な注意点です。
5:09メニュータグを書いただけでは、パソコンの右クリックメニューのような、開閉するメニューや、
5:15矢印キーで項目を選ぶ操作が自動で付くわけではありません。
5:20見た目も、初期状態では普通のリストとほぼ同じです。
5:25ボタンを押したときの処理、たとえば保存処理や確認画面の表示は、ジャバスクリプトで別途設定します。
5:32つまりメニューの役割は、操作項目であるという意味と構造を伝えることまでです。
5:39動きは自分で実装するものだと、はっきり覚えておきましょう。
5:43見た目の開閉アニメーションも、必要ならシーエスエスと組み合わせて自分で作る範囲だと理解しておきましょう。
5:52よくある失敗も確認しておきます。
5:55一つ目は、サイト内のページ移動リンクの集まりにメニューを使ってしまうことです。
6:01主要な移動リンクのまとまりには、ナブ要素が向いています。
6:06二つ目は、読むだけの箇条書きにメニューを使うことです。
6:10それはユーエルの役割です。
6:12三つ目は、画面の例のように、エルアイを省略してボタンを直接並べてしまうことです。
6:19項目という構造が崩れるので、必ずエルアイで包みましょう。
6:23タグ名の印象ではなく、内容の意味から判断する習慣が大切です。
6:28制作前に、これは移動か、実行か、ただの情報かを項目ごとに仕分けしておくと、
6:32こうした混同を防げます。
6:36ブラウザー互換性を確認します。
6:39記事が参照するエムディーエヌの記録では、メニュー要素本体は、クロームが一以降、
6:46エッジが十二以降、ファイアフォックスが一以降、サファリが三以降と、主要ブラウザーで古くから広く対応しています。
6:53ただし、これは要素本体の対応であり、ボタンに付けた処理や新しいエーピーアイが同じように動く保証ではありません。
7:01作ったあとは、タブ、エンター、スペースといった標準のキーボード操作で使えるか、
7:08三百二十ピクセル程度の細い画面幅でも操作部分が欠けないかを、あわせて確認してください。
7:14スマートフォンやタブレットでも、ボタンが押しやすい大きさを保てているかを実機で確かめると安心です。
7:22最後にまとめです。
7:23メニュータグは、保存や複製といった操作項目をまとめるリストでした。
7:28ポイントは三つです。
7:29一つ目、基本形はメニューの中にエルアイを置き、その中にボタンを置く形であること。
7:35二つ目、読むリストであるユーエルやオーエルとは、意味で使い分けること。
7:40三つ目、メニューを書いただけでは開閉やキー操作は自動で付かず、ボタンの処理はジャバスクリプトで設定することです。
7:49練習として、編集操作のボタンを三つ、メニューとエルアイとボタンで組み立ててみてください。
7:55お疲れさまでした。
7:56まずは小さなツールバーから試し、意味に合ったタグ選びを体で覚えていくことが上達への近道です。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

menuタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。操作項目などのリスト。各項目を li にし、動作には button などを使います。

解説記事・サンプルコードを読む：HTMLのmenuタグとは？属性・使い方・ブラウザー互換性と活用例 →