SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

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

再生時間 7:35動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

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

  1. 0:00こんにちは。
  2. 0:00エイチティーエムエル、リファレンス解説です。
  3. 0:04エイチティーエムエルタグ編の四十八本目は、ナブタグです。
  4. 0:08ナブは、サイトの中の主要な移動リンクをひとまとめにするためのタグです。
  5. 0:13ページ上部にあるメインメニューを思い浮かべてください。
  6. 0:17ホームや紹介、お問い合わせといった主な行き先が並ぶ場所こそ、ナブの代表的な使いどころです。
  7. 0:24単なる箱ではなく、ここは案内の場所です、という意味をブラウザーや読み上げツールへ伝えられる点が、
  8. 0:28このタグの価値です。
  9. 0:33今回は使いどころと書き方、複数ある場合の区別まで順に学びます。
  10. 0:37初めて訪れた人が迷わず目的のページへ進めるようにすることが、ナブを用意する一番の目的です。
  11. 0:44使いどころを整理します。
  12. 0:46第一候補は、サイトの上部に置くメインメニューです。
  13. 0:50サイト全体の主なページへ移動するためのリンクが並ぶ場所です。
  14. 0:55第二に、長いページの中の目次も候補になります。
  15. 0:58このページのどこに何が書いてあるかを示し、目的の場所へ案内する役割だからです。
  16. 1:04一方で、記事の途中にある関連リンクの小さな集まりや、本文中の一つひとつのリンクまで、
  17. 1:09すべてナブで囲む必要はありません。
  18. 1:14記事でも、すべてのリンク集をナブにする必要はない、と明記されています。
  19. 1:19主要な案内かどうかが判断の軸です。
  20. 1:22現在地を示しながら上位のページへ戻れるようにする案内も、サイトの道案内としてナブの候補になります。
  21. 1:29基本の書き方を確認します。
  22. 1:31ナブには開始タグと終了タグの両方が必要で、その内側に移動のためのリンクを置きます。
  23. 1:37画面の例は最小形で、ホーム、紹介、問合せという三つのリンクをエー要素で並べています。
  24. 1:43リンク先の指定はエー要素側のエイチレフ属性で行い、ナブ自体がどこかへ移動させるわけではありません。
  25. 1:50ナブはあくまで、リンクの集まりに案内という意味を与える入れ物です。
  26. 1:55この役割分担を押さえれば、初めて書くときも迷いません。
  27. 1:59まずは、この最小形を書けるようになりましょう。
  28. 2:02書けたらブラウザーで開き、それぞれのリンクを実際に押して正しく移動できるかも確かめておきましょう。
  29. 2:10実際のサイトでは、リストと組み合わせる形がよく使われます。
  30. 2:14画面の例は記事の活用事例に近い形で、ナブの中にユーエル要素を置き、各エルアイの中にリンクを一つずつ入れています。
  31. 2:22リストで組むと、リンクが項目の集まりであることが構造からも読み取りやすくなります。
  32. 2:28また、シーエスエスで横並びや間隔を整えるときも、リストを土台にすると指定がしやすくなります。
  33. 2:34開始タグに付いているアリアラベルについては、次のセクションで詳しく扱います。
  34. 2:40まずは、ナブ、リスト、リンクという三層の構造を覚えてください。
  35. 2:44項目の数が増えても、この形なら並び順の変更や項目の追加が分かりやすく、管理もしやすくなります。
  36. 2:51一つのページにナブが複数ある場合は、区別の工夫が必要です。
  37. 2:57たとえば上部にサイト全体のメニューがあり、本文の近くにもページ内目次がある、
  38. 3:02という構成は珍しくありません。
  39. 3:06このとき、それぞれのアリアラベル属性に、教材の案内、ページ内目次といった短い名前を付けておきます。
  40. 3:16すると読み上げツールを使う人は、どの案内を聞いているのかを判別できます。
  41. 3:22記事でも、複数のナブがある場合はアリアラベルで区別する、と案内されています。
  42. 3:29名前は短く、内容が一目で分かる言葉を選ぶのがコツです。
  43. 3:34属性について確認します。
  44. 3:36ナブには、この要素専用の属性はありません。
  45. 3:39必要に応じて使うのは、アイディーやクラス、ラングなど、多くの要素に共通するグローバル属性です。
  46. 3:46たとえばクラスを付けておけば、メニュー全体の見た目をシーエスエスでまとめて指定できますし、
  47. 3:51アイディーはページ内リンクの目印にもなります。
  48. 3:57注意したいのは、リンク先を指定するエイチレフは内側のエー要素の属性だという点です。
  49. 4:03ナブ自体に付ける属性と、子要素に付ける属性を混同しないよう整理しておきましょう。
  50. 4:09覚える量が少ないのも、このタグの扱いやすさです。
  51. 4:12専用属性がない分、迷う場面は少なく、まずは内側のリンクの書き方に集中できるのも利点です。
  52. 4:19置く場所と考え方を整理します。
  53. 4:21メインメニューは、ロゴやサイト名と一緒にヘッダーの中へ置く構成が一般的です。
  54. 4:26画面の例もその形で、ヘッダーの内側にナブが入っています。
  55. 4:30ただし、ページ内目次のように本文の近くに置くナブもあります。
  56. 4:35大切なのは場所ではなく役割で判断することです。
  57. 4:38ヘッダーは導入部分全体をまとめる要素で、ナブはその中にある移動リンクのまとまりです。
  58. 4:44この二つは入れ子にできますが、意味は別物だと理解してください。
  59. 4:48逆に、案内リンクが主体でない場所には、無理にナブを置く必要はありません。
  60. 4:54見た目についての大切な確認です。
  61. 4:56ナブを使っただけでは、リンクは縦に並んだまま、メニューらしい横並びにはなりません。
  62. 5:02横並びにするのはシーエスエスの仕事です。
  63. 5:06画面の例では、リストにディスプレイ、フレックスを指定して項目を横に並べ、
  64. 5:11ギャップで間隔を空け、リストスタイルで先頭の点を消しています。
  65. 5:16記事でも、横並びにはフレックスボックスなどを使う、とされています。
  66. 5:21エイチティーエムエルでは意味を、シーエスエスでは見た目を担当させる。
  67. 5:26この分担が、セマンティックな書き方の基本です。
  68. 5:30色や文字の大きさ、下線の有無も、同様にシーエスエス側で決めるものです。
  69. 5:35よくある間違いを確認します。
  70. 5:37一つ目は、フッターの細かなリンク集や本文中の関連リンクまで、目につくリンク集を全部ナブにしてしまうことです。
  71. 5:45ナブが増えすぎると、かえってどれが主要な案内なのか分からなくなります。
  72. 5:50二つ目はリンク文字です。
  73. 5:52こちら、や、詳細はこちら、だけでは、読み上げでリンクだけを拾い読みしたときに行き先が伝わりません。
  74. 5:59行き先の名前そのものを文字にしましょう。
  75. 6:01三つ目は、ページ移動ではなく処理を実行するものはボタン要素の役割だという点です。
  76. 6:07移動はリンクとナブ、操作はボタンと、役割で使い分けてください。
  77. 6:12ブラウザー互換性を確認します。
  78. 6:14記事が参照するエムディーエヌの記録では、ナブタグはクロームが五以降、エッジが十二以降、
  79. 6:20ファイアフォックスが四以降、サファリが五以降と、主要ブラウザーで古くから対応しています。
  80. 6:26基本的な使い方で対応状況を心配する必要はほとんどありません。
  81. 6:30作ったあとの確認では、タブキーを押してリンクを順にたどれるか、エンターで移動できるかを見てください。
  82. 6:37あわせて、三百二十ピクセル程度の細い画面幅や文字を拡大した状態でも、メニューがはみ出したり欠けたりしないかを確認すると安心です。
  83. 6:45スマートフォンなどの実機でも一度メニューを開いて操作しておくと、さらに安心です。
  84. 6:51最後にまとめです。
  85. 6:52ナブタグは、主要な移動リンクのまとまりを示すタグでした。
  86. 6:57ポイントは三つです。
  87. 6:58一つ目、すべてのリンク集ではなく、サイトのメインメニューやページ内目次といった主要な案内に使うこと。
  88. 7:06二つ目、複数ある場合はアリアラベルで名前を付けて区別すること。
  89. 7:11三つ目、横並びなどの見た目はシーエスエスが担当し、ナブ自体は意味だけを与えることです。
  90. 7:18練習として、自分のページのメニュー部分をナブで囲み、名前を付けてみてください。
  91. 7:24お疲れさまでした。
  92. 7:26次回もお楽しみに。
  93. 7:27正しく使えば、目で見る人にも読み上げを使う人にも、サイトの道案内がぐっと伝わりやすくなります。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

navタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。主要な移動リンクのまとまり。すべてのリンク集を nav にする必要はありません。

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