概要

タイムライン付きのテキストです。
スケジュールの流れなど、タイムラインを表示させたい時に便利です。
リストの数を増減できます。

デモ

〇〇：〇〇タイトルを記入します

本文を記入します。本文を記入します。本文を記入します。本文を記入します。本文を記入します。
〇〇：〇〇タイトルを記入します

本文を記入します。本文を記入します。本文を記入します。本文を記入します。本文を記入します。
〇〇：〇〇タイトルを記入します

本文を記入します。本文を記入します。本文を記入します。本文を記入します。本文を記入します。
〇〇：〇〇タイトルを記入します

本文を記入します。本文を記入します。本文を記入します。本文を記入します。本文を記入します。

html・css

See the Pen タイムライン付きテキスト by hbm-design (@hbm-design) on CodePen.

カスタマイズ

項目を増減する

増やしたい場合は<li>～</li>をコピー＆ペーストしてください。
減らしたい場合は<li>～</li>を削除してください。

<li>
    <div class="steps-box">
        <dl class="steps-text">
            <dt><span class="steps-time">〇〇：〇〇</span><span class="steps-title">タイトルを記入します</span></dt>
            <dd>本文を記入します。本文を記入します。本文を記入します。本文を記入します。本文を記入します。</dd>
        </dl>
    </div>
</li>

タイムラインの色を変更する

タイムラインの円の色を変更する

.steps-content li:after {
    background-color: #任意の色を入れます;
}

タイムラインの線の色を変更する

.steps-content li:not(:last-child):before {
    background-color: #任意の色を入れます;
}