パンくずリスト（Breadcrumbs）

このページの目的

サイトの現在地を視覚的に示す「パンくずリスト」の実装方法を学びます。
ユーザーがサイト内で迷子になるのを防ぎ、今見ているページがサイト全体のどの位置にあるのかを理解しやすくします。

signpostパンくずリストとは？

童話『ヘンゼルとグレーテル』で、主人公が森で迷わないようにパンくずを置いていった、という話に由来するナビゲーションです。Webサイトでは、トップページから現在のページまでの階層をリンクで示します。

例： ホーム > Tips集 > パンくずリスト

---

build実装方法：HTMLとCSSだけで作る

パンくずリストは、順序が重要なリストであるため、HTMLの<ol>（順序付きリスト）タグで作るのが意味的にも適切です。

1. HTMLの構造

<nav>タグで全体を囲み、aria-label="パンくずリスト"で、これがパンくずリストであることをスクリーンリーダーなどに伝えます。

<nav aria-label="パンくずリスト" class="breadcrumbs">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item">
      <a href="/" class="breadcrumbs__link">ホーム>/a>
    </li>
    <li class="breadcrumbs__item">
      <a href="/tips/" class="breadcrumbs__link">Tips集</a>
    </li>
    <li class="breadcrumbs__item">
      <span aria-current="page">パンくずリスト</span>
    </li>
  </ol>
</nav>

ポイント：現在表示しているページ（一番最後）はリンクにする必要がないため、<span>タグを使い、aria-current="page"で「現在のページ」であることを示します。

2. CSSのスタイル

リストのマーカー（点）を消し、横並びにします。区切り記号（>など）は、CSSの擬似要素::beforeで追加するのが一般的です。

.breadcrumbs {
  font-size: 14px;
}
.breadcrumbs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 横並びにする */
  flex-wrap: wrap; /* 画面が狭いときに折り返す */
}

/* 区切り記号を追加 */
.breadcrumbs__item:not(:first-child)::before {
  content: '>';
  margin: 0 0.5em;
  color: #6c757d;
}

.breadcrumbs__link {
  color: #005A9C;
  text-decoration: none;
}
.breadcrumbs__link:hover {
  text-decoration: underline;
}

/* 現在のページはリンクではないので色を変える */
.breadcrumbs__item span[aria-current="page"] {
  color: #343A40;
  font-weight: 700;
}

---

---