Skip to content

12. nav とメニュー構造（nav + ul/li + a）

navの中にul > li > aでメニューを組むと、「ここがナビだ」と機械にも人にも伝わるメニューが作れます。

•beginnernavmenuulliaariaaccessibility
目次
まず結論（1行）
最小の書き方（コピペで動く最小コード）
重要ポイント（ここで迷いがち）
例で理解（よく使うパターン 4つ）
1) ヘッダーのグローバルナビ（基本形）2) 現在地を示す（aria-current）3) フッターナビ（“補助リンク”として）4) サイドメニュー（同一ページ内リンク ）
使い分け（似た要素/属性との違い）
実務のコツ（SEO/安全/アクセシビリティ）
NG・禁止例（事故る書き方）
NG1）navの中がリンクじゃない（意味が弱い）NG2）メニュー項目をbrで並べるNG3）現在地を色だけで示す（意味が伝わらない）NG4）navをやたら増やす
見た目を整える（HTML+CSSセット：4例）
例1）横並びの基本ナビ例2）現在地を“下線”で（aria-current連携）例3）縦メニュー（サイド用）例4）スマホでも押しやすい（タップ領域増やす）
理解チェック（3問・答え付き）
ミニ演習（すぐ試せる小課題 2つ）

まず結論（1行）

navの中にul > li > aでメニューを組むと、「ここがナビだ」と機械にも人にも伝わるメニューが作れます。

最小の書き方（コピペで動く最小コード）

HTMLCode
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Nav Minimum</title>
  </head>
  <body>
    <header>
      <nav aria-label="主要メニュー">
        <ul>
          <li><a href="/">ホーム</a></li>
          <li><a href="/about.html">会社情報</a></li>
          <li><a href="/contact.html">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>
Preview を表示

重要ポイント（ここで迷いがち）

  • navは「ページ内の主要なナビゲーション」
    すべてのリンクの集合にnavを付けるわけではない（フッターの細かいリンク集などは状況次第）。
  • メニューは基本 ul > li > a
    「項目のまとまり」＝リストで表すと意味が通る。
  • aria-labelでナビの目的を説明できる
    ページ内にnavが複数あるときに特に有効（例：主要メニュー / フッターメニュー / パンくず等）。
  • 現在地（アクティブ）は“見た目”と“意味”の両方で示す
    見た目だけだと読み上げで伝わりにくい。→ aria-current="page" が便利。

例で理解（よく使うパターン 4つ）

1) ヘッダーのグローバルナビ（基本形）

HTMLCode
<nav aria-label="主要メニュー">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/service.html">サービス</a></li>
    <li><a href="/price.html">料金</a></li>
    <li><a href="/contact.html">お問い合わせ</a></li>
  </ul>
</nav>
Preview を表示

2) 現在地を示す（aria-current）

HTMLCode
<nav aria-label="主要メニュー">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/service.html" aria-current="page">サービス</a></li>
    <li><a href="/price.html">料金</a></li>
  </ul>
</nav>
Preview を表示

3) フッターナビ（“補助リンク”として）

HTMLCode
<footer>
  <nav aria-label="フッターメニュー">
    <ul>
      <li><a href="/privacy.html">プライバシーポリシー</a></li>
      <li><a href="/terms.html">利用規約</a></li>
      <li><a href="/sitemap.html">サイトマップ</a></li>
    </ul>
  </nav>
</footer>
Preview を表示

4) サイドメニュー（同一ページ内リンク #）

HTMLCode
<aside>
  <nav aria-label="ページ内メニュー">
    <ul>
      <li><a href="#sec-intro">概要</a></li>
      <li><a href="#sec-step">手順</a></li>
      <li><a href="#sec-faq">FAQ</a></li>
    </ul>
  </nav>
</aside>

<section id="sec-intro"><h2>概要</h2></section>
<section id="sec-step"><h2>手順</h2></section>
<section id="sec-faq"><h2>FAQ</h2></section>
Preview を表示

使い分け（似た要素/属性との違い）

  • nav vs div
    見た目はどっちでも作れるけど、navは「ナビ領域だ」と意味を付けられる。
  • nav vs menu
    menuは“コマンド/操作のメニュー”など別用途で使われることもあり、サイトのナビなら基本はnavが無難。
  • aria-current vs class（例：.is-active）
    classはCSS用、aria-currentは意味（アクセシビリティ）用。両方使うのが実務で強い。

実務のコツ（SEO/安全/アクセシビリティ）

  • リンク文言は「こちら」より具体的に
    例：×「こちら」→ ○「料金を見る」「お問い合わせ」
  • タップ領域は広く（スマホ）
    aにpaddingを付けて押しやすくする。
  • 複数navがあるならラベルで区別
    aria-label="主要メニュー" のように。
  • 外部リンクを別タブにするなら（#8相当の先取り）
    target="_blank"を使う場合は rel="noopener noreferrer" をセット。

