WEBVTT

1
00:00:00.000 --> 00:00:00.788
こんにちは。

2
00:00:00.788 --> 00:00:03.679
エイチティーエムエル、リファレンス解説です。

3
00:00:03.679 --> 00:00:07.620
エイチティーエムエルタグ編の五十一本目は、メニュータグです。

4
00:00:07.620 --> 00:00:12.613
メニューは、保存や複製といった操作項目をリストとしてまとめるためのタグです。

5
00:00:12.613 --> 00:00:19.182
見た目は普通のリストに近いのですが、並んでいるものが文章ではなく、押して使う操作である点が特徴です。

6
00:00:19.182 --> 00:00:24.043
今回は、よく似たユーエルとの違い、基本の書き方、ボタンとの組み合わせ、そしてメニューだけでは動かないという大切な注意点まで、

7
00:00:24.043 --> 00:00:28.904
順に学んでいきましょう。

8
00:00:28.904 --> 00:00:34.948
名前は知っていても、使いどころが分かりにくいタグの一つなので、具体例を中心に丁寧に進めます。

9
00:00:34.948 --> 00:00:38.141
まず、どんな場面で使うのかを整理します。

10
00:00:38.141 --> 00:00:46.282
メニューが向いているのは、編集画面のツールバーのように、利用者が選んで実行する操作が複数並ぶ場面です。

11
00:00:46.282 --> 00:00:51.231
たとえば、保存する、複製する、名前を変える、といった操作です。

12
00:00:51.231 --> 00:00:57.457
一つひとつの項目が、読むための情報ではなく、実行するための命令になっています。

13
00:00:57.457 --> 00:01:06.556
逆に、お知らせの一覧や材料のリストのように、読むことが目的の並びには、後で比べるユーエルやオーエルが向いています。

14
00:01:06.556 --> 00:01:10.387
並べるものが操作かどうかが、判断の分かれ目です。

15
00:01:10.387 --> 00:01:18.848
操作が増えるほど、まとまりの意味を正しく伝えることが、使いやすさと読み上げでの分かりやすさにつながります。

16
00:01:18.848 --> 00:01:20.599
基本の形を確認します。

17
00:01:20.599 --> 00:01:24.419
メニューは開始タグと終了タグを明示して書きます。

18
00:01:24.419 --> 00:01:30.787
その中に、エルアイで項目を一つずつ分け、各項目の中にボタンを置くのが基本形です。

19
00:01:30.787 --> 00:01:37.154
画面の例では、保存ボタンと複製ボタンが、それぞれエルアイに包まれて並んでいます。

20
00:01:37.154 --> 00:01:43.203
メニュー自体が項目を表すのではなく、項目の入れ物である点に注意してください。

21
00:01:43.203 --> 00:01:51.480
また、ボタンにはタイプ属性でボタンを指定しておくと、フォームの中で送信ボタンと誤解される事故を防げます。

22
00:01:51.480 --> 00:01:54.505
入れ子の順番を覚えることが第一歩です。

23
00:01:54.505 --> 00:02:01.668
この形は、ツールバーだけでなく、記事ごとの操作一覧など、似た場面でもそのまま応用できます。

24
00:02:01.668 --> 00:02:05.580
よく似たリスト系のタグと比べてみましょう。

25
00:02:05.580 --> 00:02:11.540
ユーエルは、買い物リストのように順番に意味がない項目の並びです。

26
00:02:11.540 --> 00:02:17.687
オーエルは、手順や順位のように、順番そのものに意味がある並びです。

27
00:02:17.687 --> 00:02:22.343
そしてメニューは、ボタンなどの操作項目の並びです。

28
00:02:22.343 --> 00:02:27.093
見た目はいずれも箇条書きに近く、シーエスエスで見た目を揃えることもできますが、

29
00:02:27.093 --> 00:02:31.842
タグの意味は異なります。

30
00:02:31.842 --> 00:02:37.989
ブラウザーや支援技術は、この意味の違いを手がかりに内容を伝えます。

