タイムライン Timeline

時系列に沿ってイベントやステータスを縦方向に表示する。進捗や履歴の可視化に最適。

使用場面: 注文履歴やプロジェクトの進捗状況、アクティビティログを表示する場面 採用例: GitHub, Jira

ライブデモ

2024/01/15 10:30
注文完了
ご注文を受け付けました
2024/01/15 14:00
発送準備中
商品を梱包しています
2024/01/16 09:00
配送中
お届け先に向かっています
--
配達完了
お届け予定: 1月17日

ソースコード

<div class="demo-timeline">
  <div class="demo-timeline-item completed">
    <div class="demo-timeline-dot"></div>
    <div class="demo-timeline-content">
      <div class="demo-timeline-time">2024/01/15 10:30</div>
      <div class="demo-timeline-title">注文完了</div>
      <div class="demo-timeline-desc">ご注文を受け付けました</div>
    </div>
  </div>
  <div class="demo-timeline-item completed">
    <div class="demo-timeline-dot"></div>
    <div class="demo-timeline-content">
      <div class="demo-timeline-time">2024/01/15 14:00</div>
      <div class="demo-timeline-title">発送準備中</div>
      <div class="demo-timeline-desc">商品を梱包しています</div>
    </div>
  </div>
  <div class="demo-timeline-item current">
    <div class="demo-timeline-dot"></div>
    <div class="demo-timeline-content">
      <div class="demo-timeline-time">2024/01/16 09:00</div>
      <div class="demo-timeline-title">配送中</div>
      <div class="demo-timeline-desc">お届け先に向かっています</div>
    </div>
  </div>
  <div class="demo-timeline-item pending">
    <div class="demo-timeline-dot"></div>
    <div class="demo-timeline-content">
      <div class="demo-timeline-time">--</div>
      <div class="demo-timeline-title">配達完了</div>
      <div class="demo-timeline-desc">お届け予定: 1月17日</div>
    </div>
  </div>
</div>
.demo-timeline {
  display: flex; flex-direction: column;
  padding-left: 16px;
  border-left: 2px solid #e5e7eb;
}
.demo-timeline-item {
  position: relative; padding: 0 0 24px 24px;
}
.demo-timeline-item:last-child { padding-bottom: 0; }
.demo-timeline-dot {
  position: absolute; left: -9px; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #e5e7eb; border: 3px solid #fff;
  box-sizing: border-box;
}
.demo-timeline-item.completed .demo-timeline-dot {
  background: var(--ui-primary);
}
.demo-timeline-item.current .demo-timeline-dot {
  background: #fff;
  border: 3px solid var(--ui-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
}
.demo-timeline-item.completed + .demo-timeline-item.completed {
  border-left-color: var(--ui-primary);
}
.demo-timeline-time {
  font-size: 12px; color: #aaa; margin-bottom: 2px;
}
.demo-timeline-title {
  font-size: 14px; font-weight: 600; color: #333;
}
.demo-timeline-item.pending .demo-timeline-title { color: #bbb; }
.demo-timeline-desc {
  font-size: 13px; color: #666; margin-top: 2px;
}
.demo-timeline-item.pending .demo-timeline-desc { color: #ccc; }

AIプロンプト

Basic 
タイムラインをHTML/CSSで作ってください。時系列に沿ってイベントを縦に表示し、完了・進行中・未着手の状態を区別します。
Custom 
以下の仕様でタイムラインを実装してください。
- 左に日時、右にイベント内容のレイアウト
- 完了=塗りつぶし、進行中=リングアニメーション、未着手=グレー
- 各イベントにアイコン付き
- プライマリカラー: #2563eb
- 展開で詳細表示（アニメーション付き）
- レスポンシブ対応
Advanced 
アクセシビリティ対応のタイムラインを実装してください。
- ol/li による意味的なマークアップ
- aria-current="step" で現在の進行ステップを示す
- スクリーンリーダーで進捗状況が理解できるaria-label
- 水平/垂直レイアウトの切替
- 無限スクロール対応（大量のイベント）
- prefers-reduced-motion対応
- 印刷時のスタイル最適化
← カタログに戻る