# パンくずリストのCSS実装

> 現在地を示すパンくずリスト。olとaria-labelで意味づけし、区切り記号はCSSの擬似要素で入れるためHTMLが汚れません。

- カテゴリ: ナビゲーション
- URL: https://www.css-dictionary.com/recipes/breadcrumb/

## HTML

```html
<nav class="breadcrumb" aria-label="パンくずリスト">
  <ol>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">CSS</a></li>
    <li aria-current="page">パンくずリスト</li>
  </ol>
</nav>
```

## CSS

```css
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: #b5a583;
}

.breadcrumb a {
  color: #8a6d3b;
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: #1a1712;
  font-weight: 600;
}
```

## 仕組みの解説

順序付きリスト（ol）を display: flex で横並びにし、区切りの「/」は li + li::before の擬似要素で描画します。区切り記号をHTMLに書かないことで、スクリーンリーダーに余計な記号が読み上げられません。現在地は aria-current="page" で示し、リンクにはしません。

## 実装のポイント

項目が長い場合は flex-wrap: wrap で折り返せます。省略したい場合は white-space / text-overflow の組み合わせも検討してください。

## AIに依頼するときの文例

アクセシブルなパンくずリストをHTMLとCSSで作ってください。ol要素とaria-label、現在地にはaria-current="page"を使い、区切り記号はCSSの擬似要素で入れてください。

## 使っているプロパティ

- [display](https://www.css-dictionary.com/property/display.md)
- [flex-wrap](https://www.css-dictionary.com/property/flex-wrap.md)
- [gap](https://www.css-dictionary.com/property/gap.md)
- [list-style](https://www.css-dictionary.com/property/list-style.md)