31
00:02:37.989 --> 00:02:43.204
見た目ではなく、中身が何かで選ぶのが正しい使い分けです。

32
00:02:43.204 --> 00:02:51.400
迷ったときは、項目を読ませたいのか、押させたいのかを自問すると、選ぶタグが見えてきます。

33
00:02:51.400 --> 00:02:54.064
メニューの属性について説明します。

34
00:02:54.064 --> 00:02:57.826
この要素には、必須となる専用の属性はありません。

35
00:02:57.826 --> 00:03:02.527
必要に応じて、グローバル属性と呼ばれる共通の属性を使います。

36
00:03:02.527 --> 00:03:09.423
代表例は、文書内で一意の識別子であるアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、

37
00:03:09.423 --> 00:03:16.319
内容の言語を示すラング、そしてアプリ独自の値を保持するデータ属性です。

38
00:03:16.319 --> 00:03:21.334
注意したいのは、子要素であるボタン側の属性と混同しないことです。

39
00:03:21.334 --> 00:03:26.663
タイプ属性などはボタンのものであって、メニューの属性ではありません。

40
00:03:26.663 --> 00:03:29.014
役割ごとに分けて考えましょう。

41
00:03:29.014 --> 00:03:36.380
クラス名は、ツールバーなど役割が分かる名前を付けると、後からスタイルを直すときにも迷いません。

42
00:03:36.380 --> 00:03:40.437
記事の活用事例を、もう少し広げて読み解きます。

43
00:03:40.437 --> 00:03:47.846
画面の例は、保存、複製、削除という三つの操作ボタンを、メニューの中に並べたものです。

44
00:03:47.846 --> 00:03:49.963
ポイントは二つあります。

45
00:03:49.963 --> 00:03:58.430
一つ目は、各ボタンをエルアイで区切ることで、操作が三項目あることが構造からも明確になることです。

46
00:03:58.430 --> 00:04:04.074
二つ目は、ボタンの文字を、押した結果が分かる言葉にすることです。

47
00:04:04.074 --> 00:04:12.365
決定や実行のような曖昧な言葉ではなく、保存、複製と具体的に書くことで、利用者が迷わず選べます。

48
00:04:12.365 --> 00:04:16.422
まず静的な形を作り、動作は次の段階で加えます。

49
00:04:16.422 --> 00:04:24.360
項目の数が増えたら、よく使う操作を前に置くなど、並び順にも利用者の視点で気を配りましょう。

50
00:04:24.360 --> 00:04:28.257
なぜ項目の中にボタンを置くのか、理由を確認します。

51
00:04:28.257 --> 00:04:36.051
メニュー自体は、あくまで項目をまとめる入れ物であり、それ自体を押して何かが起きる要素ではありません。

52
00:04:36.051 --> 00:04:43.222
実際に押せる要素として、操作の実行にはボタン要素、別のページへの移動にはエー要素を使います。

53
00:04:43.222 --> 00:04:47.976
ボタンを使えば、タブキーで項目を移動し、エンターやスペースで実行するという、

54
00:04:47.976 --> 00:04:52.731
キーボードの標準的な操作も自然に成り立ちます。

55
00:04:52.731 --> 00:04:59.278
エルアイの中にただ文字だけを書いて、クリック処理だけを付け足す書き方は避けましょう。

56
00:04:59.278 --> 00:05:06.916
支援技術を使う人にとっても、ボタンであることが伝わることで、操作方法の見通しが立ちやすくなります。

57
00:05:06.916 --> 00:05:09.205
ここが最も大切な注意点です。

58
00:05:09.205 --> 00:05:15.092
メニュータグを書いただけでは、パソコンの右クリックメニューのような、開閉するメニューや、

59
00:05:15.092 --> 00:05:20.979
矢印キーで項目を選ぶ操作が自動で付くわけではありません。

60
00:05:20.979 --> 00:05:25.067
見た目も、初期状態では普通のリストとほぼ同じです。

