HTML＋CSSで魅せる！アニメーション＆交互表示対応のタイムライン年表の作り方

5月 27, 2025 5月 27, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webサイトに「年表（タイムライン）」を入れる場面、実はけっこう多いですよね！
会社の沿革、サービスの歴史、イベントのスケジュール…などなど。

そうした情報を見やすく・美しく整理するなら、HTML＋CSSだけで組める「年表レイアウト」がとても便利です。

今回は、JavaScriptやライブラリを使わずに、見栄えがよく、かつレスポンシブにも対応した年表デザインの作り方を紹介します。
初心者の方にもわかりやすく、まずは基本構造から、最後には装飾や応用テクニックまでを丁寧に解説します！

HTMLの基本構造を組もう

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

まずは、年表（タイムライン）に必要なHTMLのベースを作成します。以下はシンプルな縦型年表の基本構造です。

<div class="timeline"> 
  <div class="timeline-item"> 
    <div class="timeline-date">2020年</div> 
    <div class="timeline-content">会社設立。拠点は浜松市中区。</div> 
  </div> 
  <div class="timeline-item"> 
  <div class="timeline-date">2022年</div> 
    <div class="timeline-content">新サービス「○○」をスタート。</div> 
  </div> 
</div>

それぞれの「年＋内容」を .timeline-item としてまとめる形ですね。
シンプルな構造ですが、CSSでかなり自由に装飾できます。

CSSで縦型タイムラインを美しく整える

では、上記の構造に装飾を加えていきましょう。以下が基本的なスタイルです。

.timeline {
  position: relative;
  margin: 2rem 0;
  padding-left: 2rem;
  border-left: 3px solid #3498db;
}
.timeline-item {
  margin-bottom: 2rem;
  position: relative;
}
.timeline-date {
  font-weight: bold;
  color: #3498db;
  margin-bottom: 0.3rem;
}
.timeline-content {
  background: #f0f8ff;
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -1.1rem;
  top: 0.3rem;
  width: 12px;
  height: 12px;
  background: #3498db;
  border-radius: 50%;
}

このCSSでは、左側に年を並べ、年表の線（縦のバー）を border-left で表現。
日付に丸いドット（ノード）を加えて、視覚的にも流れが伝わるようにしています。