「会社の沿革ページを作りたいけど、どうすればいいかわからない…」「イベントのスケジュールをおしゃれに表示したいのに、プラグインに頼りたくない」「履歴書や経歴書のようなタイムラインをWEBサイトに実装したいけど、HTMLとCSSだけで本当にできるの？」
これらの課題、実はCSSの基本をマスターすれば意外と簡単に解決できます。タイムラインは情報を時系列で視覚的に伝えるための強力なデザイン要素。会社の歴史、プロジェクトの進行状況、個人のキャリアパスなど、さまざまな用途で活用できます。さらに、適切に実装されたタイムラインは、ユーザーの目を引きながら情報を整理して伝える、サイトデザインの質を高める重要な役割を果たします。
複雑そうに見えるこの実装をついプラグインに頼ってしまいがち。実はHTML/CSSの基本知識があれば、カスタマイズ性の高い美しいタイムラインを自在に作れるのです。
この記事では、タイムラインのHTML構造からCSSスタイリング、レスポンシブ対応まで、段階を追って丁寧に解説します。コピペで使えるサンプルコードも多数用意しているので、この記事を読み終える頃には、あなたも自信を持ってタイムラインを実装できるようになるでしょう。
それでは早速、HTMLとCSSだけで作れる魅力的なタイムラインの作り方を説明します。
タイムラインの活用想定シーン
タイムラインは、時系列に沿って情報を視覚的に表現する手法で、単なるテキストリストよりも直感的でわかりやすい情報提示が可能になります。本記事では、CSSを使った魅力的なタイムラインの実装方法について、初心者の方でも理解しやすいように丁寧に解説していきます。
沿革・スケジュール・履歴などでの活用例
タイムラインデザインは様々な場面で活用できるため、Web制作の現場でも重宝されています。具体的な活用シーンをいくつか見ていきましょう。
1. 企業サイトでの沿革表示
企業の歴史や発展の過程を時系列で示す「沿革」ページは、タイムラインの代表的な活用例です。単調になりがちな年表形式ではなく、視覚的なタイムラインとして表現することで、企業の歩みをストーリー性を持って伝えることができます。
企業の沿革デザインをCSSでタイムライン風に仕上げることで、ただの年表よりも印象に残る表現が可能になります。特に創業からの成長過程や重要なマイルストーンを強調したい場合に効果的です。
2. イベントのスケジュール表示
カンファレンスやセミナー、お祭りなどのイベントスケジュールをタイムラインで表現することで、時間の流れを直感的に伝えることができます。CSSスケジュールデザインとして実装することで、参加者が予定を把握しやすくなります。
タイムスケジュールをCSS技術で視覚化することで、イベント全体の流れをわかりやすく伝えることができます。特に複数の会場やセッションが並行して行われる複雑なイベントでは、色分けなどを組み合わせることでさらに視認性を高めることも可能です。
3. 個人のポートフォリオや経歴
デザイナーや開発者のポートフォリオサイトでは、これまでの経歴や実績をタイムライン形式で表示することが一般的です。時系列に沿ったスキルの習得過程や、関わったプロジェクトを視覚的に表現することで、閲覧者に強い印象を与えることができます。
4. ブログの投稿履歴
ブログサイトでは、過去の投稿を時系列で表示するタイムラインを実装することで、サイトの歴史や成長を一目で伝えることができます。またカテゴリーごとに色分けするなど、CSSによるカスタマイズを加えることで情報の整理にも役立ちます。
タイムライン実装で得られるデザイン効果
CSSタイムラインデザインを実装することで、以下のようなメリットが得られます。
1. 情報の視覚的整理
時系列データを直線上に配置することで、情報の関連性や流れを視覚的に理解しやすくなります。特に多くの日付や出来事がある場合、タイムライン表示によって整理された印象を与えることができます。
2. ユーザーエンゲージメントの向上
静的なテキストリストと比べて、タイムラインは視覚的に魅力的であり、スクロールやインタラクションを促します。特にCSSアニメーションを取り入れることで、ユーザーの興味を引きつけ、サイト滞在時間の延長につながります。
3. 情報の重要度の表現
CSSを駆使することで、特定の出来事や時期を強調表示することが可能です。色の変更やサイズの調整など、デザイン要素を活用して情報の重要度を視覚的に伝えることができます。
4. モバイル対応の柔軟性
適切なレスポンシブデザインを実装することで、デスクトップからスマートフォンまで、あらゆるデバイスで見やすいタイムライン表示が可能になります。縦型タイムラインは特にモバイル表示との相性が良く、ユーザビリティを損なわずに情報を伝えることができます。
それでは早速、タイムライン実装の第一歩となるHTML構造の作成方法から見ていきましょう。
基本のHTML構造を作成しよう
タイムラインを実装する際の第一歩は、適切なHTML構造を設計することです。見た目のデザインに気を取られがちですが、まずは情報を正しく構造化することで、後のCSSスタイリングがスムーズになり、メンテナンス性も高まります。この章では、HTMLタイムライン作り方の基本となる構造について解説します。
セマンティックなタイムライン構造とは
「セマンティック」とは、HTML要素に意味を持たせることを指します。単に見た目を整えるだけでなく、コンテンツの意味や役割を明確にするマークアップを心がけることで、以下のメリットが得られます：
- アクセシビリティの向上: スクリーンリーダーなどの支援技術で情報が正しく伝わりやすくなります。
- SEO対策: 検索エンジンがコンテンツの構造を理解しやすくなります。
- コードの可読性と保守性: 他の開発者にとっても理解しやすく、将来の修正や拡張が容易になります。
- スタイリングの一貫性: CSSでのスタイリングが論理的に行えるようになります。
タイムラインをセマンティックに構築する場合、時系列データを表現するのに適した要素を選ぶことが重要です。一般的には以下のようなHTML要素の組み合わせが使われます：
<ul>(順序なしリスト): 時系列の各項目をリストアイテムとして表現する<li>(リストアイテム): 各時点や出来事を表す<time>(時間要素): 日付や時刻を明示的に示す<article>または<section>: 各タイムラインエントリーの内容をグループ化する<h2>,<h3>など: 見出しとして各エントリーのタイトルを示す
これらの要素を組み合わせることで、タイムラインの内容と構造を明確に表現することができます。
ul・li要素で縦型タイムラインのベースを構築
縦型タイムラインは、特にモバイルデバイスでの表示に適しており、実装もシンプルです。ここでは、ul・li要素を使った基本的な縦型タイムラインの構造を見ていきましょう。
まず、全体を包む「コンテナ」と、タイムライン自体を表す「リスト」の2つの要素を作成します：
<div class="timeline-container">
<ul class="timeline">
<!-- ここにタイムラインの各項目が入ります -->
</ul>
</div>
次に、リストの中に各タイムラインの項目（イベントや出来事）をli要素として追加します：
<div class="timeline-container">
<ul class="timeline">
<li class="timeline-item">
<!-- 1つ目の項目の内容 -->
</li>
<li class="timeline-item">
<!-- 2つ目の項目の内容 -->
</li>
<li class="timeline-item">
<!-- 3つ目の項目の内容 -->
</li>
<!-- 必要に応じて項目を追加 -->
</ul>
</div>
さらに、各項目の中に日付とコンテンツを入れる構造を作ります：
<div class="timeline-container">
<ul class="timeline">
<li class="timeline-item">
<div class="timeline-date">
<time datetime="2023-01-15">2023年1月15日</time>
</div>
<div class="timeline-content">
<h3>イベントタイトル</h3>
<p>イベントの詳細説明がここに入ります。必要に応じて複数段落や画像なども含められます。</p>
</div>
</li>
<!-- 他の項目も同様に -->
</ul>
</div>
このように構成することで、タイムラインの「時間軸」と「内容」が明確に分離され、CSSでのスタイリングもしやすくなります。
重要なポイント
time要素のdatetime属性には、機械可読な形式（YYYY-MM-DD）で日付を指定します。これはSEOやアクセシビリティに役立ちます。- クラス名は明確で一貫性のあるものを使いましょう。上記の例では「timeline-」というプレフィックスを使って関連性を示しています。
- 必要に応じて、さらに細かいコンポーネント（ラベル、アイコン、画像など）を追加できるように柔軟な構造を心がけましょう。
シンプルなHTMLコード例
それでは、実際に使えるシンプルなHTMLタイムラインのコード例を見てみましょう。この例は企業の沿革（年表）を表現したものです：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会社沿革 | タイムライン例</title>
<link rel="stylesheet" href="timeline.css">
</head>
<body>
<main>
<section class="company-history">
<h2>会社沿革</h2>
<div class="timeline-container">
<ul class="timeline">
<!-- 沿革項目1 -->
<li class="timeline-item">
<div class="timeline-date">
<time datetime="2010-04-01">2010年4月</time>
</div>
<div class="timeline-content">
<h3>会社設立</h3>
<p>東京都渋谷区にて株式会社〇〇を設立。Webデザイン事業を開始。</p>
</div>
</li>
<!-- 沿革項目2 -->
<li class="timeline-item">
<div class="timeline-date">
<time datetime="2013-09-15">2013年9月</time>
</div>
<div class="timeline-content">
<h3>事業拡大</h3>
<p>モバイルアプリ開発部門を新設。従業員数20名に拡大。</p>
<img src="office-photo.jpg" alt="新オフィスの様子" width="300">
</div>
</li>
<!-- 沿革項目3 -->
<li class="timeline-item">
<div class="timeline-date">
<time datetime="2018-06-30">2018年6月</time>
</div>
<div class="timeline-content">
<h3>海外進出</h3>
<p>シンガポールに初の海外支社を設立。アジア市場へ本格参入。</p>
<ul>
<li>シンガポールオフィス開設</li>
<li>現地スタッフ5名採用</li>
<li>ASEAN地域のマーケティング強化</li>
</ul>
</div>
</li>
<!-- 沿革項目4 -->
<li class="timeline-item">
<div class="timeline-date">
<time datetime="2022-02-10">2022年2月</time>
</div>
<div class="timeline-content">
<h3>新サービス開始</h3>
<p>AI技術を活用したコンテンツ最適化プラットフォーム「ContentAI」をリリース。</p>
</div>
</li>
</ul>
</div>
</section>
</main>
</body>
</html>
上記のコードでは、以下のポイントに注目してください：
- 全体の構造: セクションタグ内にタイムラインを配置し、適切な見出し（h2）を設定しています。
- 各項目の内容: 日付と内容を明確に分離しています。
- コンテンツの多様性: テキストだけでなく、画像やリストなど、様々な要素を含めることができます。
- セマンティックな要素:
time要素を使用して日付を明示的に示しています。
このHTML構造は、最小限のマークアップでありながら、後のCSSスタイリングによって様々なデザインに発展させることができる柔軟性を持っています。
イベントスケジュール向けの構造例
会社の沿革だけでなく、イベントのスケジュールをタイムライン形式で表現したい場合は、以下のような構造も検討できます：
<div class="event-schedule">
<h2>カンファレンススケジュール</h2>
<div class="schedule-timeline">
<!-- 午前のセッション -->
<div class="timeline-item">
<div class="timeline-time">
<time datetime="2023-06-15T10:00">10:00</time>
</div>
<div class="timeline-event">
<h3>オープニングセッション</h3>
<p class="event-location">メインホール</p>
<p class="event-speaker">登壇者: 山田太郎（CEO）</p>
<p>これからの技術トレンドと当社の取り組みについて</p>
</div>
</div>
<!-- 休憩時間 -->
<div class="timeline-item break">
<div class="timeline-time">
<time datetime="2023-06-15T11:30">11:30</time>
</div>
<div class="timeline-event">
<h3>コーヒーブレイク</h3>
<p class="event-location">ホワイエ</p>
<p>軽食とドリンクをご用意しています</p>
</div>
</div>
<!-- 午後のセッション -->
<div class="timeline-item">
<div class="timeline-time">
<time datetime="2023-06-15T13:00">13:00</time>
</div>
<div class="timeline-event">
<h3>技術ワークショップ</h3>
<p class="event-location">セミナールームA</p>
<p class="event-speaker">講師: 佐藤次郎（CTO）</p>
<p>実践的なAPI設計とセキュリティについて学びます</p>
</div>
</div>
</div>
</div>
この例では、特にイベントスケジュールに適した情報（時間、場所、登壇者など）を構造化しています。
CSS未適用の状態について
ここまでで紹介したHTMLコードは、CSSを適用していない状態ではただのリストとして表示されます。実際のタイムラインデザインは、次章で解説するCSSスタイリングによって実現します。HTML構造はあくまで「骨組み」であり、見た目は後から自由に変更できることを覚えておきましょう。
セマンティックなHTML構造を作成したら、次はCSSを使って魅力的なタイムラインデザインに仕上げていきましょう。次章では、特に縦型タイムラインのCSS実装方法について詳しく解説します。
CSSで縦型タイムラインをスタイリング
前章では、タイムラインのHTML構造を作成しました。この章では、そのHTML構造にCSSを適用して、視覚的に魅力的な縦型タイムラインを作り上げていきます。CSSタイムライン縦の実装方法を段階的に解説し、実際にコピペして使えるコードも提供します。
縦線と丸のデザインの基本
タイムラインのビジュアル的な特徴は、時間の流れを表す「縦線（または軸線）」と、各イベントの発生時点を示す「丸（ノード）」です。これらの要素をCSSで表現するには、主に以下のプロパティを活用します。
1. 縦線の実装方法
縦線を作成する最も一般的な方法は、親要素に相対位置指定（position: relative）を設定し、その中に絶対位置指定（position: absolute）の線要素を配置する方法です。具体的には以下のようなCSSを使います：
/* タイムラインコンテナ */
.timeline {
position: relative;
padding: 20px 0;
list-style: none;
max-width: 1000px;
margin: 0 auto;
}
/* 縦線 */
.timeline::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 20px; /* 左寄せタイムラインの場合 */
width: 4px; /* 線の太さ */
background: #ddd; /* 線の色 */
z-index: 1;
}
この例では、::before疑似要素を使って縦線を表現しています。left: 20px;の値を調整することで、線の位置を左右に移動できます。センタリングしたタイムラインを作りたい場合は、left: 50%;と設定し、必要に応じてtransform: translateX(-50%);を追加します。
2. 丸（ノード）の実装方法
各タイムラインアイテムに丸い点（ノード）を付けるには、各li要素に対して再び疑似要素を使います：
/* タイムラインアイテム */
.timeline-item {
position: relative;
margin-bottom: 30px;
padding-left: 60px; /* 左側のスペースを確保（丸と縦線用） */
}
/* 丸い点（ノード） */
.timeline-item::before {
content: '';
position: absolute;
top: 0;
left: 8px; /* 縦線の中央に配置するよう調整 */
width: 20px; /* 丸の直径 */
height: 20px; /* 丸の直径 */
border-radius: 50%; /* 丸くする */
background: #3498db; /* 丸の色 */
border: 4px solid #fff; /* 白い縁取り */
z-index: 2; /* 縦線より前面に */
}
この例では、各アイテムの左側に丸いノードを表示し、縦線よりも前面に配置しています。topの値を調整することで、ノードの垂直位置を変更できます。例えばtop: 5px;とすると、コンテンツの上部に寄せられます。
::beforeと::after疑似要素の使い方
タイムラインデザインでは、疑似要素（::beforeと::after）が非常に重要な役割を果たします。これらを使うことで、HTMLを複雑にすることなく、視覚的な要素を追加できます。
::before疑似要素
::before疑似要素は、要素の内容の前に何かを挿入するために使用します。先ほどの例では、縦線と丸いノードの両方に::beforeを使用しました。
.element::before {
content: ''; /* 必須プロパティ。空でも指定する必要がある */
/* その他のスタイル */
}
::after疑似要素
::after疑似要素は、要素の内容の後に何かを挿入するために使用します。例えば、タイムラインのコンテンツボックスに矢印や装飾を追加したい場合に便利です。
.timeline-content::after {
--size: 20px;
content: '';
position: absolute;
width: calc(var(--size)/2);
height: var(--size);
/* 右向きの三角を描画 */
clip-path: polygon(0 0, 100% 50%, 0 100%);
background-color: red;
top: 2px;
left: -10px; /* コンテンツボックスの左端から少し出す */
}
この例では、::afterを使ってコンテンツボックスの左側に小さな三角形（矢印）を作成しています。
疑似要素を使う際の注意点
- 必ず
contentプロパティを指定する: 値が空でも、content: '';は必須です。 - 位置の基準点を理解する: 親要素に
position: relative;を設定し、疑似要素にposition: absolute;を設定することで、親要素を基準とした配置が可能になります。 - z-indexを活用する: 複数の要素が重なる場合、
z-indexを使って重なり順を制御します。
コピペOKなCSSコードと解説
それでは、前章で作成したHTML構造に適用できる、完全なCSSコードを見ていきましょう。このコードはコピペするだけで動作する、実用的なタイムラインCSSです。
/* 基本スタイルのリセット */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
padding: 20px;
}
/* コンテナスタイル */
.timeline-container {
max-width: 800px;
margin: 40px auto;
padding: 0 20px;
}
h2 {
text-align: center;
margin-bottom: 40px;
color: #2c3e50;
}
/* タイムラインの基本スタイル */
.timeline {
position: relative;
list-style: none;
padding: 0;
}
/* 縦線 */
.timeline::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 20px;
width: 4px;
background: #e0e0e0;
z-index: 1;
}
/* タイムラインアイテム */
.timeline-item {
position: relative;
margin-bottom: 50px;
padding-left: 60px;
}
/* 最後のアイテムの下マージンを消す */
.timeline-item:last-child {
margin-bottom: 0;
}
/* 丸いノード */
.timeline-item::before {
content: '';
position: absolute;
top: 0;
left: 8px; /* 縦線の中央に配置 */
width: 28px; /* 丸の直径 */
height: 28px; /* 丸の直径 */
border-radius: 50%;
background: #3498db;
border: 4px solid #fff;
z-index: 2;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* 日付スタイル */
.timeline-date {
position: relative;
margin-bottom: 10px;
font-weight: bold;
color: #2c3e50;
}
/* コンテンツボックス */
.timeline-content {
position: relative;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
/* コンテンツボックスの矢印 */
.timeline-content::before {
content: '';
position: absolute;
top: 15px;
left: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #fff;
z-index: 3;
}
/* コンテンツ内の見出し */
.timeline-content h3 {
margin-top: 0;
margin-bottom: 10px;
color: #3498db;
}
/* コンテンツ内の段落 */
.timeline-content p {
margin-bottom: 15px;
}
/* コンテンツ内の最後の要素のマージンを消す */
.timeline-content *:last-child {
margin-bottom: 0;
}
/* コンテンツ内の画像 */
.timeline-content img {
max-width: 100%;
border-radius: 4px;
margin: 10px 0;
}
実際の表示はこちら
See the Pen timeline-sample-1 by watashi-xyz (@watashi-xyz) on CodePen.
コードの解説
このCSSコードは、左側に縦線を配置し、各アイテムに丸いノードを持つ基本的な縦型タイムラインを作成します。主な特徴は以下の通りです：
- 基本レイアウト:
- 縦線は左側に固定
- 各アイテムは縦に並び、最後のアイテム以外は下マージンを持つ
- コンテナに最大幅を設定し、中央揃え
- 視覚的な要素:
- 丸いノードは青色で、白い縁取りと微妙な影を持つ
- コンテンツボックスは白背景で、丸み付きの角と影を持つ
- コンテンツボックスの左側には小さな矢印が付いている
- テキストスタイリング:
- 日付は太字で暗めの色
- 見出しは青色でコンテンツボックスと視覚的に関連付け
- 段落には適切なマージンを設定
- 細部へのこだわり:
- 最後の要素のマージンを消去して余計なスペースを削除
- 画像にも丸みを持たせて統一感を出す
- 影の使い方で立体感を演出
カスタマイズのポイント
上記のコードをベースに、以下のようなカスタマイズが可能です：
色の変更:
.timeline-item::before {
background: #e74c3c; /* 赤色のノード */
}
.timeline-content h3 {
color: #e74c3c; /* 赤色の見出し */
}
縦線の位置変更（中央配置）:
.timeline::before {
left: 50%; /* 中央に配置 */
transform: translateX(-50%);
}
/* その他の要素も中央配置に合わせて調整が必要 */
ノードのサイズ変更:
.timeline-item::before {
width: 20px; /* より小さなノード */
height: 20px;
left: 12px; /* 位置も調整 */
}
アニメーション追加:
.timeline-item {
opacity: 0;
transform: translateX(-30px);
transition: all 0.4s ease;
}
.timeline-item.visible {
opacity: 1;
transform: translateX(0);
}
完成例のプレビュー
上記のHTML・CSSを組み合わせると、以下のような縦型タイムラインが完成します：
- 左側に縦線が走り、各イベントの位置にはノードが配置されます
- 日付が明確に表示され、その下にコンテンツボックスが配置されます
- コンテンツボックスは白背景と影によって浮き上がって見え、左側に小さな矢印が付いています
- テキスト、画像などのコンテンツがきれいに整理されて表示されます
このタイムラインデザインは、特に企業の沿革や個人のポートフォリオなど、時系列の情報を視覚的に分かりやすく伝えたい場合に適しています。
異なるテーマのタイムライン風CSS
もう少し異なる雰囲気の「タイムライン風CSS」を作りたい場合は、以下のようなスタイルバリエーションも検討できます：
モダンでミニマルなタイムライン
/* モダンでミニマルなタイムライン */
.timeline-modern::before {
width: 2px; /* より細い線 */
background: #ddd;
}
.timeline-modern .timeline-item::before {
width: 14px; /* より小さなノード */
height: 14px;
background: #fff;
border: 2px solid #3498db;
left: 14px;
}
.timeline-modern .timeline-content {
background: none; /* 背景なし */
box-shadow: none;
border-left: 3px solid #3498db;
padding-left: 15px;
border-radius: 0;
}
.timeline-modern .timeline-content::before {
display: none; /* 矢印なし */
}
このスタイルでは、コンテンツボックスの背景を取り除き、代わりに左側にアクセントカラーの縦線を追加しています。ノードも小さく控えめになり、全体的にすっきりとした印象になります。
See the Pen timeline-sample-2 by watashi-xyz (@watashi-xyz) on CodePen.
ビジネスや企業サイト向けの沿革デザイン
/* ビジネス向け沿革デザイン */
.timeline-corporate {
counter-reset: step;
}
.timeline-corporate::before {
background: #f0f0f0;
width: 6px;
}
.timeline-corporate .timeline-item::before {
content: counter(step);
counter-increment: step;
background: #2c3e50;
color: white;
width: 36px;
height: 36px;
border: none;
text-align: center;
line-height: 36px;
font-weight: bold;
left: 4px;
}
.timeline-corporate .timeline-content {
border-top: 3px solid #2c3e50;
padding-top: 15px;
}
この沿革デザインCSSでは、ノードの代わりに連番を表示し、コンテンツの上部にアクセントの線を追加しています。より公式的で整然としたデザインになります。
次の章では、さらにバリエーション豊かなタイムラインデザインに挑戦し、横型タイムラインやアイコンを用いた表現など、より多彩なCSSタイムラインデザインを紹介します。
See the Pen timeline-sample-3 by watashi-xyz (@watashi-xyz) on CodePen.
多彩なタイムラインデザインに挑戦
前章では基本的な縦型タイムラインのスタイリング方法を学びました。この章では、さらに表現の幅を広げる様々なタイムラインデザインに挑戦します。横型タイムラインの作り方や、アイコン・画像を取り入れた装飾的なデザイン、特定の目的（スケジュール表示や企業沿革など）に最適化したスタイルについて解説します。
横型タイムラインの作り方
縦型タイムラインと比較して、横型タイムラインは画面の横幅をフルに活用でき、時系列の流れを左から右へと直感的に表現できるメリットがあります。特にデスクトップ表示や、時系列の項目数が少ない場合に適しています。
基本的なHTML構造
横型タイムラインのHTML構造は、基本的に縦型と同じですが、CSSでの配置を横方向に変更します：
<div class="timeline-container horizontal">
<ul class="timeline">
<li class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">2018年</div>
<h3>設立</h3>
<p>会社設立、事業開始</p>
</div>
</li>
<li class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">2020年</div>
<h3>事業拡大</h3>
<p>新規事業部門の立ち上げ</p>
</div>
</li>
<li class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">2022年</div>
<h3>海外進出</h3>
<p>アジア市場への本格参入</p>
</div>
</li>
<li class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">2024年</div>
<h3>新サービス</h3>
<p>AI関連サービスの展開</p>
</div>
</li>
</ul>
</div>
横型タイムラインのCSS実装
横型タイムラインを実装するには、Flexboxを活用するのが最も効率的です：
/* 横型タイムラインのベーススタイル */
.horizontal .timeline {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20px 0;
position: relative;
}
/* 横線 */
.horizontal .timeline::before {
content: '';
position: absolute;
top: 50%; /* 中央に配置 */
left: 0;
right: 0;
height: 4px;
background: #e0e0e0;
transform: translateY(-50%);
z-index: 1;
}
/* 各アイテム */
.horizontal .timeline-item {
flex: 1;
position: relative;
padding: 80px 10px 0; /* 上部にスペースを確保 */
margin: 0 10px;
text-align: center;
}
/* ノード */
.horizontal .timeline-item::before {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
border-radius: 50%;
background: #3498db;
border: 4px solid #fff;
transform: translate(-50%, calc(50% + 40px)); /* 中央配置の調整 */
z-index: 2;
}
/* コンテンツボックス */
.horizontal .timeline-content {
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
/* 日付スタイル */
.horizontal .timeline-date {
font-weight: bold;
margin-bottom: 10px;
color: #2c3e50;
}
このCSSは以下のような効果を生み出します：
- タイムラインアイテムが横一列に並ぶ
- 中央に横線が走り、その上にノードが配置される
- コンテンツボックスはノードの上部に表示される
- 全体が左右に均等に分布する
See the Pen timeline-horizontal-sample by watashi-xyz (@watashi-xyz) on CodePen.
横型タイムラインの応用
より洗練された横型タイムラインにするためのカスタマイズ例を紹介します：
/* 交互に上下配置するタイムライン */
.horizontal-zigzag .timeline-item:nth-child(even) {
padding: 0 10px 80px; /* 下部にスペースを確保 */
}
.horizontal-zigzag .timeline-item:nth-child(even)::before {
top: auto;
bottom: 0;
transform: translate(-50%, calc(-50% - 40px));
}
/* 項目数に応じた幅調整 */
.horizontal .timeline-item {
min-width: 150px; /* 最小幅を設定して崩れを防止 */
}
/* スクロール可能な横型タイムライン */
.horizontal-scroll .timeline {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 20px; /* スクロールバーのスペース */
}
.horizontal-scroll .timeline-item {
flex: 0 0 250px; /* 固定幅 */
}
横型タイムラインは特に企業のマイルストーン表示や、少数の重要イベントを強調したい場合に適しています。ただし、項目数が多い場合はスクロール可能なデザインを検討するか、あるいは縦型タイムラインの方が適しているかもしれません。
See the Pen timeline-horizontal-sample by watashi-xyz (@watashi-xyz) on CodePen.
アイコン・画像・吹き出し風のカスタマイズ例
タイムラインデザインをより魅力的にするために、アイコンや画像、吹き出し風デザインなどの要素を取り入れてみましょう。
アイコン付きタイムライン
アイコンを使うことで、各イベントの内容をひと目で把握しやすくなります。Font Awesomeなどのアイコンフォントを使用すると簡単に実装できます：
<!-- HTMLの一部 -->
<li class="timeline-item">
<div class="timeline-icon">
<i class="fas fa-rocket"></i> <!-- Font Awesomeのロケットアイコン -->
</div>
<div class="timeline-content">
<div class="timeline-date">2022年</div>
<h3>プロジェクト開始</h3>
<p>新規プロジェクトのローンチ</p>
</div>
</li>
/* アイコン付きタイムラインのCSS */
.timeline-icon {
position: absolute;
left: 8px;
top: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: #3498db;
border: 4px solid #fff;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
}
/* アイコン付きの場合、標準のノードは非表示に */
.timeline-item:has(.timeline-icon)::before {
display: none;
}
See the Pen timeline-with-icon by watashi-xyz (@watashi-xyz) on CodePen.
画像付きタイムライン
特に企業の沿革や旅行記などでは、画像を効果的に取り入れることでより印象的なタイムラインになります：
<!-- HTMLの一部 -->
<li class="timeline-item">
<div class="timeline-image">
<img src="https://picsum.photos/40/40" alt="新オフィスオープン">
</div>
<div class="timeline-content">
<div class="timeline-date">2021年4月</div>
<h3>新オフィスオープン</h3>
<p>渋谷に新オフィスをオープンしました。</p>
</div>
</li>
/* 画像付きタイムラインのCSS */
.timeline-image {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
border: 4px solid #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 2;
}
.timeline-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 画像付きアイテムのコンテンツ位置調整 */
.timeline-item:has(.timeline-image) {
padding-left: 70px;
}
/* 画像付きの場合、標準のノードは非表示に */
.timeline-item:has(.timeline-image)::before {
display: none;
}
/* 大きな画像バージョン（左右交互配置） */
.timeline-large-image {
margin-bottom: 30px;
display: flex;
align-items: center;
position: relative;
}
.timeline-large-image:nth-child(odd) {
flex-direction: row;
}
.timeline-large-image:nth-child(even) {
flex-direction: row-reverse;
}
.timeline-large-image .timeline-image {
position: relative;
width: 200px;
height: 150px;
border-radius: 8px;
margin: 0 20px;
}
See the Pen timeline-with-image-01 by watashi-xyz (@watashi-xyz) on CodePen.
吹き出し風タイムライン
会話のような印象を与える吹き出し風のデザインは、特にユーザー体験やカスタマージャーニーなどの表現に適しています：
/* 吹き出し風タイムラインのCSS */
.timeline-bubble .timeline-content {
border-radius: 18px;
position: relative;
}
/* 左向き吹き出し */
.timeline-bubble .timeline-content::before {
content: '';
position: absolute;
top: 20px;
left: -15px;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 15px solid #fff;
}
/* 右向き吹き出し（偶数アイテム） */
.timeline-bubble.alternate .timeline-item:nth-child(even) {
padding-left: 0;
padding-right: 60px;
text-align: right;
}
.timeline-bubble.alternate .timeline-item:nth-child(even)::before {
left: auto;
right: 8px;
}
.timeline-bubble.alternate .timeline-item:nth-child(even) .timeline-content::before {
left: auto;
right: -15px;
border-right: none;
border-left: 15px solid #fff;
}
See the Pen timeline-with-bubble-01 by watashi-xyz (@watashi-xyz) on CodePen.
css スケジュール デザインや沿革向けスタイル例
特定の用途に特化したタイムラインデザインを作成すると、より情報が伝わりやすくなります。ここでは、イベントスケジュールや企業沿革に最適化したスタイル例を紹介します。
イベントスケジュール向けタイムライン
イベントスケジュールでは、時間帯や場所、登壇者などの情報を明確に表示することが重要です：
<div class="schedule-timeline">
<div class="timeline-item">
<div class="timeline-time">10:00 - 11:30</div>
<div class="timeline-content">
<h3>オープニングセッション</h3>
<div class="event-details">
<span class="event-location"><i class="fas fa-map-marker-alt"></i> メインホール</span>
<span class="event-speaker"><i class="fas fa-user"></i> 山田太郎</span>
</div>
<p>これからの技術トレンドについての講演</p>
</div>
</div>
<!-- 以下、スケジュール項目が続く -->
</div>
/* イベントスケジュール向けタイムラインCSS */
.schedule-timeline {
max-width: 800px;
margin: 0 auto;
}
.schedule-timeline .timeline-item {
display: flex;
margin-bottom: 20px;
position: relative;
}
.schedule-timeline .timeline-item::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 100px; /* 時間表示の幅に合わせる */
width: 2px;
background: #e0e0e0;
}
.schedule-timeline .timeline-time {
width: 100px;
padding: 15px 10px;
background: #3498db;
color: #fff;
font-weight: bold;
text-align: center;
border-radius: 4px;
position: relative;
z-index: 2;
}
.schedule-timeline .timeline-content {
flex: 1;
margin-left: 20px;
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
.event-details {
display: flex;
margin-bottom: 10px;
font-size: 14px;
color: #666;
}
.event-details span {
margin-right: 15px;
}
/* 休憩時間など特別なイベントのスタイル */
.schedule-timeline .timeline-item.break .timeline-time {
background: #95a5a6;
}
.schedule-timeline .timeline-item.break .timeline-content {
background: #f8f9fa;
}
このCSSタイムスケジュールデザインでは、左側に時間帯をはっきりと表示し、右側にイベント詳細を配置することで、一目でスケジュールを把握できるようにしています。また、休憩時間などを視覚的に区別するためのスタイルも用意しています。
See the Pen timeline-schedule-01 by watashi-xyz (@watashi-xyz) on CodePen.
企業沿革向けタイムライン
企業の歴史やマイルストーンを表現するタイムラインは、年代順に重要な出来事を視覚的に表現することが求められます：
<div class="history-timeline">
<div class="timeline-year">
<div class="year-marker">2000年</div>
<div class="timeline-items">
<div class="timeline-item">
<div class="timeline-date">4月</div>
<div class="timeline-content">
<h3>会社設立</h3>
<p>東京都渋谷区に本社を設立</p>
</div>
</div>
</div>
</div>
<div class="timeline-year">
<div class="year-marker">2010年</div>
<div class="timeline-items">
<div class="timeline-item">
<div class="timeline-date">3月</div>
<div class="timeline-content">
<h3>新製品発表</h3>
<p>主力製品「ProductX」の発売開始</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">11月</div>
<div class="timeline-content">
<h3>海外進出</h3>
<p>シンガポールに初の海外支社を設立</p>
</div>
</div>
</div>
</div>
<!-- 以下、年代ごとの項目が続く -->
</div>
/* 企業沿革向けタイムラインCSS */
.history-timeline {
max-width: 900px;
margin: 0 auto;
position: relative;
}
/* 縦線 */
.history-timeline::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 120px; /* 年表示の幅に合わせる */
width: 3px;
background: #e0e0e0;
}
.timeline-year {
margin-bottom: 40px;
position: relative;
}
.year-marker {
position: absolute;
top: 0;
left: 0;
width: 120px;
background: #2c3e50;
color: #fff;
text-align: center;
padding: 10px 0;
font-weight: bold;
border-radius: 4px;
z-index: 2;
}
.timeline-items {
padding-left: 150px;
padding-top: 50px; /* 年表示の高さ分余白を取る */
}
.history-timeline .timeline-item {
position: relative;
margin-bottom: 30px;
padding-left: 30px;
}
.history-timeline .timeline-item::before {
content: '';
position: absolute;
top: 10px;
left: -8px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #3498db;
border: 3px solid #fff;
z-index: 2;
}
.history-timeline .timeline-date {
font-weight: bold;
margin-bottom: 5px;
color: #2c3e50;
}
.history-timeline .timeline-content {
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
/* 10年単位など特別な年のマーカースタイル */
.timeline-year.milestone .year-marker {
background: #e74c3c;
}
.timeline-year.milestone::before {
content: '';
position: absolute;
top: 0;
left: 120px;
width: 20px;
height: 20px;
background: #e74c3c;
border-radius: 50%;
transform: translateX(-50%);
z-index: 3;
}
この沿革デザインCSSは、年代ごとにグループ化することで、長期間にわたる企業の歴史を整理して表示することができます。特に重要な年（創業年や記念すべき年など）を強調表示する機能も備えています。
See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.
以上、多彩なタイムラインデザインの実装方法を紹介しました。次の章では、これらのデザインをレスポンシブ対応させ、スマートフォンやタブレットなど様々な画面サイズでも適切に表示する方法を解説します。
スマホ対応！レスポンシブデザインの実践
タイムラインのデザインがパソコン画面では美しく表示されても、スマートフォンなどの小さな画面では崩れてしまっては台無しです。現代のウェブサイト制作において、レスポンシブ対応は必須の要素となっています。ここでは、CSSを使って様々なデバイスに対応するタイムラインの実装方法について解説します。
メディアクエリでの切り替え方法
レスポンシブデザインの基本は「メディアクエリ」の活用です。メディアクエリを使うことで、画面サイズに応じてスタイルを切り替えることができます。タイムライン専用のレスポンシブ対応は、主に以下のポイントに注目して設計します：
- 縦型・横型の切り替え
- 要素のサイズと余白の調整
- 配置方法の変更
基本的なメディアクエリの書き方は以下の通りです：
/* デスクトップ向けデザイン（基本） */
.timeline {
/* ベースとなるスタイル */
}
/* タブレット向けスタイル */
@media screen and (max-width: 768px) {
.timeline {
/* タブレットサイズで上書きするスタイル */
}
}
/* スマートフォン向けスタイル */
@media screen and (max-width: 480px) {
.timeline {
/* スマートフォンサイズで上書きするスタイル */
}
}
特に縦型タイムラインを小さな画面で表示する場合、左右のバランスや線の位置など、微調整が必要になることが多いです。例えば、デスクトップでは左右に交互に配置していたコンテンツを、スマホでは縦一列に変更するといった対応が一般的です。
ステップフローや画面幅に応じた配置調整
画面サイズが小さくなるにつれて、情報の配置や表示方法を適切に変更していく必要があります。タイムラインの「ステップフロー」、つまり情報の流れを示す部分は特に重要です。
例えば、デスクトップでは左右交互に配置していたタイムラインを、スマホでは以下のように変更することが考えられます：
- すべての項目を左揃えに変更
- 中央線と丸印のサイズを小さくする
- 余白や文字サイズを調整する
以下のコードは、左右交互型タイムラインをスマホ対応させる例です：
/* 基本的なタイムラインスタイル */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* 中央線 */
.timeline::after {
content: '';
position: absolute;
width: 4px;
background-color: #3498db;
top: 0;
bottom: 0;
left: 50%; /* デスクトップでは中央に配置 */
margin-left: -2px;
}
/* タイムライン項目コンテナ */
.timeline-item {
padding: 10px 40px;
position: relative;
width: 50%; /* 左右どちらかに配置するため半分の幅 */
}
/* 左側に配置する項目 */
.timeline-item:nth-child(odd) {
left: 0;
}
/* 右側に配置する項目 */
.timeline-item:nth-child(even) {
left: 50%;
}
/* 丸印 */
.timeline-item::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
right: -8px; /* 左側項目の丸印位置 */
background-color: white;
border: 4px solid #3498db;
border-radius: 50%;
top: 15px;
}
/* 右側項目の丸印位置調整 */
.timeline-item:nth-child(even)::after {
left: -8px;
}
/* スマートフォン向けスタイル */
@media screen and (max-width: 600px) {
/* 中央線を左側に移動 */
.timeline::after {
left: 31px; /* 左端から少し内側に配置 */
}
/* すべての項目を左揃えにし、幅を最大に */
.timeline-item {
width: 100%;
padding-left: 70px; /* 左側に中央線+丸印分のスペースを空ける */
padding-right: 25px;
}
/* 左右両方の項目を同じ位置に配置 */
.timeline-item:nth-child(odd),
.timeline-item:nth-child(even) {
left: 0;
}
/* 丸印の位置を統一 */
.timeline-item::after,
.timeline-item:nth-child(even)::after {
left: 23px; /* 左端から一定距離に配置 */
}
}
これにより、デスクトップでは左右に交互に表示されていたタイムラインが、スマートフォンでは左側に寄せられ、縦一列で表示されるようになります。
レスポンシブ対応の実装例とポイント
実際にレスポンシブ対応したタイムラインの完全な実装例を見てみましょう。このコードは、様々な画面サイズに対応する縦型タイムラインの例です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レスポンシブタイムライン</title>
<style>
/* 全体のスタイリング */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Helvetica', sans-serif;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
padding: 20px;
}
/* タイムライン全体のコンテナ */
.timeline-container {
max-width: 1200px;
margin: 0 auto;
position: relative;
padding: 20px 0;
}
/* タイムラインの中央線 */
.timeline-container::after {
content: '';
position: absolute;
width: 4px;
background-color: #2c3e50;
top: 0;
bottom: 0;
left: 50%;
margin-left: -2px;
}
/* タイムライン項目 */
.timeline-item {
padding: 10px 40px;
position: relative;
width: 50%;
margin-bottom: 30px;
}
/* 左側項目 */
.timeline-item:nth-child(odd) {
left: 0;
}
/* 右側項目 */
.timeline-item:nth-child(even) {
left: 50%;
}
/* 日付表示 */
.timeline-date {
background-color: #2c3e50;
color: white;
display: inline-block;
padding: 5px 15px;
border-radius: 20px;
font-size: 14px;
margin-bottom: 10px;
}
/* 項目の内容コンテナ */
.timeline-content {
padding: 20px;
background-color: white;
position: relative;
border-radius: 6px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
/* 項目見出し */
.timeline-content h3 {
margin-top: 0;
color: #2c3e50;
font-size: 18px;
}
/* 丸印 */
.timeline-item::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: white;
border: 4px solid #2c3e50;
border-radius: 50%;
top: 20px;
z-index: 1;
}
/* 左側項目の丸印 */
.timeline-item:nth-child(odd)::after {
right: -10px;
}
/* 右側項目の丸印 */
.timeline-item:nth-child(even)::after {
left: -10px;
}
/* 吹き出し風の矢印 */
.timeline-content::before {
content: '';
position: absolute;
top: 20px;
width: 0;
height: 0;
border-style: solid;
}
/* 左側項目の矢印 */
.timeline-item:nth-child(odd) .timeline-content::before {
right: -15px;
border-width: 10px 0 10px 15px;
border-color: transparent transparent transparent white;
}
/* 右側項目の矢印 */
.timeline-item:nth-child(even) .timeline-content::before {
left: -15px;
border-width: 10px 15px 10px 0;
border-color: transparent white transparent transparent;
}
/* タブレット対応 */
@media screen and (max-width: 768px) {
.timeline-container::after {
left: 40px;
}
.timeline-item {
width: 100%;
padding-left: 80px;
padding-right: 20px;
}
.timeline-item:nth-child(odd),
.timeline-item:nth-child(even) {
left: 0;
}
.timeline-item::after {
left: 30px;
}
.timeline-item:nth-child(odd)::after,
.timeline-item:nth-child(even)::after {
left: 30px;
}
.timeline-content::before {
left: -15px;
border-width: 10px 15px 10px 0;
border-color: transparent white transparent transparent;
}
.timeline-item:nth-child(odd) .timeline-content::before {
left: -15px;
right: auto;
border-width: 10px 15px 10px 0;
border-color: transparent white transparent transparent;
}
}
/* スマートフォン対応 */
@media screen and (max-width: 480px) {
.timeline-date {
font-size: 12px;
}
.timeline-content {
padding: 15px;
}
.timeline-content h3 {
font-size: 16px;
}
.timeline-item {
padding-left: 60px;
margin-bottom: 20px;
}
.timeline-container::after {
left: 20px;
}
.timeline-item::after {
width: 16px;
height: 16px;
left: 12px;
}
}
</style>
</head>
<body>
<div class="timeline-container">
<div class="timeline-item">
<div class="timeline-date">2023年1月</div>
<div class="timeline-content">
<h3>プロジェクト開始</h3>
<p>新しいウェブサイト制作プロジェクトが正式に始動しました。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2023年3月</div>
<div class="timeline-content">
<h3>デザイン完成</h3>
<p>UI/UXデザインが完成し、クライアントから承認を得ました。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2023年5月</div>
<div class="timeline-content">
<h3>開発フェーズ</h3>
<p>フロントエンド開発とバックエンド開発が並行して進行中です。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2023年7月</div>
<div class="timeline-content">
<h3>テスト実施</h3>
<p>統合テストとユーザーテストを実施し、フィードバックを収集しています。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2023年9月</div>
<div class="timeline-content">
<h3>サイト公開</h3>
<p>すべてのテストを通過し、新しいウェブサイトを正式に公開しました。</p>
</div>
</div>
</div>
</body>
</html>
See the Pen timeline-responsive-01 by watashi-xyz (@watashi-xyz) on CodePen.
このコードの実装ポイントは以下の通りです：
- 基本構造を維持しながら配置を変更する： デスクトップでは左右交互レイアウト、タブレットとスマホでは左揃えレイアウトに変更し、それぞれで読みやすさを確保しています。
- 要素サイズの段階的調整： デバイスのサイズに応じて、フォントサイズ、余白、アイコンのサイズなどを徐々に小さくしていきます。
- 視覚的な一貫性を保つ： どのデバイスでも「時系列の流れ」が視覚的に理解できるよう、中央線と丸印の関係性を維持しています。
- パフォーマンスに配慮： 複雑なアニメーションや重いグラフィックは避け、軽量なCSS設計を心がけています。
特に重要なのは、スマートフォンでの表示です。小さな画面では、情報の優先順位を考慮した配置が必要になります。タイムライン要素の縦線は画面の左側に寄せ、コンテンツは右側に十分なスペースを確保することで、読みやすさを維持しています。
また、「ステップ フロー css レスポンシブ」という観点から見ると、情報の流れを示す視覚的な要素（線や丸印）を残しつつ、コンテンツ自体のレイアウトを変更することで、どのデバイスでも「ステップの流れ」が理解できるようになっています。
このような工夫により、デスクトップからスマートフォンまで、幅広いデバイスで美しく機能するタイムラインを実装することができます。タイムラインのレスポンシブ対応は、単にレイアウトを変更するだけでなく、ユーザー体験と情報の伝わりやすさを第一に考えた設計が重要です。
タイムラインの応用テクニック
基本的なタイムラインの実装をマスターしたら、次はさらに魅力的で機能的なタイムラインを作るための応用テクニックを学びましょう。CSSだけでできるアニメーションや、インタラクティブな要素の追加、より複雑なレイアウトの構築方法など、タイムラインをさらに一歩進化させるテクニックを解説します。
CSSだけでできる簡単アニメーション
タイムラインにアニメーションを追加することで、ユーザーの注目を集め、情報の流れをより効果的に伝えることができます。JavaScriptを使わなくても、CSSだけで印象的なアニメーションを実装できます。
フェードイン・スライドインアニメーション
タイムラインの各項目が画面にスクロールされたときに、フェードインしたりスライドインしたりするアニメーションは、視覚的な魅力を高めます。CSSの@keyframesとanimationプロパティを使って実装できます。
/* フェードインアニメーションの定義 */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 左からスライドインのアニメーション */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* 右からスライドインのアニメーション */
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* タイムライン項目にアニメーションを適用 */
.timeline-item {
/* 他のスタイル */
opacity: 0; /* 初期状態は非表示 */
}
/* 左側項目のアニメーション */
.timeline-item:nth-child(odd) {
animation: slideInLeft 0.6s ease forwards 0.3s;
}
/* 右側項目のアニメーション */
.timeline-item:nth-child(even) {
animation: slideInRight 0.6s ease forwards 0.3s;
}
このコードでは、左側の項目は左から、右側の項目は右からスライドしながらフェードインします。forwards値を使用することで、アニメーション終了後もその状態を維持します。
See the Pen timeline-responsive-02 by watashi-xyz (@watashi-xyz) on CodePen.
しかし、このアプローチだと、画面に表示される前からアニメーションが始まってしまう問題があります。より洗練された実装には、Intersection Observer APIを使用するJavaScriptが必要になりますが、単純なアニメーションであればCSSだけでも十分効果的です。
ステップバイステップの進行を表現するアニメーション
タイムラインの中央線が徐々に伸びていくアニメーションを追加することで、時間の流れを視覚的に表現できます。
/* 中央線のアニメーション */
@keyframes growLine {
from {
height: 0;
}
to {
height: 100%;
}
}
.timeline::after {
content: '';
position: absolute;
width: 4px;
background-color: #3498db;
top: 0;
bottom: 0;
left: 50%;
margin-left: -2px;
animation: growLine 2s ease-out forwards;
transform-origin: top center;
}
このアニメーションにより、タイムラインの線が上から下へと徐々に伸びていくように見えます。読み込み時に一度だけ実行されるシンプルなアニメーションですが、タイムラインの動的な性質を強調するのに効果的です。
See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.
ホバー時のインタラクションの追加方法
ユーザーがタイムラインの項目にマウスを重ねた時の反応を追加することで、インタラクティブ性を高めることができます。CSSの:hover疑似クラスを使って、様々な効果を実装できます。
基本的なホバーエフェクト
/* 項目のホバー効果 */
.timeline-item .timeline-content {
transition: all 0.3s ease;
}
.timeline-item:hover .timeline-content {
transform: scale(1.03);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* 丸印のホバー効果 */
.timeline-item::after {
transition: background-color 0.3s ease;
}
.timeline-item:hover::after {
background-color: #3498db;
}
このコードでは、ユーザーがタイムラインの項目にマウスを重ねると、コンテンツボックスが少し大きくなり、影が濃くなります。また、丸印の色も変化します。transitionプロパティを使うことで、変化がスムーズに行われます。
See the Pen timeline-hover-01 by watashi-xyz (@watashi-xyz) on CodePen.
詳細情報の表示・非表示
タイムラインの項目に詳細情報を隠しておき、ホバー時に表示することもできます。
/* 詳細情報のスタイル */
.timeline-details {
height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.5s ease;
}
/* ホバー時に詳細情報を表示 */
.timeline-item:hover .timeline-details {
height: auto;
padding: 10px 0;
opacity: 1;
}
対応するHTMLは以下のようになります：
<div class="timeline-item">
<div class="timeline-date">2023年1月</div>
<div class="timeline-content">
<h3>プロジェクト開始</h3>
<p>新しいウェブサイト制作プロジェクトが正式に始動しました。</p>
<div class="timeline-details">
<p>プロジェクトメンバー10名が結集し、キックオフミーティングを実施。プロジェクトのゴールと各自の役割を明確化しました。予算3000万円、期間は9ヶ月を予定しています。</p>
</div>
</div>
</div>
このアプローチにより、初期状態ではコンパクトな表示を維持しつつ、ユーザーが興味を持った項目については詳細情報を表示することができます。
See the Pen timeline-hover-02 by watashi-xyz (@watashi-xyz) on CodePen.
複雑なステップフローやスケジュールの構築方法
より複雑なタイムラインや、多層的な情報を表現したい場合には、基本的なタイムラインを拡張するテクニックがあります。
枝分かれするタイムライン
プロジェクトの分岐や並行して進行するタスクを表現するために、枝分かれするタイムラインを作成できます。
/* 基本的なタイムラインスタイル */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* メインの中央線 */
.timeline::after {
content: '';
position: absolute;
width: 4px;
background-color: #3498db;
top: 0;
bottom: 0;
left: 50%;
margin-left: -2px;
}
/* 枝分かれ用のスタイル */
.timeline-branch {
position: relative;
margin-left: 60px;
padding-left: 20px;
border-left: 2px dashed #3498db;
}
/* 枝分かれ項目 */
.branch-item {
padding: 10px;
margin-bottom: 15px;
background-color: #ecf0f1;
border-radius: 4px;
}
対応するHTMLは以下のようになります：
<div class="timeline">
<div class="timeline-item">
<div class="timeline-date">2023年1月</div>
<div class="timeline-content">
<h3>プロジェクト開始</h3>
<p>新しいウェブサイト制作プロジェクトが正式に始動しました。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-date">2023年3月</div>
<div class="timeline-content">
<h3>デザインフェーズ</h3>
<p>UI/UXデザインが開始されました。</p>
<!-- 枝分かれ部分 -->
<div class="timeline-branch">
<div class="branch-item">
<h4>ワイヤーフレーム作成</h4>
<p>3月1日〜3月10日</p>
</div>
<div class="branch-item">
<h4>デザインカンプ制作</h4>
<p>3月11日〜3月25日</p>
</div>
<div class="branch-item">
<h4>クライアントレビュー</h4>
<p>3月26日〜3月31日</p>
</div>
</div>
</div>
</div>
<!-- 以下、タイムラインの続き -->
</div>
See the Pen timeline-branch-01 by watashi-xyz (@watashi-xyz) on CodePen.
このように、メインのタイムラインから枝分かれさせることで、サブタスクやサブイベントを表現できます。
複数のグループやカテゴリを持つタイムライン
プロジェクトの複数の側面（例：デザイン、開発、マーケティング）を並行して表示したい場合、カテゴリ別のタイムラインを構築できます。
/* カテゴリタブのスタイル */
.timeline-categories {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.category-tab {
padding: 10px 20px;
margin: 0 5px;
background-color: #ecf0f1;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.category-tab.active {
background-color: #3498db;
color: white;
}
/* カテゴリ別タイムラインのスタイル */
.timeline-category {
display: none; /* 初期状態では非表示 */
}
.timeline-category.active {
display: block; /* アクティブなカテゴリのみ表示 */
}
対応するHTMLは以下のようになります：
<div class="timeline-container">
<!-- カテゴリタブ -->
<div class="timeline-categories">
<div class="category-tab active" data-category="design">デザイン</div>
<div class="category-tab" data-category="development">開発</div>
<div class="category-tab" data-category="marketing">マーケティング</div>
</div>
<!-- デザインカテゴリのタイムライン -->
<div class="timeline-category active" id="design">
<!-- ここにデザイン関連のタイムライン項目 -->
</div>
<!-- 開発カテゴリのタイムライン -->
<div class="timeline-category" id="development">
<!-- ここに開発関連のタイムライン項目 -->
</div>
<!-- マーケティングカテゴリのタイムライン -->
<div class="timeline-category" id="marketing">
<!-- ここにマーケティング関連のタイムライン項目 -->
</div>
</div>
このカテゴリ切り替え機能を動作させるには、以下のような簡単なJavaScriptが必要です：
document.addEventListener('DOMContentLoaded', function() {
const tabs = document.querySelectorAll('.category-tab');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
// アクティブタブのクラスを切り替え
document.querySelector('.category-tab.active').classList.remove('active');
this.classList.add('active');
// アクティブコンテンツを切り替え
const category = this.getAttribute('data-category');
document.querySelector('.timeline-category.active').classList.remove('active');
document.getElementById(category).classList.add('active');
});
});
});
See the Pen timeline-group by watashi-xyz (@watashi-xyz) on CodePen.
ただし、今回は「CSSだけでできる」というテーマに焦点を当てていますので、JavaScriptを使わない方法として、:target擬似クラスを使ったアプローチも考えられます：
.timeline-category {
display: none;
}
.timeline-category:target {
display: block;
}
/* デフォルト表示用 */
#default:not(:target):not(:target) ~ #design {
display: block;
}
対応するHTMLは以下のようになります：
<div class="timeline-container">
<div id="default"></div>
<!-- カテゴリタブ -->
<div class="timeline-categories">
<a href="#design" class="category-tab">デザイン</a>
<a href="#development" class="category-tab">開発</a>
<a href="#marketing" class="category-tab">マーケティング</a>
</div>
<!-- 各カテゴリのタイムライン -->
<div class="timeline-category" id="design"><!-- デザイン関連 --></div>
<div class="timeline-category" id="development"><!-- 開発関連 --></div>
<div class="timeline-category" id="marketing"><!-- マーケティング関連 --></div>
</div>
See the Pen timeline-group-02 by watashi-xyz (@watashi-xyz) on CodePen.
このアプローチでは、HTMLのアンカーリンクを使ってカテゴリ間を移動します。URLのハッシュ部分が変わることで、:target擬似クラスが適用され、対応するコンテンツが表示されます。
進捗状況を表現するタイムライン
プロジェクトの進捗度合いをビジュアル化するタイムラインも、とても効果的です。完了したステップと進行中のステップを明確に区別できます。
/* 進捗表示用タイムライン */
.progress-timeline {
position: relative;
max-width: 1000px;
margin: 0 auto;
}
.progress-line {
position: absolute;
top: 20px;
left: 0;
height: 6px;
width: 100%;
background-color: #ecf0f1;
z-index: 1;
}
.progress-line-fill {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #2ecc71;
width: 60%; /* 進捗度合いに応じて調整 */
transition: width 1s ease;
}
.progress-step {
position: relative;
z-index: 2;
margin-bottom: 50px;
text-align: center;
}
.progress-dot {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #ecf0f1;
border: 6px solid white;
margin-bottom: 10px;
}
.progress-step.completed .progress-dot {
background-color: #2ecc71;
}
.progress-step.active .progress-dot {
background-color: #3498db;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
}
}
対応するHTMLは以下のようになります：
<div class="progress-timeline">
<div class="progress-line">
<div class="progress-line-fill"></div>
</div>
<div class="progress-steps">
<div class="progress-step completed">
<div class="progress-dot"></div>
<h3>要件定義</h3>
<p>完了</p>
</div>
<div class="progress-step completed">
<div class="progress-dot"></div>
<h3>デザイン</h3>
<p>完了</p>
</div>
<div class="progress-step active">
<div class="progress-dot"></div>
<h3>開発</h3>
<p>進行中</p>
</div>
<div class="progress-step">
<div class="progress-dot"></div>
<h3>テスト</h3>
<p>予定</p>
</div>
<div class="progress-step">
<div class="progress-dot"></div>
<h3>リリース</h3>
<p>予定</p>
</div>
</div>
</div>
このコードを適用するには、CSSでステップの位置や進捗ラインの長さを調整する必要があります。flexboxを使って各ステップを均等に配置するとよいでしょう：
.progress-steps {
display: flex;
justify-content: space-between;
}
.progress-step {
flex: 1;
}
See the Pen timeline-progress-01 by watashi-xyz (@watashi-xyz) on CodePen.
以上、タイムラインの応用テクニックについて解説しました。CSSだけでも様々なアニメーションやインタラクション、複雑なレイアウトを実現できることがわかりました。これらのテクニックを組み合わせて、あなたのプロジェクトに最適なタイムラインデザインを構築してください。視覚的に魅力的で、ユーザーにとって情報が理解しやすいタイムラインは、ウェブサイトの品質を大きく向上させる要素となります。
まとめ：CSSで魅力的なタイムラインを実装しよう
いかがでしたか？CSSを使ったタイムラインの実装方法について、基本から応用まで幅広くご紹介してきました。タイムラインはウェブサイトの沿革ページやプロジェクトの進行状況、イベントスケジュールなど、様々な場面で活用できる非常に便利な表現方法です。
この記事を通して、HTMLとCSSだけで視覚的に魅力的なタイムラインを作成できることを理解していただけたかと思います。基本的な縦型タイムラインから始まり、横型タイムライン、さらには複雑なデザインやレスポンシブ対応、アニメーション効果まで、ステップバイステップで解説してきました。
実際のウェブサイト制作において、タイムラインはただの装飾ではなく、情報を時系列で分かりやすく伝えるための重要な役割を担っています。特に会社の沿革ページや、プロジェクトの工程表、履歴表示など、時間の流れを視覚的に表現したい場面で大いに役立つでしょう。
CSSの疑似要素（::beforeや::after）を駆使することで、JavaScriptに頼ることなく豊かな表現が可能です。また、メディアクエリを活用したレスポンシブデザインにすることで、スマートフォンやタブレットなど、どのデバイスでも最適な表示が実現できます。
プロジェクトの要件に合わせて、この記事で紹介したテクニックをぜひカスタマイズしてみてください。基本的なHTMLとCSSの知識があれば、誰でも素敵なタイムラインを作成することができます。
この記事で紹介したコード例は、コピペしてすぐに使えるようになっていますが、ぜひ自分なりにカスタマイズして、オリジナルのタイムラインデザインを作り上げてみてください。CSSの調整次第で、サイトの世界観に合った唯一無二のタイムラインが完成します。
タイムラインはただ情報を時系列で並べるだけでなく、ストーリーを伝えるための強力なツールです。皆さんのウェブサイトやプロジェクトに、ぜひ魅力的なタイムラインを取り入れてみてください！
