【navタグ】でナビゲーションを使ってみよう！「HTML・解説・初心者向け」｜ノブレコ
nobreco
<nav>ナビゲーションについて知ろう！
★<nav>の特徴：
・タグのカテゴリ ―― ブロックレベル要素。
・コンテンツモデル ―― フローコンテンツ・セクショニングコンテンツ・パルパブルコンテンツ。
・タグの省略 ―― 不可。
（開始タグ・終了タグが必須）
・使用可能な親要素 ―― フローコンテンツを許容する親要素すべて。
・グローバル属性を持つ。
・ARIAロール ―― 標準でnavigationロールを持つ。
<nav>の説明
<nav>とは、「navigation （ナビゲーション）」の略で、案内・道標を意味するタグです。
主要メニューをナビゲーションするために用いられます。
HTML5から導入されました。
<nav>は、スクリーンリーダーで音声で読み上げる場合に「メニューを読み飛ばす」こともできたり、「簡単にメニューに戻れる」などの機能を使うことができる要素です。
使用する子要素には例えば、<h>・<div>・<ol><ul><li>・<a>などの要素が挙げられます。
ナビゲーションはリンクありきなので<a>は必ず使用します。
<nav>での案内には次の２パターンに分けれます。
※主にグローバルメニューを作成するために用いります。
１．グローバルナビゲーション（グローバルメニュー）
主要コンテンツをまとめたリンクメニューをナビゲーションし、サイト全体（各ページ）に共有するもの。
(主にヘッダーのグローバルメニューや、サイドバーのナビゲーションなどに使用する)
２．ローカルナビゲーション（ローカルメニュー）
特定の範囲や階層のリンクメニューをナビゲーションし、ページ内で共有するもの。
(主にユーザーの利便性を高める道標を示すために、メインコンテンツのリストなどで使用する）
<nav>使用上の注意点：
① 複数指定は可能だが、主要なメニューにだけ使用する。（例えば、グローバルメニューとローカルメニューの２つなど）
② footer要素にも指定できるが、無理にナビゲーションしなくてよい。(情報が少ない場合などは特に)
③ <nav>の直下に見出しがあると、スクリーンリーダーで区別しやすくなる。
④ 便利でも多用することは避ける。（区別が混乱し、読み飛ばしやジャンプが間違った結果になる恐れがある）
⑤ もしも多用する場合には、区別をしっかりつけること。（aria-label属性で<nav>の名前に区別を付けるなど）
アクセシビリティでの注意点：
<nav>要素には、標準でnavigationロールがあります。
<nav>のARIAロールは、スクリーンリーダーでの利便性が大きく向上します。
ですが、便利だからと多用は禁物です。
なぜかというと、このnavgationロールは「ランドマーク」として扱われます。
navigationロールはスクリーンリーダーで「ナビゲーションランドマーク」と読み上げられます。
なので複数の<nav>をあちこちに使用していると、どの<nav>も同じナビゲーションランドマークとして判断されるため、区別がつきにくくなってリーダーの混乱を招く恐れがあるのです。
ですから、名前を適切に付けるなどの対策をしない限りは、多用しないようにする注意が必要です。
あくまで使用目的は、「主要メニュー」「読み飛ばしたい場所」「ジャンプしたい場所」に絞って使用するのが好ましいです。
<nav>の記述例：
★使用するHTML
例）CSSを使ったサンプルコード１
横並び＋背景色
★CSS
文字の間隔はwidthの値で調整します。
★実行結果
hover時の背景色を追加
★CSS
先ほどのcssにnav li:hoverを追加したら、値にbackground-colorを指定し色を選ぶ。
★実行結果
マウスホバーした場所が青色になりました。
メニューを斜線で区切る＋ホバー
★CSS
・display:flex; ―― 横並びにする。
・frex-grow: ―― display:flex;の主軸寸法を伸ばす。
・border-right； ―― テキストの右側に縦線が入る。
・transform:skewX；―― 縦線とテキストを斜めにできる。
※nav aのtransform:skewX;の値を（ー）にすることでテキストのみを縦表示にしています。
★実行結果
transformを使った変形は他にも記述パターンがあるので、自分が使いやすいものを探してみてください。
例）CSSを使ったサンプルコード２
★使用するHTML
横並び＋斜線＋ホバー時に下線を表示する
★CSS
★実行結果
こんな感じで、シンプルで分かりやすいメニュー表示ができます。
横並び＋背景色＋ホバー時に文字が濃くなる
★CSS
★実行結果
ホバー時に、homeの文字が灰色になるようにしてみました。
まとめ
この記事では、<nav>タグについての解説をしました。
ナビゲーションは、音声読み上げを飛ばせたり、その場所にジャンプできたりと便利な要素です。
主にヘッダーやメインコンテンツ内などで適切に使用するといいでしょう。
ロールのアクセシビリティでの利便性も高いので、主要メニューで是非使用してみてください。
最後まで読んでいただき、ありがとうございました༼ つ ◕_◕ ༽つ
【関連する構造化タグの情報】
