Result
RWD対応のシンプルなタイムライン
css
スマフォ向けのコードはPen内、@media screen and (min-width: 40em)をご参照ください
.timeline {/*全体*/ position: relative; overflow: auto;}.timeline:before {/*センターライン*/ content: ''; position: absolute; height: 100%; width: 5px; background: #dddddd; left: 0;}.timeline h2 { background: #dddddd; max-width: 6em; margin: 0 auto 1em; padding: 0.5em; text-align: center; position: relative; clear: both;}.timeline ul { list-style: none; padding: 0 0 0 1em; z-index: 1;}.timeline li {/*各コンテナ*/ background: #dddddd; padding: 1em; margin-bottom: 1em; position: relative;}.timeline li:before {/*吹き出し*/ content: ''; width: 0; height: 0; border-top: 1em solid #dddddd; border-left: 1em solid transparent; position: absolute; left: -1em; top: 0;}.timeline h3 { margin-top: 0;}.timeline time { font-style: italic;} |
html
<div class="timeline"> <h2>2013</h2> <ul> <li> <h3>foo</h3> <p>hogehoge</p> <time>August 2013</time> </li> <li> <h3>bar</h3> <p>hugahuga</p> <time>July 2013</time> </li> . . . </ul></div> |
