タイムラインコンテンツを作る

2017.03.31

仕事履歴だとスキルシートだのコンペ歴だの資格一覧だの諸々、タイムライン作った方が情報を伝えやすいものがある。
せっかくなので見栄えがよろしいタイムラインコンテンツを作ろうと思うところなので、組み込んでみた感じを見てほしい。
全てレスポンシブ対応！

組み込むのって、既存のCSSの影響受けるから、結構時間かかるんデスヨ。
class名既存とよく被るに外側をdiv#XXXで囲って区別してるわけではないしね。

だが、『全部一緒のページに表示させられるかな？」という冒険心がここにある。

css timeline

  • 2017-4-1

    使ってみた

    HTML、CSSのみなので、簡単に設定できる。

  • 2017-4-1

    感想・使い勝手

    動きはないが、シンプルゆえに使い勝手が良いし、結局シンプルが一番見やすい。

    CSSもシンプルなので直すとき解りやすくてありがたい。

CSS3 TIMELINE

  • 2017-3-30～

    HTML、SCSSのみなので、簡単に設定できる。

  • 2017-3-31

    既存に組み込むには被りやすいclass名が多いため、書き換えが多い。

    狭いサイトに長い文章だと吹き出しからあふれるので、とりあえず『.radio:checked ~ .content』を『max-height: 500px;』あたりにしておくと誤魔化せる。

    時間枠を狭くするため『#timeline』を『margin: 50px 0 30px 100px;』、 『.date』を『left: -148px;』にしてある。 これが分らなくて凄い時間かけてしまった…

    スマホ用表示時日時は見せない仕様。

Responsive CSS Timeline with 3D Effect

  • 2017-3-31

    I used it!

    HTML、SCSSのみなので、簡単に設定できる。

  • 2017-4-1

    感想・使い勝手

    組み込みやすいが、幅が必要でかつ親要素に背景色指定必須。

    線と●がずれた場合『.event』や『li』『ul』のpaddingやmarginを調整。

    スマホ用表示時日時は見せない仕様。

Vertical Timeline

Picture

使ってみた

HTML、SCSSのみなので、簡単に設定できる。

Read more 2017-4-2
Location

感想・使い勝手

ほぼ書き換え要らず！

『.cd-timeline-img img』に『box-shadow:none;』が足りてない。

2017-4-2

コメント

タイトルとURLをコピーしました