過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong><nav></strong> はページ内・サイト内の<strong>主要ナビゲーションリンク</strong>を含むセクションを表すセマンティック要素</li><li>使い所: <strong>グローバルナビ</strong> / <strong>パンくず</strong> / <strong>目次 (TOC)</strong> / <strong>ページネーション</strong></li><li>フッターの利用規約リンクなど<strong>すべてのリンクを nav で囲む必要はない</strong> &mdash; 主要なものに限定</li><li>複数の nav を置く場合は <code>aria-label</code> または <code>aria-labelledby</code> で役割を区別する</li><li>スクリーンリーダーは nav をランドマークとして読み上げ、利用者は領域単位でジャンプできる &mdash; アクセシビリティ向上</li><li>関連: <a href="https://jpn.itlibra.com/article/10170">セクション要素</a> / <a href="https://jpn.itlibra.com/article/10172">header 要素</a></li></ul></td></tr></table>
<h2>nav 要素とは</h2>

<p><strong>nav 要素</strong>は HTML5 で追加されたセマンティック要素で、<strong>ナビゲーションリンクを含むセクション</strong>であることを明示します。グローバルナビゲーション、サイドメニュー、パンくず、目次、ページネーションなど「ユーザーを別ページ・別セクションに案内するためのリンク群」を囲むために使います。</p>

<p>div で囲んでも見た目は同じですが、nav にすることでブラウザ・スクリーンリーダー・検索エンジンが「ここはナビ領域」と認識し、アクセシビリティと SEO の両面で意味を持ちます。</p>

<h2>基本構文</h2><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><nav>
  <ul>
    <li><a href="/">トップ</a></li>
    <li><a href="/about">サービス紹介</a></li>
    <li><a href="/blog">ブログ</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav></code></pre>
<p>典型的にはリストでマークアップし、CSS で横並びやドロワーに整形します。</p>

<h2>主な利用パターン</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>パターン</th><th>説明</th><th>aria-label の例</th></tr></thead>
<tbody>
<tr><td>グローバルナビ</td><td>サイト全体のメインメニュー</td><td>"global"</td></tr>
<tr><td>パンくず (breadcrumb)</td><td>現在地までの階層リンク</td><td>"breadcrumb"</td></tr>
<tr><td>サイドナビ</td><td>カテゴリ別の下層リンク</td><td>"sidebar"</td></tr>
<tr><td>目次 (TOC)</td><td>長文記事の見出し一覧</td><td>"toc"</td></tr>
<tr><td>ページネーション</td><td>1, 2, 3, ... のページ送り</td><td>"pagination"</td></tr>
<tr><td>フッターナビ</td><td>フッター内のメインリンク</td><td>"footer"</td></tr>
</tbody>
</table>

<h2>複数の nav を区別する</h2>

<p>1 ページに nav が複数あるとスクリーンリーダーが「nav, nav, nav...」と読んでしまい区別できません。<strong><code>aria-label</code></strong> または <strong><code>aria-labelledby</code></strong> で役割を明示しましょう。</p><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><nav aria-label="global">
  <ul><li><a href="/">Home</a></li>...</ul>
</nav>

<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/category">Category</a></li>
    <li aria-current="page">Current</li>
  </ol>
</nav></code></pre>
<h2>nav を使うべきでない例</h2>

<ul>
<li>フッターのコピーライト・利用規約・プライバシーリンクだけのまとまり &mdash; 主要ナビではないので不要</li>
<li>記事本文中の「関連リンク」 &mdash; aside の方が適切な場合が多い</li>
<li>ロゴをトップに戻すための単一リンク &mdash; nav で囲む必要なし</li>
<li>ソーシャルアイコン群 &mdash; ul + aside / div で十分</li>
</ul>

<p>WHATWG 仕様は「<em>主要 (major)</em> なナビゲーションブロックのみ」と明記しています。すべてのリンク集合に nav をつける必要はありません。</p>

<h2>パンくずでの典型実装</h2><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><nav aria-label="breadcrumb">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/category"><span itemprop="name">Category</span></a>
      <meta itemprop="position" content="2" />
    </li>
  </ol>
</nav></code></pre>
<p>Schema.org の BreadcrumbList を付与すると、Google の検索結果にパンくずが表示されやすくなります。</p>

<h2>アクセシビリティ上のメリット</h2>

<ul>
<li>スクリーンリーダーは nav を<strong>ランドマーク</strong>として扱い、利用者が領域単位でジャンプ可能</li>
<li>JAWS / NVDA の「ナビゲーションリンク一覧」コマンドで nav 内のリンクだけ抽出できる</li>
<li>キーボード利用者にも領域の切り替えが伝わる</li>
</ul>

<h2>SEO の観点</h2>

<p>Google は HTML5 セマンティック要素を解析に利用しており、nav 内のリンクは「ナビゲーション系」と認識されます。直接の順位ブーストは公表されていませんが、構造化されたページは<strong>クロール効率・ユーザー行動指標</strong>の両面で有利と考えられます。</p>

<h2>関連要素</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>要素</th><th>役割</th></tr></thead>
<tbody>
<tr><td><header></td><td>ページや section の冒頭領域（ロゴ + nav を入れることが多い）</td></tr>
<tr><td><footer></td><td>ページや section の末尾領域</td></tr>
<tr><td><aside></td><td>本文から離れた補足（サイドバーの「関連記事」など）</td></tr>
<tr><td><main></td><td>そのページの主たるコンテンツ（nav は main の外が一般的）</td></tr>
</tbody>
</table>

<h2>モバイルメニュー（ハンバーガー）の実装パターン</h2>

<p>近年の Web サイトでは、画面幅が狭い場合に nav を折りたたんでハンバーガーアイコンで開閉するのが標準です。アクセシビリティを担保するには次の要素が必要。</p>

<ul>
<li>ボタン側に <strong>aria-expanded</strong>（展開状態）と <strong>aria-controls</strong>（対応する nav の id）を付与</li>
<li>nav 側には<strong>非表示時 <code>hidden</code> 属性または <code>display:none</code></strong> を付け、スクリーンリーダーから隠す</li>
<li>キーボードのみで操作できるように、ハンバーガーボタンを <strong><button type="button"></strong> で実装</li>
<li>Esc キーで閉じる JS をつけると親切</li>
</ul>

<h2>nav の入れ子は OK か</h2>

<p>WHATWG 仕様上、nav の中に nav を入れることは禁止されていません。とはいえ意味的に混乱するため、<strong>1 ページ内で複数の nav を並列に置く</strong>方が一般的です。サイドナビをグローバルナビの内側に書きたくなった場合は、入れ子ではなく独立した nav として並べましょう。</p>

<h2>FAQ</h2>

<p><strong>Q: nav 内に ul を必ず使う？</strong><br />
A: 必須ではない。div + a でも良いが、リンク集合はリスト構造が論理的に正しい。</p>

<p><strong>Q: nav にも heading（h1〜h6）を入れていい？</strong><br />
A: 入れて良い。「メニュー」「目次」など、ナビの主題を見出しで示すと aria-labelledby と組み合わせやすい。</p>

<p><strong>Q: モバイルのハンバーガーメニューも nav？</strong><br />
A: 中身がグローバルナビなら nav で囲む。aria-expanded / aria-controls で展開状態を持たせるのが定番。</p>

<p>関連: <a href="https://jpn.itlibra.com/article/10170">HTML セクション要素</a> / <a href="https://jpn.itlibra.com/article/10172">header 要素</a></p>