実装が面倒なタイムラインコンテンツを簡単に実装できるスタイルシート -Timelined
Post on:2016年2月4日
sponsors
垂直に伸びた時間軸にポイントを配置し、そのポイントにコンテンツを紐付かせるタイムラインを簡単に実装できるスタイルシートを紹介します。
Timelinedのデモ
デモでは軸の位置、ポイントやコンテンツにさまざまなデザインが適用されており、カスタマイズ機能も備えています。
タイムラインはレスポンシブ対応で、表示サイズに最適なデザインで表示されます。
AngularJSを使用したダイナミックなデモも。
Timelinedの使い方
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
|
1 2 3 4 |
<head> ... <link rel="stylesheet" href="css/timeline.css"> </head> |
Step 2: HTML
まずは基本構造。
|
1 2 3 4 5 6 7 8 9 10 |
<div class="timeline gray-blue"> <!-- 主要素のコンテナ --> <div class="timeline-block"> <!-- タイムラインの一つのブロック --> <div class="timeline-icon"></div> <!-- タイムライン上のアイコン --> <div class="timeline-content"> <p> Any content </p> <!-- コンテンツ --> <div class="timeline-date">Yesterday</div> <!-- 日付 --> </div> </div> ... </div> |
主要素のコンテナ「.timeline」にclassを加えることで、簡単にカスタマイズができます。
- .timeline-left
- コンテンツを常に右に配置し、ラインを左にします。
- .timeline-alternating
- ブロックがラインの左と右の交互に繰り返されます。
- .timeline-collapsing
- コンテナの表示サイズが小さい時（初期値: 800px）に、「.timeline-left」に変わります。
- .timeline-with-arrows
- ラインに向かってアローが表示されます。
- .timeline-icon-hide-border
- アイコンのサークルからボーダーを除去します。
sponsors
