タイムラインコンポーネント

最終更新日: 7月 13, 2026

CSS のみの Tailwind 時系列イベントリスト用の CSS タイムライン。アイコン、コンテンツ、コネクタラインスロットを備えた垂直レイアウト。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

タイムラインコンポーネントは、一連のイベント、マイルストーン、または物語の進行を時系列で表示します。セマンティック HTML で構築されたタイムラインは、ユーザーが歴史的な進行状況とプロジェクトのフェーズを理解するのに役立ちます。 Frutjam タイムラインシステムは、複数の方向、色、アイテムスタイルをサポートしており、プロジェクト履歴、リリースノート、ジャーニーマップに最適です。

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

クラス	タイプ	説明
timeline	ベース	時系列の出来事の順序付きリスト
timeline-item	修飾子	個々のイベント行 - 各 `<li>` に配置します。
timeline-start	修飾子	タイムライン軸の前に配置されたコンテンツ
timeline-middle	修飾子	タイムライン軸の中心にあるドット
timeline-end	修飾子	タイムライン軸の後に配置されたコンテンツ
timeline-horizontal	修飾子	横型レイアウト
timeline-vertical	修飾子	縦型レイアウト (デフォルト)
timeline-snap-start	修飾子	開始列を非表示にします - ドットが左端に揃えられます
timeline-snap-end	修飾子	終了列を非表示にします - ドットが右端に揃えられます
timeline-primary	色	原色のドットとコネクタ — `timeline-item` に配置します
timeline-secondary	色	二次色のドットとコネクタ — `timeline-item` に配置します
timeline-accent	色	アクセントカラーのドットとコネクタ — `timeline-item` に配置
timeline-neutral	色	中間色のドットとコネクタ — `timeline-item` に配置
timeline-info	色	情報カラードットとコネクタ - `timeline-item` に配置
timeline-success	色	成功の色のドットとコネクタ — `timeline-item` に配置します
timeline-warning	色	警告色のドットとコネクタ — `timeline-item` に配置
timeline-error	色	エラー色のドットとコネクタ — `timeline-item` に配置

基本的な使い方

Jan 2024

Project started

Initial commit pushed
Apr 2024

Beta released

Open testing begins
Today

v2.0 launched

Tailwind v4 rewrite

<ul class="timeline timeline-vertical">
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Jan 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Project started</div>
      <div class="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Apr 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Beta released</div>
      <div class="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Today</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">v2.0 launched</div>
      <div class="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

<ul className="timeline timeline-vertical">
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Jan 2024</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">Project started</div>
      <div className="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Apr 2024</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">Beta released</div>
      <div className="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li className="timeline-item">
    <div className="timeline-start text-sm opacity-60">Today</div>
    <div className="timeline-middle"></div>
    <div className="timeline-end">
      <div className="font-semibold">v2.0 launched</div>
      <div className="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

<ul class="timeline timeline-vertical">
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Jan 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Project started</div>
      <div class="text-sm opacity-60">Initial commit pushed</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Apr 2024</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Beta released</div>
      <div class="text-sm opacity-60">Open testing begins</div>
    </div>
  </li>
  <li class="timeline-item">
    <div class="timeline-start text-sm opacity-60">Today</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">v2.0 launched</div>
      <div class="text-sm opacity-60">Tailwind v4 rewrite</div>
    </div>
  </li>
</ul>

コードを表示

色付きのタイムライン

各 timeline-item にカラー修飾子を追加して、そのドットとそこから続くコネクタラインに色を付けます。

Step 1

Primary
Step 2

Secondary
Step 3

Success
Step 4

Warning
Step 5

Error

<ul class="timeline timeline-vertical">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start text-sm opacity-60">Step 1</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Primary</div></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start text-sm opacity-60">Step 2</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Secondary</div></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start text-sm opacity-60">Step 3</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Success</div></div>
  </li>
  <li class="timeline-item timeline-warning">
    <div class="timeline-start text-sm opacity-60">Step 4</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Warning</div></div>
  </li>
  <li class="timeline-item timeline-error">
    <div class="timeline-start text-sm opacity-60">Step 5</div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"><div class="font-semibold">Error</div></div>
  </li>
</ul>

コードを表示

交互の側面

各アイテムの timeline-start と timeline-end の間でコンテンツを交互に配置し、ジグザグレイアウトを作成します。

Design phase

Jan 2024
Development

Mar 2024
Testing

May 2024
Launch

Jun 2024

