【cssサンプル】年表、沿革、タイムラインのデザイン9選

年表などのデザインって稀にしかしないので、いざデザインする時に面倒臭いですよね。

ここでは、年表やタイムラインのデザインの参考になるものを紹介していきます。

Vertical Timeline

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

レスポンシブ対応のタイムライン。

VERTICAL TIMELINE

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

レスポンシブで動きはなくシンプルですが、だからこそいろいろと応用ができそうなデザイン。

RESPONSIVE CSS TIMELINE WITH 3D EFFECT

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

JSは使用しておらず、inputのcheckboxと疑似クラスの「:checked」を使ってCSS3で表現されているレスポシブデザイン。

 CSS3 TIMELINE

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

「RESPONSIVE CSS TIMELINE WITH 3D EFFECT」と同じく、クリックすることで本文が現れる仕様。疑似クラス「:checked」を使用しています。

Pure CSS Timeline

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

帯タイプの簡単なタイムライン。

Dark Responsive Timeline with Bootstrap

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

Bootstrapを使用した、レスポンシブのタイムライン。

Bootstrap Timeline

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

こちらもBootstrapを使用したタイムライン。

ただしこちらはレスポンシブ非対応。

Pure CSS Timeline

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

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

Timeline JS

http://timeline.knightlab.com/

JSの作り込まれたプラグイン。

横スクロール型で、上のコンテンツと下の年表が連動しています。

プロおすすめの関連商品

おすすめ記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です