縦タイムライン

表示・フィードバックBaseline 広く利用可能

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

プレビュー

Live

プレビュー枠は右下をドラッグすると高さを変えられます

コードを編集して試す

書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。

HTML

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 list-style border-radius padding