【HTML】タイムライン を表示するには...

Webグラフ / 地図作成ツール

■ はじめに

 * タイムライン（Timeline）を表示する方法を考える

■ Google Charts

 * 商用利用
 * 詳細は、以下の関連記事を参照。
https://blogs.yahoo.co.jp/dk521123/37572608.html

公式サイト

https://developers.google.com/chart/interactive/docs/gallery/timeline

サンプル

 * 以下の関連記事を参照のこと
【JS】 Google Charts [4] ～ タイムライン編 ～
https://blogs.yahoo.co.jp/dk521123/37574625.html

■ Vertical Timeline

 * 縦向きのタイムライン
 * BSD-3-Clause license (商用利用可能)

公式サイト

https://codyhouse.co/gem/vertical-timeline/
デモ
https://codyhouse.co/demo/vertical-timeline/index.html

使い方

インポート 
<link href='https://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<link rel="stylesheet" href="css/demo.css"> <!-- Demo style -->
<script src="js/main.js"></script> <!-- Resource JavaScript -->
HTML構造 
<section class="cd-timeline js-cd-timeline">
  <div class="cd-timeline__container">

    <div class="cd-timeline__block js-cd-block">
      <div class="cd-timeline__img cd-timeline__img--picture js-cd-img">
        <img src="【アイコン】" alt="Picture">
      </div>

      <div class="cd-timeline__content js-cd-content">
        <h2>【題名】</h2>
        <p>【概要内容】</p>
        <a href="【リンク先URL】" class="cd-timeline__read-more">【詳細リンク】</a>
        <span class="cd-timeline__date">【日付】</span>
      </div>
    </div>

  ... 略 ...

  </div>
</section>
～～～～～～～～

使用上の注意

 * 縦に並べるだけ
  => 表示間隔は吹き出し次第で、日付間隔は関係ない
 * 使っているCSS(reset.css, style.css)により、。
  => 以下の関連記事で扱った「Materialize」と併用して使おうと思ったら、表示が乱れた
【style.css】 
html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: "Droid Serif", serif;
  color: #7f8c97;
  background-color: #e9f0f5;
}
https://blogs.yahoo.co.jp/dk521123/37559037.html

参考文献

http://blog.minimal-green.com/entry/2017/02/16/154932
http://mizukazu.minibird.jp/verticaltimeline/

■ timeline with Bootstrap

 * フレームワークと一緒に使いたい場合は、
   フレームワークに「Bootstrap」をチョイスして
   以下の「Bootstrap ベースの timeline」を参考に実装する
Material Design for Bootstrap
https://blogs.yahoo.co.jp/dk521123/37559037.html

Bootstrap ベースの timeline

https://bootsnipp.com/tags/timeline
https://bootsnipp.com/snippets/88AK
https://bootdey.com/snippets/view/bs4-clear-timeline

■ Flotr2

公式サイト

[[http://humblesoftware.com/flotr2/#!basic-timeline]]

■ W3Schools

公式サイト

https://www.w3schools.com/howto/howto_css_timeline.asp

■ ツールなしで実装

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<style type="text/css">
.timeline {
  list-style: none;
}
.timeline > li {
  margin-bottom: 60px;
}

@media ( min-width : 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;
  }
  .timeline-content:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #6fc173;
    position: absolute;
    left: 106px;
    top: 24px;
    border-radius: 100%;
  }
}
</style>
</head>
<body>
<ul class="timeline">
  <li>
    <p class="timeline-date">2011年1月</p>
    <div class="timeline-content">
      <h3>TITLE1</h3>
      <p>DETAIL1</p>
    </div>
  </li>
  <li>
    <p class="timeline-date">2012年2月</p>
    <div class="timeline-content">
      <h3>TITLE2</h3>
      <p>DETAIL2</p>
    </div>
  </li>
  <li>
    <p class="timeline-date">2013年3月</p>
    <div class="timeline-content">
      <h3>TITLE3</h3>
      <p>DETAIL3</p>
    </div>
  </li>
</ul>
</body>
</html>

参考文献

https://www.webcreatorbox.com/tech/css-timeline
http://liginc.co.jp/web/html-css/css/115548
で特に以下のサイトがいいと思った
https://tympanus.net/codrops/2013/05/02/vertical-timeline/
デモ
https://tympanus.net/Blueprints/VerticalTimeline/

関連記事

【JS】 Google Charts [1] ～ 円グラフ編 ～

https://blogs.yahoo.co.jp/dk521123/37572608.html

【JS】 Google Charts [4] ～ タイムライン編 ～

https://blogs.yahoo.co.jp/dk521123/37574625.html

マテリアル デザイン フレームワーク

https://blogs.yahoo.co.jp/dk521123/37559037.html