# 縦タイムラインのCSS実装

> 配送状況や更新履歴に使う縦のタイムライン。点と線は疑似要素だけで描き、リスト構造とtime要素で意味も正しく保ちます。

- カテゴリ: 表示・フィードバック
- URL: https://www.css-dictionary.com/recipes/vertical-timeline/

## HTML

```html
<ol class="timeline">
  <li class="done">
    <time datetime="2026-07-01">7月1日</time>
    <h3>注文を受け付けました</h3>
    <p>ご注文内容の確認メールをお送りしました。</p>
  </li>
  <li class="current">
    <time datetime="2026-07-03">7月3日</time>
    <h3>発送準備中</h3>
    <p>倉庫で梱包作業を行っています。</p>
  </li>
  <li>
    <time datetime="2026-07-05">7月5日（予定）</time>
    <h3>お届け</h3>
    <p>配送業者よりお届け予定です。</p>
  </li>
</ol>
```

## CSS

```css
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 300px;
}

.timeline li {
  position: relative;
  padding-left: 26px;
  padding-bottom: 22px;
}

/* 点 */
.timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  border: 2px solid #cbbfa5;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

/* 次の項目までの線（最後の項目には描かない） */
.timeline li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 18px;
  bottom: 2px;
  width: 2px;
  background: #e2d8c2;
}

.timeline .done::before {
  border-color: #4a7c59;
  background: #4a7c59;
}

.timeline .done:not(:last-child)::after {
  background: #4a7c59;
}

.timeline .current::before {
  border-color: #b0413e;
}

.timeline time {
  font-size: 11px;
  color: #8a7d63;
  font-variant-numeric: tabular-nums;
}

.timeline h3 {
  margin: 2px 0 4px;
  font-size: 14px;
}

.timeline .current h3 { color: #b0413e; }

.timeline p {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: #5c5445;
}
```

## 仕組みの解説

時系列はol（順序付きリスト）でマークアップし、日付はtime要素のdatetime属性で機械可読にします。点は各liの ::before、縦線は ::after で描き、線は「:not(:last-child)」で最後の項目にだけ描かないのがポイントです。完了区間の線は緑にして進捗が一目で分かるようにし、線のtop/bottomを点の位置に合わせて調整しています。

## 実装のポイント

左右交互のタイムラインにする場合はgridの2カラム化とnth-childでの振り分けが必要になり、複雑さが一段上がります。まずは縦一列が保守しやすいです。

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

配送状況の縦タイムラインを作ってください。olとtime要素でマークアップし、点は::before・縦線は::after（:not(:last-child)で最後は描かない）、完了・現在・未来を色分けしてください。

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

- [position](https://www.css-dictionary.com/property/position.md)
- [list-style](https://www.css-dictionary.com/property/list-style.md)
- [border-radius](https://www.css-dictionary.com/property/border-radius.md)
- [padding](https://www.css-dictionary.com/property/padding.md)