WEBVTT

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

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

3
00:00:04.205 --> 00:00:08.410
エイチティーエムエルタグ編の四十八本目は、ナブタグです。

4
00:00:08.410 --> 00:00:13.667
ナブは、サイトの中の主要な移動リンクをひとまとめにするためのタグです。

5
00:00:13.667 --> 00:00:17.721
ページ上部にあるメインメニューを思い浮かべてください。

6
00:00:17.721 --> 00:00:24.480
ホームや紹介、お問い合わせといった主な行き先が並ぶ場所こそ、ナブの代表的な使いどころです。

7
00:00:24.480 --> 00:00:28.835
単なる箱ではなく、ここは案内の場所です、という意味をブラウザーや読み上げツールへ伝えられる点が、

8
00:00:28.835 --> 00:00:33.190
このタグの価値です。

9
00:00:33.190 --> 00:00:37.846
今回は使いどころと書き方、複数ある場合の区別まで順に学びます。

10
00:00:37.846 --> 00:00:44.604
初めて訪れた人が迷わず目的のページへ進めるようにすることが、ナブを用意する一番の目的です。

11
00:00:44.604 --> 00:00:46.485
使いどころを整理します。

12
00:00:46.485 --> 00:00:50.403
第一候補は、サイトの上部に置くメインメニューです。

13
00:00:50.403 --> 00:00:55.104
サイト全体の主なページへ移動するためのリンクが並ぶ場所です。

14
00:00:55.104 --> 00:00:58.709
第二に、長いページの中の目次も候補になります。

15
00:00:58.709 --> 00:01:04.821
このページのどこに何が書いてあるかを示し、目的の場所へ案内する役割だからです。

16
00:01:04.821 --> 00:01:09.444
一方で、記事の途中にある関連リンクの小さな集まりや、本文中の一つひとつのリンクまで、

17
00:01:09.444 --> 00:01:14.067
すべてナブで囲む必要はありません。

18
00:01:14.067 --> 00:01:19.552
記事でも、すべてのリンク集をナブにする必要はない、と明記されています。

19
00:01:19.552 --> 00:01:22.217
主要な案内かどうかが判断の軸です。

20
00:01:22.217 --> 00:01:29.896
現在地を示しながら上位のページへ戻れるようにする案内も、サイトの道案内としてナブの候補になります。

21
00:01:29.896 --> 00:01:31.782
基本の書き方を確認します。

22
00:01:31.782 --> 00:01:37.729
ナブには開始タグと終了タグの両方が必要で、その内側に移動のためのリンクを置きます。

23
00:01:37.729 --> 00:01:43.821
画面の例は最小形で、ホーム、紹介、問合せという三つのリンクをエー要素で並べています。

24
00:01:43.821 --> 00:01:50.929
リンク先の指定はエー要素側のエイチレフ属性で行い、ナブ自体がどこかへ移動させるわけではありません。

25
00:01:50.929 --> 00:01:55.716
ナブはあくまで、リンクの集まりに案内という意味を与える入れ物です。

26
00:01:55.716 --> 00:01:59.632
この役割分担を押さえれば、初めて書くときも迷いません。

27
00:01:59.632 --> 00:02:02.968
まずは、この最小形を書けるようになりましょう。

28
00:02:02.968 --> 00:02:10.076
書けたらブラウザーで開き、それぞれのリンクを実際に押して正しく移動できるかも確かめておきましょう。

29
00:02:10.076 --> 00:02:14.267
実際のサイトでは、リストと組み合わせる形がよく使われます。

30
00:02:14.267 --> 00:02:22.360
画面の例は記事の活用事例に近い形で、ナブの中にユーエル要素を置き、各エルアイの中にリンクを一つずつ入れています。

31
00:02:22.360 --> 00:02:28.285
リストで組むと、リンクが項目の集まりであることが構造からも読み取りやすくなります。

32
00:02:28.285 --> 00:02:34.932
また、シーエスエスで横並びや間隔を整えるときも、リストを土台にすると指定がしやすくなります。

