HTML要素 ・ ページ構造
<nav>
ナビゲーション
サイト内の主要なリンクのまとまり（グローバルナビゲーションやパンくずなど）を表す要素です。
01
サンプルコード
HTML
1<nav aria-label="メイン">
2 <ul>
3 <li><a href="/" aria-current="page">ホーム</a></li>
4 <li><a href="/menu">メニュー</a></li>
5 <li><a href="/access">アクセス</a></li>
6 </ul>
7</nav>
CSS
1nav ul {
2 display: flex;
3 gap: 20px;
4 margin: 0;
5 padding: 0;
6 list-style: none;
7}
8nav a {
9 color: #201f1d;
10 text-decoration: none;
11}
12nav a[aria-current="page"] {
13 color: #b68235;
14 border-bottom: 2px solid;
15}
02
実行結果
ブラウザでの表示
03
解説
nav は、ページの主要なナビゲーションを囲む要素です。読み上げソフトの利用者は、nav に直接移動してメニューを使えます。
リンクの集まりは、ul と li でリストにして nav の中に入れるのが定番です。
1ページに nav が複数あるときは、aria-label で「メイン」「パンくず」のように名前を付けて区別します。
04
応用例・注意点
nav を使う場面
| 場面 | 説明 |
|---|---|
グローバルナビ | サイト全体の主要メニュー |
パンくずリスト | 現在地までの階層 |
目次 | ページ内リンクの一覧 |
ページ送り | 前へ・次へのリンク |
パンくずリスト
現在地を示すリンクの並びにも nav を使います。
HTML
1<nav aria-label="パンくず">
2 <a href="/">ホーム</a> /
3 <a href="/css/">CSS辞典</a> /
4 <span aria-current="page">margin</span>
5</nav>
注意点
- 01フッターの細かいリンクまで、すべてを nav にする必要はありません。主要なものだけに使います。
- 02現在のページのリンクには aria-current="page" を付けると、現在地が伝わります。