タイムラインUI、実は「ライブラリ不要」でいけます
制作現場で「タイムライン風に表示してほしい」という要望は、実はかなり多くありませんか？
企業の沿革、サービスの歩み、進行中のプロジェクトなど、時間の流れをビジュアルで伝えるUIとして、タイムラインはとても有効です。
私も過去に何度もタイムラインを作りましたが、実はJavaScriptなし、CSSとHTMLだけで実装可能です。
レスポンシブ対応も含めて、工夫次第でかなりリッチな見た目を構築できると感じています。
今回は、私が実務で構築したタイムラインUIのパターンを元に、
- 基本の縦型構造
- 交互に左右に並べる横型の切り替え
- レスポンシブ対応
- アニメーションの工夫
といったポイントを順に紹介していきます。
1. タイムラインUIの用途と魅力
活用される場面が多い
タイムラインUIは、以下のような場面でよく活用されます：
- 企業の沿革・ヒストリー
- プロジェクトの進捗状況
- 採用サイトの流れ紹介（選考ステップなど）
- イベントの開催スケジュール
- サービスのローンチ履歴 など
つまり、「時間の流れに沿って、順を追って情報を伝えたい場面」に非常に適しています。
ライブラリなしでも十分実用的
よく見かけるJSライブラリ（AOS.js や Timeline.js など）を使えば簡単にできますが、
- カスタマイズが効かない
- ページ速度が気になる
- デザインガイドラインに合わない
といった理由から、**ライブラリなしで一から組むケースも少なくありません。
実際、HTMLとCSSの基本要素（Grid / Flexbox / 擬似要素）を組み合わせれば、十分にタイムラインは表現可能です。
実務に向く理由
| 特徴 | メリット |
|---|---|
| 構造がシンプル | コーディングの学習・保守が容易 |
| 視認性が高い | 時系列を直感的に把握できる |
| アニメーションとの親和性が高い | フェードイン／ズーム／移動など、視覚効果が付けやすい |
次章では、まずもっとも基本となる“縦型タイムライン”の構造とCSSの実装方法について詳しく解説します。
2. 基本構造：HTMLとCSSで作る縦型タイムライン
タイムラインUIを実装するうえで最初に押さえたいのが、縦型のベース構造です。
これだけでも情報の時系列が明確になり、シンプルながら非常に視認性の高いUIが構築できます。
このように、timeline-item を時系列順に並べるだけでOK。
各項目は日付と内容に分けておくと、CSSでの装飾がしやすくなります。
✅ 主な工夫ポイント：
| 構成 | 役割 |
|---|---|
border-left | タイムラインの軸線を表現 |
::before | 軸線上のドット（ノード）を疑似要素で生成 |
margin-left / padding-left | 軸からの余白を調整 |
カスタマイズのポイント
::beforeの色やサイズを変えると、節目の強調が可能:nth-child(even)で背景色を交互にするなど、視認性向上も簡単に実現- コンテンツ部分に
box-shadowやborderをつけても効果的
このように、縦型タイムラインは極めて少ないHTMLとCSSで実現できます。
続いて、この縦型構造をベースに、PCで左右交互に表示する横型タイムラインへの展開方法を解説します。
3. レスポンシブ対応：画面サイズに応じたレイアウトの切り替え
縦型タイムラインはシンプルで使いやすいですが、PCのように横幅がある環境では“左右交互に並べる”ことで視覚的に動きが生まれます。
ここでは、スマホでは縦、PCでは左右交互の横型に切り替える方法を紹介します。
HTML構造はそのまま再利用
第2章で使ったHTML構造のままでOKです。
CSSで見た目だけ切り替えるため、HTMLは1パターンで済みます。
PC表示時に左右交互に並べるCSS
このCSSの意図とポイント
| 対応内容 | 説明 |
|---|---|
width: 50% | タイムライン項目を左右に半分ずつ分割 |
:nth-child(odd/even) | 偶奇で表示位置・整列方向を切り替え |
timeline::before | 中央の縦線を追加（軸線） |
::before の位置切替 | 左右のドット位置も合わせて調整 |
実務での注意点
- 左右に分ける際は
box-sizing: border-boxを指定しないと、横幅オーバーの原因になる - テキストが多い場合、片方に偏らないよう
min-heightやflex調整も検討 - アニメーション追加時は
transform: translateX()などを使うと破綻しにくい
このように、同じHTML構造をCSSの制御だけでレイアウト切り替えすることで、
メンテナンス性と柔軟性を両立できます。
4. デザインの工夫：アニメーションと視覚的な強調
タイムラインは情報を整理するだけでなく、視線の誘導やインパクトのある見せ方にも工夫ができます。
この章では、実務で使いやすいアニメーションやデザイン強調テクニックを紹介します。
フェードインアニメーション（スクロール時）
IntersectionObserverを使わず、CSSだけでの実装も可能になってきましたが、ここでは軽量なJSによるフェードインの定番パターンを紹介します。
💡 ポイント：
- 初期状態で
opacity: 0、下から浮かせておく - スクロールで表示領域に入ったら
visibleクラスを付与
ドットの色や大きさでフェーズを分ける
- プロジェクトの重要マイルストーンや切り替え点をドットの色やサイズで強調できます
.completed,.future,.milestoneなどのクラスで使い分けると視認性が上がります
左右交互のアイコン配置（擬似要素応用）
各アイテムの前にアイコンを表示し、左右交互に切り替えることで、見た目に変化をつけながら情報の意味も伝えられます
nth-childを使って左右でleft/rightの位置を切り替え- フォントアイコン（Font Awesomeなど）も応用可能
ここまでで実現できるUIの特徴
| 機能 | 方法 |
|---|---|
| 項目の出現アニメーション | JS（IntersectionObserver or 1回限り） |
| ドット強調・カテゴリ分け | クラスでスタイル切り替え |
| 左右交互にアイコン表示 | 擬似要素＋nth-child |
5. 実践向けデモとコード解説
それでは、前章までの要素をすべて組み込んだ実務向けのレスポンシブタイムラインUIをご紹介します。
- 縦型から左右交互の横型にレスポンシブ対応
- スクロールでふわっと出てくるアニメーション
- カテゴリ別にドットの色を変更
カスタマイズ例
.timeline-contentにbackgroundをつけるとカード風に- 各ノードにアイコン（SVG / Font Awesome）を表示することで用途を明確化
- アニメーションを
fade,slide,zoomなどに切り替えて動きを変化
このように、HTMLとCSSをベースに最小限のJSで実用的なタイムラインUIを作ることができます。
実案件でも十分に活用できる構成です。
6. まとめ：HTMLとCSSだけでも魅せられるタイムラインUI
タイムラインUIは「動きがあるからJavaScript前提」と思われがちですが、
実はCSSとHTMLだけでほとんどの表現が可能です。
今回紹介した構成では、
- 縦型 → 横型へのレスポンシブ切り替え
- 擬似要素による軸線・ドットの装飾
- スクロール連動のアニメーション追加
- 項目ごとの強調やアイコン配置の工夫
といった多様なニーズに対応でき、実務案件でも“使える構成”としてそのまま導入できます。
CSS Gridや論理プロパティ、IntersectionObserverのような軽量JSを併用することで、
「ライブラリなし・保守性重視・デザイン柔軟」なUI設計が十分可能になります。
これにて、「このデザイン、どうコーディングする？」シリーズは一区切りです。
全8回を通じて、現場で実際に遭遇するCSS設計の課題を、シンプルかつ実践的なアプローチで解決する方法を紹介してきました。
どの記事も「現場で本当に使えるか？」を軸に構成していますので、今後の案件で「あのテクニック使えそう」と思い出していただけたら嬉しいです。
ご愛読ありがとうございました！
