【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の作り込まれたプラグイン。

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

プロおすすめの関連商品

１冊ですべて身につくＨＴＭＬ＆ＣＳＳとＷｅｂデザイン入門講座 /ＳＢクリエイティブ/Ｍａｎａ

posted with カエレバ

楽天市場

Amazon

なるほどデザイン 目で見て楽しむデザインの本。 /エムディエヌコ-ポレ-ション/筒井美希

posted with カエレバ

楽天市場

Amazon

けっきょく、よはく。 余白を活かしたデザインレイアウトの本 /ソシム/ｉｎｇｅｃｔａｒ-ｅ

posted with カエレバ

楽天市場

Amazon

ノンデザイナ-ズ・デザインブック 第４版/マイナビ出版/ロビン・ウィリアムズ

posted with カエレバ

楽天市場

Amazon

今日の人気記事

• アニメ・ゲーム・漫画のタイトル風ロゴジェネレーターまとめ！簡単ロゴ作成
• 48グループからAV女優になった元アイドルメンバーまとめ【AKB・SKE・HKT・NMB】
• 世界のおもしろい言語！かっこいい・かわいい文字がたくさん
• なぜ米津玄師はパクリと言われるのか？ 似ている曲やルーツを解説！【初期から2021年まで】
• 【ドラゴンキングダムとは】冨樫がイラストを描いたカードゲーム【邪教を広める者 kraft.heil】
• YouTubeに最初に投稿された動画は？日本からの初投稿も紹介
• 英語のエラーメールの意味・解説一覧（failure notice、MAILER-DAEMON）
• シングル・ダブル・トリプルの次は？クワトロ？
• ドラマ･映画･テレビ番組タイトル風ロゴジェネレーター-無料でロゴ作成！
• 【元アイドルAV女優】中川美優→依田まのはガセ！【まねきケチャリーダー】