<ul class="timeline timeline-vertical">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Design phase</div>
      <div class="text-sm opacity-60">Jan 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Development</div>
      <div class="text-sm opacity-60">Mar 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-accent">
    <div class="timeline-start">
      <div class="font-semibold">Testing</div>
      <div class="text-sm opacity-60">May 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launch</div>
      <div class="text-sm opacity-60">Jun 2024</div>
    </div>
  </li>
</ul>

コードを表示

ツートンカラーのコネクタ

各アイテムのコネクタラインはその色を継承し、異なる色のステップ間にシームレスな移行を作成します。

Planned

Backlog item created
In Progress

Development started
In Review

Awaiting approval
Done

Shipped to production

<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-info">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Planned</div>
      <div class="text-sm opacity-60">Backlog item created</div>
    </div>
  </li>
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">In Progress</div>
      <div class="text-sm opacity-60">Development started</div>
    </div>
  </li>
  <li class="timeline-item timeline-warning">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">In Review</div>
      <div class="text-sm opacity-60">Awaiting approval</div>
    </div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Done</div>
      <div class="text-sm opacity-60">Shipped to production</div>
    </div>
  </li>
</ul>

コードを表示

スタート側のみ

コンテンツを timeline-start にのみ配置し、空の timeline-end を指定して、すべてを軸の左側に移動します。

Requirements gathered

Jan 2024
Prototype built

Feb 2024
Shipped

Mar 2024

<ul class="timeline timeline-vertical timeline-snap-end">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Requirements gathered</div>
      <div class="text-sm opacity-60">Jan 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start">
      <div class="font-semibold">Prototype built</div>
      <div class="text-sm opacity-60">Feb 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start">
      <div class="font-semibold">Shipped</div>
      <div class="text-sm opacity-60">Mar 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
</ul>

コードを表示

終端側のみ

timeline-snap-start を使用して、すべてのコンテンツを右側にしてドットを左端に移動します。

Launched beta

February 2024
Public release

April 2024

<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
  </li>
</ul>

コードを表示

豊富なカードコンテンツ

コンテンツを borderrounded-box p-3 ブロックで囲み、各タイムラインイベントをカードのような外観にします。

Jan 15, 2024

Project Kickoff

Team assembled, goals defined, and roadmap approved by stakeholders.
Mar 1, 2024

Alpha Released

Internal testing began with 12 pilot users across 3 departments.
Jun 10, 2024

v1.0 General Availability

Public launch with full documentation, support, and SLA guarantees.

<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Jan 15, 2024</div>
        <div class="font-semibold">Project Kickoff</div>
        <p class="text-sm opacity-70 mt-1">Team assembled, goals defined, and roadmap approved by stakeholders.</p>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Mar 1, 2024</div>
        <div class="font-semibold">Alpha Released</div>
        <p class="text-sm opacity-70 mt-1">Internal testing began with 12 pilot users across 3 departments.</p>
      </div>
    </div>
  </li>
  <li class="timeline-item timeline-success">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="border rounded-box p-3 mb-2">
        <div class="text-xs opacity-60 mb-1">Jun 10, 2024</div>
        <div class="font-semibold">v1.0 General Availability</div>
        <p class="text-sm opacity-70 mt-1">Public launch with full documentation, support, and SLA guarantees.</p>
      </div>
    </div>
  </li>
</ul>

コードを表示

スナップスタート

リストで timeline-snap-start を使用して開始列を非表示にし、ドットを左端に揃えます。

Launched beta

February 2024
Public release

April 2024

<ul class="timeline timeline-vertical timeline-snap-start">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start"></div>
    <div class="timeline-middle"></div>
    <div class="timeline-end">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
  </li>
</ul>

コードを表示

スナップエンド

リストで timeline-snap-end を使用して終了列を非表示にし、ドットを右端に揃えます。

Launched beta

February 2024
Public release

April 2024

<ul class="timeline timeline-vertical timeline-snap-end">
  <li class="timeline-item timeline-primary">
    <div class="timeline-start">
      <div class="font-semibold">Launched beta</div>
      <div class="text-sm opacity-60">February 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
  <li class="timeline-item timeline-secondary">
    <div class="timeline-start">
      <div class="font-semibold">Public release</div>
      <div class="text-sm opacity-60">April 2024</div>
    </div>
    <div class="timeline-middle"></div>
    <div class="timeline-end"></div>
  </li>
</ul>

コードを表示

Claude コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確なタイムラインクラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる

タイムラインコンポーネント

基本的な使い方

色付きのタイムライン

交互の側面

ツートンカラーのコネクタ

スタート側のみ

終端側のみ

豊富なカードコンテンツ

スナップスタート

スナップエンド

関連している