■ Google Charts
* 商用利用
公式サイト
https://developers.google.com/chart/interactive/docs/gallery/timeline動画レッスン
タイムラインはないがGoogle Chartsの基礎を学べるhttps://dotinstall.com/lessons/basic_chart_tools_v2
■ ツールなしで実装
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
.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>