年表や沿革など タイムラインが簡単に実装できる便利なライブラリ16選まとめ

こんにちは👩

タイ社員旅行記をブログに書き起こそうとするも内容が多すぎて挫折している社員Aです。

タイで撮った写真は全部で360枚を超えていたので、どれをセレクトするかも迷ってしまっています（笑）

さて、今回は「年表や沿革などのタイムラインが簡単に実装できる便利なライブラリ」をまとめていきたいと思います。

私が最近コーディングした案件でこのタイムライン表示が必要だったので、実際に使ったものと、今後使ってみたいものをまとめました。

タイムラインコンテンツは1から作ると大変なので、ライブラリを使ってカスタマイズすると時短にもなります。

年表や沿革で使えるタイムラインコンテンツ

タイムラインは年表や沿革などでよく使われているのを見かけますが、フローとしても取り入れると非常にわかりやすいです。

私がデザインした案件では、税理士事務所さんのサービスで「お問い合わせ〜起業」までのフローとしてタイムラインを取り入れました。

お客様のお問い合わせから依頼まで、事務所側とお客様側で必要な作業などが時系列で見られてわかりやすいからです。

実際このタイムラインは見やすいのですが、実装となるとコーダーの頭を悩ませますよね。

PC表示で見やすいようにコーディングしても、スマホはどうやって表示させようと考えるのが大変だったりします。

そんな時に今回ご紹介するようなライブラリやフレームワークがあればタイムラインのベースはできているので、デザインに合わせてカスタマイズしていくことで簡単に実装することができます。

タイムラインコンテンツが実装できるライブラリ

ここからは、実際にタイムラインコンテンツが簡単に実装できるライブラリを紹介します。

Vertical Timeline

デモを見ると分かるのですが、アニメーションもついています。左右からコンテンツが表示されるような形のタイムラインです。

また、スマホ版の表示も見やすいです。公式サイトではカスタマイズの方法も詳しく紹介されているので、とにかく簡単にタイムラインを実装したいときにおすすめです。

CodyHouse

 

126 Shares

11 Users

774 Pockets

Vertical Timeline | CodyHouse

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

Today's resource is an easy to customize, responsive timeline. We used some CSS3 tricks and a bit of JavaScript to create some bounce animations that affect desktop users only, while on mobile the structure is more minimal.

B1nj Timeline

凝ったデザインのものではなく、シンプルなタイムラインを導入したいときにおすすめなのが「B1nj Timeline」です。

見た目はシンプルですが、コンテンツ自体をアコーディオンで開閉することもできます。

www.b1nj.fr

 

1 Share

5 Pockets

B1nj Timeline. Simple Timeline html/css/javascript

http://www.b1nj.fr/tests/b1njTimeline/

CSS3 Timeline

CSSのみを使って作られたタイムラインです。

タイトルをクリックすると吹き出しが表示され、詳細が見られるような形になっています。

コンテンツ量が多くても、すっきり見やすいタイムラインが実装できます。

CodePen

 

7 Users

136 Pockets

CSS3 Timeline

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

Please set the $vertical variable to false to see the horizontal version....

Timeline Created With CSS Grid

CSSグリッドで作成されたタイムラインです。

スマホ表示になった時も見やすいし、コンテンツの追加も簡単に出来るのが良いなと思いました。

CodePen

 

7 Pockets