33
00:02:34.932 --> 00:02:40.424
開始タグに付いているアリアラベルについては、次のセクションで詳しく扱います。

34
00:02:40.424 --> 00:02:44.904
まずは、ナブ、リスト、リンクという三層の構造を覚えてください。

35
00:02:44.904 --> 00:02:51.696
項目の数が増えても、この形なら並び順の変更や項目の追加が分かりやすく、管理もしやすくなります。

36
00:02:51.696 --> 00:02:57.100
一つのページにナブが複数ある場合は、区別の工夫が必要です。

37
00:02:57.100 --> 00:03:02.037
たとえば上部にサイト全体のメニューがあり、本文の近くにもページ内目次がある、

38
00:03:02.037 --> 00:03:06.975
という構成は珍しくありません。

39
00:03:06.975 --> 00:03:16.105
このとき、それぞれのアリアラベル属性に、教材の案内、ページ内目次といった短い名前を付けておきます。

40
00:03:16.105 --> 00:03:22.813
すると読み上げツールを使う人は、どの案内を聞いているのかを判別できます。

41
00:03:22.813 --> 00:03:29.893
記事でも、複数のナブがある場合はアリアラベルで区別する、と案内されています。

42
00:03:29.893 --> 00:03:34.924
名前は短く、内容が一目で分かる言葉を選ぶのがコツです。

43
00:03:34.924 --> 00:03:36.715
属性について確認します。

44
00:03:36.715 --> 00:03:39.850
ナブには、この要素専用の属性はありません。

45
00:03:39.850 --> 00:03:46.865
必要に応じて使うのは、アイディーやクラス、ラングなど、多くの要素に共通するグローバル属性です。

46
00:03:46.865 --> 00:03:51.940
たとえばクラスを付けておけば、メニュー全体の見た目をシーエスエスでまとめて指定できますし、

47
00:03:51.940 --> 00:03:57.015
アイディーはページ内リンクの目印にもなります。

48
00:03:57.015 --> 00:04:03.135
注意したいのは、リンク先を指定するエイチレフは内側のエー要素の属性だという点です。

49
00:04:03.135 --> 00:04:09.106
ナブ自体に付ける属性と、子要素に付ける属性を混同しないよう整理しておきましょう。

50
00:04:09.106 --> 00:04:12.688
覚える量が少ないのも、このタグの扱いやすさです。

51
00:04:12.688 --> 00:04:19.256
専用属性がない分、迷う場面は少なく、まずは内側のリンクの書き方に集中できるのも利点です。

52
00:04:19.256 --> 00:04:21.406
置く場所と考え方を整理します。

53
00:04:21.406 --> 00:04:26.852
メインメニューは、ロゴやサイト名と一緒にヘッダーの中へ置く構成が一般的です。

54
00:04:26.852 --> 00:04:30.865
画面の例もその形で、ヘッダーの内側にナブが入っています。

55
00:04:30.865 --> 00:04:35.165
ただし、ページ内目次のように本文の近くに置くナブもあります。

56
00:04:35.165 --> 00:04:38.462
大切なのは場所ではなく役割で判断することです。

57
00:04:38.462 --> 00:04:44.481
ヘッダーは導入部分全体をまとめる要素で、ナブはその中にある移動リンクのまとまりです。

58
00:04:44.481 --> 00:04:48.924
この二つは入れ子にできますが、意味は別物だと理解してください。

59
00:04:48.924 --> 00:04:54.084
逆に、案内リンクが主体でない場所には、無理にナブを置く必要はありません。

60
00:04:54.084 --> 00:04:56.571
見た目についての大切な確認です。

61
00:04:56.571 --> 00:05:02.944
ナブを使っただけでは、リンクは縦に並んだまま、メニューらしい横並びにはなりません。

62
00:05:02.944 --> 00:05:06.052
横並びにするのはシーエスエスの仕事です。

63
00:05:06.052 --> 00:05:11.260
画面の例では、リストにディスプレイ、フレックスを指定して項目を横に並べ、

