# ステップインジケーターのCSS実装

> 購入フローなどの進捗を示すステップ表示。番号の丸を線でつなぎ、完了・現在地・未到達を色分けします。現在地はaria-currentで伝えます。

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

## HTML

```html
<ol class="steps">
  <li class="done">
    <span class="dot" aria-hidden="true">✓</span>
    カート
  </li>
  <li class="current" aria-current="step">
    <span class="dot" aria-hidden="true">2</span>
    お届け先
  </li>
  <li>
    <span class="dot" aria-hidden="true">3</span>
    お支払い
  </li>
</ol>
```

## CSS

```css
.steps {
  display: flex;
  width: 320px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8a7d63;
}

.dot {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid #cbbfa5;
  border-radius: 50%;
  background: #fff;
  font-weight: 600;
  color: #8a7d63;
}

/* 左隣の丸までつなぐ線 */
.steps li:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 13px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: #e2d8c2;
  z-index: -1;
}

/* 完了済みステップの後ろの線は色付きに */
.steps .done + li::before {
  background: #4a7c59;
}

.steps .done .dot {
  border-color: #4a7c59;
  background: #4a7c59;
  color: #fff;
}

.steps .current {
  color: #1a1712;
  font-weight: 600;
}

.steps .current .dot {
  border-color: #b0413e;
  color: #b0413e;
}
```

## 仕組みの解説

つなぎの線は各liの ::before を left: -50% から right: 50% まで敷いて左隣の丸まで届かせ、z-index: -1 で丸の下に潜らせます。「完了→次」の線だけ緑にするのは隣接セレクタ「.done + li::before」の仕事です。完了は✓と色、現在地は aria-current="step" で構造的にも伝えます。

## 実装のポイント

ステップ名が長い場合は白のtext-shadowかpaddingで線との重なりを整えてください。縦型にする場合はflex-directionと線の向きを入れ替えます。

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

3段階のステップインジケーターを作ってください。olでマークアップし、番号の丸を::beforeの線でつなぎ、完了（✓・緑）・現在地（aria-current="step"・朱）・未到達を色分けしてください。

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

- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [position](https://www.css-dictionary.com/property/position.md)
- [place-items](https://www.css-dictionary.com/property/place-items.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)
- [z-index](https://www.css-dictionary.com/property/z-index.md)