NG・禁止例（事故る書き方）

NG1）navの中がリンクじゃない（意味が弱い）

HTMLCode
<nav>
  <p>メニュー</p>
</nav>
Preview を表示

✅ 正：aが中心になる構造に

HTMLCode
<nav aria-label="主要メニュー">
  <ul>
    <li><a href="/">ホーム</a></li>
  </ul>
</nav>
Preview を表示

NG2）メニュー項目をbrで並べる

HTMLCode
<nav>
  <a href="/">ホーム</a><br />
  <a href="/about.html">会社情報</a>
</nav>
Preview を表示

✅ 正：ul/liで“まとまり”にする

HTMLCode
<nav aria-label="主要メニュー">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about.html">会社情報</a></li>
  </ul>
</nav>
Preview を表示

NG3）現在地を色だけで示す（意味が伝わらない）

見た目だけだと読み上げで分かりづらい。
✅ 正：aria-current="page" も付ける

HTMLCode
<nav aria-label="主要メニュー">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/service.html" aria-current="page">サービス</a></li>
  </ul>
</nav>
Preview を表示

NG4）navをやたら増やす

すべてのリンク塊をnavにすると“主要ナビ”が埋もれる。
✅ 正：主要/補助/ページ内 など“意味のある単位”で使う

見た目を整える（HTML+CSSセット：4例）

色は使わず、余白・線・影・動きで整えます。

例1）横並びの基本ナビ

例1）横並びの基本ナビ

HTMLCode
<nav class="gnav" aria-label="主要メニュー">
<ul class="gnav__list">
  <li><a class="gnav__link" href="/">ホーム</a></li>
  <li><a class="gnav__link" href="/service.html">サービス</a></li>
  <li><a class="gnav__link" href="/price.html">料金</a></li>
  <li><a class="gnav__link" href="/contact.html">お問い合わせ</a></li>
</ul>
</nav>
CSSCode
.gnav__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}

.gnav__link {
display: inline-block;
padding: 0.6rem 0.9rem;
border: 1px solid currentColor;
border-radius: 999px;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gnav__link:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
}
Preview を表示

例2）現在地を“下線”で（aria-current連携）

例2）現在地を“下線”で（aria-current連携）

HTMLCode
<nav class="tabs" aria-label="主要メニュー">
<ul class="tabs__list">
  <li><a class="tabs__link" href="/">ホーム</a></li>
  <li><a class="tabs__link" href="/service.html" aria-current="page">サービス</a></li>
  <li><a class="tabs__link" href="/price.html">料金</a></li>
</ul>
</nav>
CSSCode
.tabs__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

.tabs__link {
display: inline-block;
padding: 0.8rem 0.2rem;
text-decoration: none;
position: relative;
}

.tabs__link[aria-current="page"]::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: currentColor;
opacity: 0.9;
}
Preview を表示

例3）縦メニュー（サイド用）

例3）縦メニュー（サイド用）

HTMLCode
<nav class="snav" aria-label="ページ内メニュー">
<ul class="snav__list">
  <li><a class="snav__link" href="#sec-intro">概要</a></li>
  <li><a class="snav__link" href="#sec-step">手順</a></li>
  <li><a class="snav__link" href="#sec-faq">FAQ</a></li>
</ul>
</nav>
CSSCode
.snav__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 0.4rem;
}

.snav__link {
display: block;
padding: 0.7rem 0.9rem;
border: 1px solid rgba(0, 0, 0, 0.22);
border-radius: 14px;
text-decoration: none;
}

.snav__link:hover {
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}
Preview を表示

例4）スマホでも押しやすい（タップ領域増やす）

例4）スマホでも押しやすい（タップ領域増やす）

HTMLCode
<nav class="touch" aria-label="主要メニュー">
<ul class="touch__list">
  <li><a class="touch__link" href="/">ホーム</a></li>
  <li><a class="touch__link" href="/about.html">会社情報</a></li>
  <li><a class="touch__link" href="/contact.html">お問い合わせ</a></li>
</ul>
</nav>
CSSCode
.touch__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 0.5rem;
}

.touch__link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0.6rem 0.9rem;
border: 1px solid currentColor;
border-radius: 14px;
text-decoration: none;
}
Preview を表示

理解チェック（3問・答え付き）

navは何のための要素？

→ 主要なナビゲーション領域だと示すため

メニューの基本構造は？

→ nav > ul > li > a

現在地（今いるページ）を意味として示す属性は？

→ aria-current="page"

ミニ演習（すぐ試せる小課題 2つ）

  • ヘッダーに「ホーム / サービス / 料金 / お問い合わせ」のグローバルナビを作って、「料金」だけ aria-current="page" を付け、CSS例2（タブ風）を当ててください。
  • ページ内に「概要 / 手順 / FAQ」へ飛ぶページ内メニュー（#リンク）を作り、asideに置いてCSS例3（縦メニュー）で整えてください。