64
00:05:11.260 --> 00:05:16.467
ギャップで間隔を空け、リストスタイルで先頭の点を消しています。

65
00:05:16.467 --> 00:05:21.596
記事でも、横並びにはフレックスボックスなどを使う、とされています。

66
00:05:21.596 --> 00:05:26.881
エイチティーエムエルでは意味を、シーエスエスでは見た目を担当させる。

67
00:05:26.881 --> 00:05:30.456
この分担が、セマンティックな書き方の基本です。

68
00:05:30.456 --> 00:05:35.896
色や文字の大きさ、下線の有無も、同様にシーエスエス側で決めるものです。

69
00:05:35.896 --> 00:05:37.880
よくある間違いを確認します。

70
00:05:37.880 --> 00:05:45.530
一つ目は、フッターの細かなリンク集や本文中の関連リンクまで、目につくリンク集を全部ナブにしてしまうことです。

71
00:05:45.530 --> 00:05:50.489
ナブが増えすぎると、かえってどれが主要な案内なのか分からなくなります。

72
00:05:50.489 --> 00:05:52.189
二つ目はリンク文字です。

73
00:05:52.189 --> 00:05:59.132
こちら、や、詳細はこちら、だけでは、読み上げでリンクだけを拾い読みしたときに行き先が伝わりません。

74
00:05:59.132 --> 00:06:01.966
行き先の名前そのものを文字にしましょう。

75
00:06:01.966 --> 00:06:07.633
三つ目は、ページ移動ではなく処理を実行するものはボタン要素の役割だという点です。

76
00:06:07.633 --> 00:06:12.025
移動はリンクとナブ、操作はボタンと、役割で使い分けてください。

77
00:06:12.025 --> 00:06:14.085
ブラウザー互換性を確認します。

78
00:06:14.085 --> 00:06:20.057
記事が参照するエムディーエヌの記録では、ナブタグはクロームが五以降、エッジが十二以降、

79
00:06:20.057 --> 00:06:26.030
ファイアフォックスが四以降、サファリが五以降と、主要ブラウザーで古くから対応しています。

80
00:06:26.030 --> 00:06:30.149
基本的な使い方で対応状況を心配する必要はほとんどありません。

81
00:06:30.149 --> 00:06:37.014
作ったあとの確認では、タブキーを押してリンクを順にたどれるか、エンターで移動できるかを見てください。

82
00:06:37.014 --> 00:06:45.801
あわせて、三百二十ピクセル程度の細い画面幅や文字を拡大した状態でも、メニューがはみ出したり欠けたりしないかを確認すると安心です。

83
00:06:45.801 --> 00:06:51.293
スマートフォンなどの実機でも一度メニューを開いて操作しておくと、さらに安心です。

84
00:06:51.293 --> 00:06:52.720
最後にまとめです。

85
00:06:52.720 --> 00:06:57.158
ナブタグは、主要な移動リンクのまとまりを示すタグでした。

86
00:06:57.158 --> 00:06:58.743
ポイントは三つです。

87
00:06:58.743 --> 00:07:06.668
一つ目、すべてのリンク集ではなく、サイトのメインメニューやページ内目次といった主要な案内に使うこと。

88
00:07:06.668 --> 00:07:11.581
二つ目、複数ある場合はアリアラベルで名前を付けて区別すること。

89
00:07:11.581 --> 00:07:18.397
三つ目、横並びなどの見た目はシーエスエスが担当し、ナブ自体は意味だけを与えることです。

90
00:07:18.397 --> 00:07:24.578
練習として、自分のページのメニュー部分をナブで囲み、名前を付けてみてください。

91
00:07:24.578 --> 00:07:26.005
お疲れさまでした。

92
00:07:26.005 --> 00:07:27.431
次回もお楽しみに。

93
00:07:27.431 --> 00:07:34.881
正しく使えば、目で見る人にも読み上げを使う人にも、サイトの道案内がぐっと伝わりやすくなります。