61
00:05:25.067 --> 00:05:32.917
ボタンを押したときの処理、たとえば保存処理や確認画面の表示は、ジャバスクリプトで別途設定します。

62
00:05:32.917 --> 00:05:39.130
つまりメニューの役割は、操作項目であるという意味と構造を伝えることまでです。

63
00:05:39.130 --> 00:05:43.873
動きは自分で実装するものだと、はっきり覚えておきましょう。

64
00:05:43.873 --> 00:05:52.376
見た目の開閉アニメーションも、必要ならシーエスエスと組み合わせて自分で作る範囲だと理解しておきましょう。

65
00:05:52.376 --> 00:05:55.006
よくある失敗も確認しておきます。

66
00:05:55.006 --> 00:06:01.416
一つ目は、サイト内のページ移動リンクの集まりにメニューを使ってしまうことです。

67
00:06:01.416 --> 00:06:06.019
主要な移動リンクのまとまりには、ナブ要素が向いています。

68
00:06:06.019 --> 00:06:10.457
二つ目は、読むだけの箇条書きにメニューを使うことです。

69
00:06:10.457 --> 00:06:12.594
それはユーエルの役割です。

70
00:06:12.594 --> 00:06:19.168
三つ目は、画面の例のように、エルアイを省略してボタンを直接並べてしまうことです。

71
00:06:19.168 --> 00:06:23.771
項目という構造が崩れるので、必ずエルアイで包みましょう。

72
00:06:23.771 --> 00:06:28.702
タグ名の印象ではなく、内容の意味から判断する習慣が大切です。

73
00:06:28.702 --> 00:06:32.729
制作前に、これは移動か、実行か、ただの情報かを項目ごとに仕分けしておくと、

74
00:06:32.729 --> 00:06:36.756
こうした混同を防げます。

75
00:06:36.756 --> 00:06:39.061
ブラウザー互換性を確認します。

76
00:06:39.061 --> 00:06:46.285
記事が参照するエムディーエヌの記録では、メニュー要素本体は、クロームが一以降、

77
00:06:46.285 --> 00:06:53.509
エッジが十二以降、ファイアフォックスが一以降、サファリが三以降と、主要ブラウザーで古くから広く対応しています。

78
00:06:53.509 --> 00:07:01.962
ただし、これは要素本体の対応であり、ボタンに付けた処理や新しいエーピーアイが同じように動く保証ではありません。

79
00:07:01.962 --> 00:07:08.263
作ったあとは、タブ、エンター、スペースといった標準のキーボード操作で使えるか、

80
00:07:08.263 --> 00:07:14.565
三百二十ピクセル程度の細い画面幅でも操作部分が欠けないかを、あわせて確認してください。

81
00:07:14.565 --> 00:07:22.096
スマートフォンやタブレットでも、ボタンが押しやすい大きさを保てているかを実機で確かめると安心です。

82
00:07:22.096 --> 00:07:23.420
最後にまとめです。

83
00:07:23.420 --> 00:07:28.277
メニュータグは、保存や複製といった操作項目をまとめるリストでした。

84
00:07:28.277 --> 00:07:29.748
ポイントは三つです。

85
00:07:29.748 --> 00:07:35.635
一つ目、基本形はメニューの中にエルアイを置き、その中にボタンを置く形であること。

86
00:07:35.635 --> 00:07:40.786
二つ目、読むリストであるユーエルやオーエルとは、意味で使い分けること。

87
00:07:40.786 --> 00:07:49.027
三つ目、メニューを書いただけでは開閉やキー操作は自動で付かず、ボタンの処理はジャバスクリプトで設定することです。

88
00:07:49.027 --> 00:07:55.502
練習として、編集操作のボタンを三つ、メニューとエルアイとボタンで組み立ててみてください。

89
00:07:55.502 --> 00:07:56.826
お疲れさまでした。

90
00:07:56.826 --> 00:08:03.596
まずは小さなツールバーから試し、意味に合ったタグ選びを体で覚えていくことが上達への近道です。