経歴や会社の沿革ページに!簡単なCSSで実装するタイムライン

thumb_timeline

ちょうど今作っているサイトで、経歴をタイムラインで表現するページがあったのでコードを紹介。コード自体はとってもシンプルなので、カスタマイズ次第でどんなデザインのサイトにもあわせられると思います。文章にするとゴチャゴチャしがちな経歴・沿革をスッキリと表示しましょう!

サンプル

Chrome, Firefox, Safari, IE9・10で動作確認。

See the Pen Timeline by Mana (@manabox) on CodePen.

モバイルファーストってことで、640px未満の幅のデバイスには年月・見出し・詳細文章を順に表示します。

mobile

モバイル版はこんな感じ。サンプルページの画面の幅を調整して比較してください。

HTML

timeline というクラスのついたリストの中の li タグで項目を追加していきます。

<ul class="timeline">
  <li>
    <p class="timeline-date">2007年2月</p>
    <div class="timeline-content">
      <h3>カナダでワーキングホリデー</h3>
      <p>ワーホリビザで渡加。アクセサリーショップ等でバイト。カナダ生活を満喫。</p>
    </div>
  </li>
</ul>

timeline-date は年月、timeline-content 内にコンテンツを書き込んでいきます。この例では h3 で表題をつけていますが、別の見出しタグでも、見出しなしでもOK。

CSS

モバイル用

幅の狭い画面ではタイムライン風に表示すると窮屈になってしまったので、項目ごとに感覚をあけて羅列。

.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}

とりあえずこれだけ。とってもシンプルなので、お好みでカスタマイズしてくださいw

デスクトップ用

レスポンシブに

@media ( min-width : 640px ) {

  /* これからここにデスクトップ用のCSSを記述します */

}

media-queries で640px以上の幅のデバイス向けの記述をします。数値は調整可。

年月・コンテンツ部分

.timeline > li {
  overflow: hidden;
  margin: 0;
  position: relative;
}
.timeline-date {
  width: 110px;
  float: left;
  margin-top: 20px;
}
.timeline-content {
  width: 75%;
  float: left;
  border-left: 3px #e5e5d1 solid;
  padding-left: 30px;
}

先ほどの @media〜 の中に記述。 .timeline-date.timeline-contentfloat で横並びに。.timeline > li はモバイル用の記述で margin がついているので、ここでゼロにリセットします。そして overflow: hidden; でフロートをリセット。

non-overflow

overflow: hidden; をつけないと、こんな感じで崩れちゃいます。

丸印

.timeline-content:before {
  content: '\2022';
  font-size: 60px;
  position: absolute;
  left: 100px;
  color: #6fc173;
}

最後にタイムラインに表示する丸印を装飾。\2022 で丸が表示されます。丸の代わりに画像やアイコンを表示してもよさそう。

追記

丸印がフォントに依存すると環境によってはズレるとのご指摘を頂いたので、空コンテンツで書きなおしてみました。こちらでお試しくださいー。

.timeline-content:before {
  content: '';
  width: 12px;
  height: 12px;
  background: #6fc173;
  position: absolute;
  left: 106px;
  top: 24px;
  border-radius: 100%;
}

完成!

See the Pen Timeline by Mana (@manabox) on CodePen.

すべてのソースコードはHTML・CSSのタブをご覧ください。意外と簡単ですね!あなた好みに装飾したタイムラインもぜひ紹介してください!

シェアする

コメント

  • cyokodog

    IE9で生のhtmlで試したところ●がずれちゃいました。li を position:relativeしたら解決しました。
    http://cyokodog.github.io/CSS_STUDY/demo.html

  • http://webcreatorbox.com Webクリエイターボックス

    すみません、私も先ほど気づいて訂正しました!ご指摘ありがとうございます。

  • れたす

    MBP RetinaのChromeで見ると丸がづれるようです。

  • http://webcreatorbox.com Webクリエイターボックス

    うーん、私もメインブラウザーがMBP RetinaのChromeですが、ズレは見られませんね…。FF、Safari、IE10でも同様にうまく表示されてますです。実装する際は軽く調整してみてください!

  • uskisqus

    ●がフォントに依存してるからズレるんでしょうね。私もズレています(MBA、Chrome)。Beforeのcontentをborderで作ったらどうでしょう。

    .timeline-content:before {
    content: ‘ ‘;
    position: absolute;
    margin-top: 24px;
    margin-left: -39px;
    width:10px;
    height:10px;
    background-color: #6fc173;
    border: 3px solid #6fc173;
    border-radius: 10px;
    }

  • http://webcreatorbox.com Webクリエイターボックス

    あーなるほどです!ご指摘頂いたコードを参考に追記してみました!borderはなくてもいけるかな?ってことで背景色のみで作ってます。コメントありがとうございました!

  • cyokodog

    マークアップのルールについて素人なので、もしよろしければご教授いただけますでしょうか?
    サンプルのコードでは li 要素の中に h3 要素が登場しますが、以前(2,3年前)ツイッターでマークアップに詳しそうな方々に、「li,dt,ddのような要素の中に,h2,h3とった要素は記述してよいものなのでしょうか?」と質問したら大半がNGという回答でした。
    それ以来そのような記述は控えていたのですが(たまにやっちゃうんですが・・)、どのようにお考えでしょうか?

  • http://webcreatorbox.com Webクリエイターボックス

    HTMLの文法的には li の中に見出し要素を入れるのは間違いではありません。同様に dd の中に入れるのもOKです。公式サイトや日本語訳されたレファレンスサイト等を調べてみると勉強になるかもです!
    http://www.w3.org/TR/2012/CR-html5-20121217/Overview.html#contents

  • cyokodog

    ご返信ありがとうございます!
    胸のつかえが取れた気分です^^)
    これからは迷いなく使いたいと思います