Responsive Timeline using CSS Grid & Grid Template Areas( Pug, Sass, Desc...

https://codepen.io/girlgeek/pen/OgqBgj

Responsive timeline created with CSS Grid. Browsers that do not support CSS Grid will get the mobile version of the timeline. ...

Scroll Timeline

左側の年数を押すとそれに合わせて右側のコンテンツが変化していきます。

また、クリックだけでなく、スクロールでも年数の部分の色が変化していきます。

企業の沿革などにぴったりのデザインだと思います。

CodePen

 

5 Shares

10 Pockets

Scroll Timeline (jQuery)

https://codepen.io/lebedevdesigns/pen/KQZYjo

...

timeline

実際にスクロールしていくと分かるのですが、これはすごいです。（笑）

時系列とともに背景画像も変化しています。

一般的なタイムラインとデザインに差をつけたい時におすすめです。

CodePen

 

5 Shares

35 Pockets

timeline

https://codepen.io/knyttneve/pen/bgvmma

...

Flexbox Timeline Layout

Flexboxを使って作られたタイムラインです。

最初から写真を入れるスペースまで作られているので、色などを好みのものに変えていけばすぐに使えそうですね。

CodePen

 

4 Shares

29 Pockets

Flexbox Timeline Layout

https://codepen.io/paulhbarker/pen/apvGdv

Column-based flexbox timeline layout. The goal is to have clean, semantic HTML while creating a (somewhat complex) timeline-looking layout....

Narrow Vertical Timelinr

また一味違ったタイムラインです。

左側の年数を押すと、右側のコンテンツが切り替わるタイプのタイムラインで、上下の矢印アイコンでも前後に移動できます。

CodePen

 

2 Users

9 Pockets

Narrow Vertical Timelinr

https://codepen.io/tylerberry/pen/LEzrXm

Making a narrow version of the Timelinr plugin to fit on a mobile screen....

Responsive Vertical Timeline

こちらは私が案件で実際に取り入れたタイムラインです。

CSSのみで実装されているので、カスタマイズも容易で割と短時間でデザイン通りに組み込むことが出来ました。

また、左右にコンテンツが入っていますが、片方だけ入れられることもできるので柔軟性が高いなと思いました。

CodePen

 

1 Share

12 Pockets

Responsive Vertical Timeline

https://codepen.io/Ratko_Solaja/pen/ztxkw

...

Responsive HTML Timeline

非常にシンプルなタイムラインでCSSだけで実装されているので、カスタマイズ性も抜群です。

レスポンシブにも対応しています。

CodePen

 

2 Users

19 Pockets

Responsive HTML Timeline

https://codepen.io/jplhomer/pen/lgfus

Inspired by the talented Dave Rupert (http://daverupert.com/about.html). Heck, it's pretty much his responsive timeline. I just wanted to give it a go....

Responsive slider timeline with Swiper

年数もしくは矢印アイコンを押すとフル画面で変動していくタイプのタイムラインです。

デザイン性を出したいときや、タイムラインをメインに打ち出したい時などにおすすめです。

CodePen

 

21 Shares

25 Pockets

Responsive slider timeline with Swiper

https://codepen.io/bcarvalho/pen/RZqmZX

A responsive slider timeline made with Swiper lib....

comments & feeadbacks & history timeline

チャット風になっているタイプのタイムラインです。

更新履歴やお知らせなどでも使えそうですね。

CodePen

comments & feeadbacks & history timeline

https://codepen.io/hosam1696/pen/NROjxq

Double side comment timeline tweenmax...

Timeline scribble

一見シンプルですが、スクロールで可視範囲に入ると◆の部分が動いたり、年数の部分の背景色が変わったりとアニメーションも入っているタイプのタイムラインです。

CodePen

 

1 User

17 Pockets

Timeline scribble

https://codepen.io/Fischaela/pen/sJdqg

...

responsive timeline v3

こちらは水平タイプのタイムラインです。

●部分をクリックするとそれに沿って下の内容が切り替わるようになっています。

CodePen

 

2 Shares

7 Pockets

responsive timeline v3

https://codepen.io/cjl750/pen/mXbMyo

A timeline on desktop that switches to clickable circles on mobile. Content changes as you click the circles. This pen is a re-imagining of https://cod...

Building a Horizontal Timeline With CSS and JavaScript

こちらも水平タイプのタイムラインですが、上下にコンテンツを入れられることが出来ます。

また、下部の矢印を押すことでスクロールされていき、年表が新しい方へ移動していきます。

CodePen

 

1 Share

31 Pockets

Building a Horizontal Timeline With CSS and JavaScript

https://codepen.io/tutsplus/pen/ZKpNwm

Read full tutorial by George Martsoukos (https://webdesign.tutsplus.com/tutorials/building-a-horizontal-timeline-with-css-and-javascri...

4 Panel Timeline CSS

パネルを使ったおしゃれなタイムラインです。

マウスオンした年数の背景画像が鮮明になり、コンテンツが表示されます。

他のタイムラインと差をつけたいときやデザイン性を求めたい時に使えそうです。

CodePen

 

5 Shares

9 Pockets

4 Panel Timeline CSS

https://codepen.io/jeffglenn/pen/KNYoKa

CSS only timeline for a client. Mobile styles coming soon....