こんにちは、デザイナーのサリーです。
今回は「タイムライン」のサンプルを10例ほど紹介していきます。

たとえばLIGの沿革ページもSNSのタイムラインっぽいデザインになっているように、沿革や実績をタイムラインで見せたいという要望はときどきあるので、デザインの際の参考になればと思います。

それでは、はじめます。

さまざまなタイムライン10例

1. Vertical Timeline

http://codyhouse.co/gem/vertical-timeline/

レスポンシブ対応のタイムライン。
JSも使用していて、スクロールでコンテンツが“びよよん”と気持ちいい動きで出現します。
中央のカテゴリーのアイコンがアクセントになっていて、かわいいですね。

2. VERTICAL TIMELINE

http://tympanus.net/codrops/2013/05/02/vertical-timeline/

「Codrops」のベーシックなプラグインやレイアウトのコレクション、「BLUEPRINTS」にカテゴライズされているタイムラインです。
レスポンシブで動きはなくシンプルですが、だからこそいろいろと応用ができそうなデザインです。

3. RESPONSIVE CSS TIMELINE WITH 3D EFFECT

http://tympanus.net/codrops/2012/11/19/responsive-css-timeline-with-3d-effect/

こちらのタイムラインも「Codrops」からで、レスポンシブです。
スターウォーズのキャラクターが会話しているデモが楽しいですね。
チェックをすることでタイトル以下の本文が“ぼわん”と出てきますが、JSは使用しておらず、inputのcheckboxと疑似クラスの「:checked」を使ってCSS3で表現されています。

4. CSS3 TIMELINE

http://codepen.io/P233/pen/lGewF

フラットでとてもシンプルなレスポンシブのタイムライン。
こちらも「RESPONSIVE CSS TIMELINE WITH 3D EFFECT」と同じく、クリックすることで本文が現れる仕様で、疑似クラス「:checked」を使用しています。

5. Design and Build a Responsive Timeline Portfolio Page

http://webdesign.tutsplus.com/series/design-and-build-a-responsive-timeline-portfolio-page–cms-536

こちらではPhotoshopでのデザインからSassを使用してのコーディングまで、レスポンシブのタイムラインつきプロフィールページを作るための丁寧なチュートリアルを見ることができます。（英文ですが）
デザイン編・コーディング編・仕上げ編の全3編で、最後は自動読み込みの方法まで丁寧に書かれているので、全編通して作ってみたらかなり勉強になりそうです！
完成したDemoは右サイドバーの「View Online Demo」から見ることができます。

6. Pure CSS Timeline

http://mattbango.com/notebook/code/pure-css-timeline/

帯タイプの簡単なタイムライン。
期間もわかるようにしたいときはこちらが参考になりますね。

7. Dark Responsive Timeline with Bootstrap

http://blog.templatemonster.com/2014/04/23/tutorial-build-vertical-timeline-archives-page-using-bootstrap/

Bootstrapを使用した、レスポンシブのタイムライン。
スタンダードな形です。

8. Bootstrap Timeline

http://codepen.io/betdream/details/Ifvbi

こちらもBootstrapを使用したタイムライン。
デザインは一番はじめに紹介した「Vertical Timeline」に似ています。
ただしこちらはレスポンシブ対応ではないのでご注意を。

9. Pure CSS Timeline

http://codepen.io/christian-fei/pen/BJily

1年ごとの切り替わりがわかりやすい、レスポンシブのタイムラインです。

10. Timeline JS

http://timeline.knightlab.com/

こちらはJSのプラグインです。
横スクロール型で、上のコンテンツと下の年表が連動しています。
下の年表のクリックでも左右の矢印でも移動ができる上に、年表の目盛りの大きさを変えることも可能という作り込まれたプラグインです。

まとめ

同じ「タイムライン」というカテゴリーでも、さまざまなデザインがありました。
CSS3と擬似クラス:checkedを使うことで、JSなしでも簡単な動きのついたタイムラインが作れるんですね〜！
コーディング後のサンプルだと、レスポンシブの動きも参考になっていいですね。
勉強になりました。