パーツ番号 02-05-07 ・ CSSのみ

タイムライン風縦リスト

左側に縦線とドットを配置し、右側に項目を並べたタイムライン風のリストです。経過や進行状況の説明に使えます。

staticcss

プレビュー

ソースコード

HTML

<ul class="d02-05-07-list">
          <li>企画開始</li>
          <li>制作中</li>
          <li>レビュー完了</li>
          <li>公開済み</li>
        </ul>

CSS

.d02-05-07-list{list-style:none;margin:0;padding:0;width:100%;max-width:260px;font-size:13px;color:#333;}
        .d02-05-07-list li{position:relative;padding:4px 0 18px 24px;border-left:2px solid #90a4ae;}
        .d02-05-07-list li:last-child{border-left-color:transparent;padding-bottom:0;}
        .d02-05-07-list li::before{content:"";position:absolute;left:-6px;top:6px;width:10px;height:10px;border-radius:50%;background:#00695c;}

クラス名 .d02-05-07 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。