タイムラインとは

出来事を時系列に沿って、縦の線とマーカーで結びながら並べる部品。

概要

日付や出来事を時系列順に、縦(または横)の線とマーカー(丸印)で結びながら並べる部品です。企業の沿革、 更新履歴、注文の配送状況などを「いつ・何が起きたか」を一目で追えるように見せたいときに使われます。

別名

表記ゆれ:タイムライン、年表、履歴表示、ステップ表示、timeline

「年表」は歴史的な出来事の一覧、「履歴表示」は操作ログのような文脈で使われやすい言い方です。フォームの 進捗を示す「ステップ表示」という呼び方をされることもありますが、これは次に説明する「ステッパー」との 混同なので注意してください。

AI への伝え方

「タイムラインで表示して」で通じます。縦方向か横方向か、線の色を交互に変えるか、日付を左に出すか本文の 上に出すかは実装で分かれやすい点なので、レイアウトのイメージがあれば具体的に伝えてください。

似たパーツとの違い

「ステッパー」はフォーム入力などの手続きが今どの段階にいるかを示す部品で、通常は未来の手順も含めて 全体像を見せます。タイムラインは主に過去から現在までに起きた出来事を記録として並べる用途が中心で、 未完了の手順を示す機能は持たない点が異なります。

デモ

  1. 2024 年 4 月

    サービス開始

    最初のバージョンを公開しました。

  2. 2024 年 9 月

    機能追加

    検索機能とお気に入り機能を追加しました。

  3. 2025 年 3 月

    大型リニューアル

    デザインを全面的に刷新しました。

  4. 2026 年 1 月

    現在

    引き続き改善を続けています。

コード

HTML
<div class="timeline-demo">
  <ol class="timeline-demo__list">
    <li class="timeline-demo__item">
      <span class="timeline-demo__marker" aria-hidden="true"></span>
      <p class="timeline-demo__date">2024 年 4 月</p>
      <h3 class="timeline-demo__heading">サービス開始</h3>
      <p class="timeline-demo__body">最初のバージョンを公開しました。</p>
    </li>
    <li class="timeline-demo__item">
      <span class="timeline-demo__marker" aria-hidden="true"></span>
      <p class="timeline-demo__date">2024 年 9 月</p>
      <h3 class="timeline-demo__heading">機能追加</h3>
      <p class="timeline-demo__body">検索機能とお気に入り機能を追加しました。</p>
    </li>
    <li class="timeline-demo__item">
      <span class="timeline-demo__marker" aria-hidden="true"></span>
      <p class="timeline-demo__date">2025 年 3 月</p>
      <h3 class="timeline-demo__heading">大型リニューアル</h3>
      <p class="timeline-demo__body">デザインを全面的に刷新しました。</p>
    </li>
    <li class="timeline-demo__item">
      <span class="timeline-demo__marker" aria-hidden="true"></span>
      <p class="timeline-demo__date">2026 年 1 月</p>
      <h3 class="timeline-demo__heading">現在</h3>
      <p class="timeline-demo__body">引き続き改善を続けています。</p>
    </li>
  </ol>
</div>
CSS
.timeline-demo {
  font-family: sans-serif;
  color: #333333;
}

.timeline-demo__list {
  position: relative;
  margin: 0;
  padding: 0 0 0 28px;
  list-style: none;
}

.timeline-demo__list::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 5px;
  width: 2px;
  background: #b3b3b3;
}

.timeline-demo__item {
  position: relative;
  padding-bottom: 24px;
}

.timeline-demo__item:last-child {
  padding-bottom: 0;
}

.timeline-demo__marker {
  position: absolute;
  top: 4px;
  left: -28px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0017c1;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px #0017c1;
}

.timeline-demo__date {
  margin: 0 0 4px;
  font-size: 12px;
  color: #666666;
}

.timeline-demo__heading {
  margin: 0 0 4px;
  font-size: 15px;
}

.timeline-demo__body {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}