HTML・CSSでつくるおしゃれなタイムラインのデザイン3選

記事内での手順紹介や会社の沿革などを表現するのに適したタイムライン。今回はそんなタイムラインの、HTML・CSSのみでの作り方・デザインをまとめました。もちろんどれもレスポンシブ対応で、縦軸のものから横軸のものまでどれもコピペで再現することが可能です。

縦方向のタイムライン

縦方向のタイムラインのブログ向けバージョン

ブログ向け

step1
デザインを調整する
  • セクションの境界線
step1

タイトル1

ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。

step2

タイトル2

ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。

step3

タイトル3

ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。

ブログの記事内などで手順紹介などをする際におすすめのタイムライン。各セクションの中に任意のコンテンツ(文章や画像)を入れることが可能です。

step2
HTMLをコピペする
HTML
<div class="timeline-001">
    <section class="timeline-001__section">
        <div class="timeline-001__label">step1</div>
        <p class="timeline-001__title">タイトル1</p>
        <div class="timeline-001__content">
            <p>ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。</p>
        </div>
    </section>
    <section class="timeline-001__section">
        <div class="timeline-001__label">step2</div>
        <p class="timeline-001__title">タイトル2</p>
        <div class="timeline-001__content">
            <p>ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。</p>
        </div>
    </section>
    <section class="timeline-001__section">
        <div class="timeline-001__label">step3</div>
        <p class="timeline-001__title">タイトル3</p>
        <div class="timeline-001__content">
            <img src="/html-maker/img/op-pc.svg" alt="" width="320" height="180" loading="lazy" decoding="async"/>
            <p>ここにコンテンツが入ります。ここにコンテンツが入ります。ここにコンテンツが入ります。</p>
        </div>
    </section>
</div>
step3
CSSをコピペする
CSS
.timeline-001__section {
    position: relative;
    padding: 0 1.5em 1.5em 2em;
}

.timeline-001__section:not(:last-child)::before,
.timeline-001__section::after {
    position: absolute;
    content: '';
}

.timeline-001__section:not(:last-child)::before {
    bottom: 0;
    left: 11px;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background-color: #d6dde3;
}

.timeline-001__section::after {
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border: 4px solid #fff;
    border-radius: 50%;
    background-color: #2589d0;
}

.timeline-001__content {
    border-bottom: dashed 1px #c6cdd3;
    padding-bottom: 1.5em;
}

.timeline-001__label {
    margin-bottom: .1em;
    color: #bcbfc7;
    font-size: .85em;
}

.timeline-001__title {
    color: #333333;
    font-size: 1.05em;
    font-weight: 600;
    margin: 0 auto .5em;
}
縦方向のタイムラインのブログ向け(画像専用)バージョン

ブログ向け(画像専用)

step1
デザインを調整する
  • セクションの境界線
step1

タイトル1

ここに文章を入れます。ここに文章を入れます。ここに文章を入れます。

step2

タイトル2

ここに文章を入れます。ここに文章を入れます。ここに文章を入れます。

step3

タイトル3

ここに文章を入れます。ここに文章を入れます。ここに文章を入れます。

デモページ

画像を添えて手順を紹介する際におすすめなタイムライン。左→右という自然な視線の動きでコンテンツを追えるので、読みやすさがグッと上がります。ちなみにモバイルの場合は画像の下に吹き出しが表示されます。

step2
HTMLをコピペする
HTML
<div class="timeline-002">
    <section class="timeline-002__section">
        <div class="timeline-002__label">step1</div>
        <p class="timeline-002__title">タイトル1</p>
        <div class="timeline-002__content">
            <div class="timeline-002__img-wrap">
                <!-- お好きな画像を指定してください -->
                <img class="timeline-002__img" src="/html-maker/img/op-pc.svg" alt="" width="320" height="180"
                     loading="lazy" decoding="async"/>
            </div>
            <p class="timeline-002__balloon">ここに文章を入れます。ここに文章を入れます。ここに文章を入れます。</p>
        </div>
    </section>
    <section class="timeline-002__section">
        <div class="timeline-002__label">step2</div>
        <p class="timeline-002__title">タイトル2</p>
        <div class="timeline-002__content">
            <div class="timeline-002__img-wrap">
                <!-- お好きな画像を指定してください -->
                <img class="timeline-002__img" src="/html-maker/img/op-pc.svg" alt="" width="320" height="180"
                     loading="lazy" decoding="async"/>
            </div>
            <p class="timeline-002__balloon">ここに文章を入れます。ここに文章を入れます。ここに文章を入れます。</p>
        </div>
    </section>
    <section class="timeline-002__section">
        <div class="timeline-002__label">step3</div>
        <p class="timeline-002__title">タイトル3</p>
        <div class="timeline-002__content">
            <div class="timeline-002__img-wrap">
                <!-- お好きな画像を指定してください -->
                <img class="timeline-002__img" src="/html-maker/img/op-pc.svg" alt="" width="320" height="180"
                     loading="lazy" decoding="async"/>
            </div>
            <p class="timeline-002__balloon">ここに文章を入れます。ここに文章を入れます。ここに文章を入れます。</p>
        </div>
    </section>
</div>
step3
CSSをコピペする
CSS
.timeline-002__section {
    position: relative;
    padding: 0 1.5em 1.5em 2em;
}

.timeline-002__section:not(:last-child)::before,
.timeline-002__section::after {
    position: absolute;
    content: '';
}

.timeline-002__section:not(:last-child)::before {
    bottom: 0;
    left: 11px;
    transform: translateX(-50%);
    width: 3px;
    height: 100%;
    background-color: #d6dde3;
}

.timeline-002__section::after {
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border: 4px solid #fff;
    border-radius: 50%;
    background-color: #2589d0;
}

.timeline-002__label {
    margin-bottom: .1em;
    color: #bcbfc7;
    font-size: .85em;
}

.timeline-002__title {
    color: #333333;
    font-size: 1.05em;
    font-weight: 600;
    margin: 0 auto .5em;
}

.timeline-002__content {
    border-bottom: dashed 1px #c6cdd3;
    padding-bottom: 1.5em;
}

.timeline-002__img-wrap {
    max-width: 100%;
}

.timeline-002__img {
    width: 100%;
    height: auto;
}

.timeline-002__balloon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: .7em;
    border: 3px solid #d6dde3;
    border-radius: 10px;
    font-size: .95em;
}

.timeline-002__balloon::before,
.timeline-002__balloon::after {
    position: absolute;
    top: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: '';
}

.timeline-002__balloon::before {
    background-color: #d6dde3;
}

.timeline-002__balloon::after {
    top: -11px;
    background-color: #fff;
}


@media only screen and (min-width: 521px) {
    .timeline-002__content {
        display: flex;
        align-items: center;
        gap: 0 15px;
    }

    .timeline-002__img-wrap,
    .timeline-002__balloon {
        flex-basis: 50%;
    }

    .timeline-002__balloon::before,
    .timeline-002__balloon::after {
        top: unset;
        left: -15px;
        width: 15px;
        height: 30px;
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
    }

    .timeline-002__balloon::after {
        top: unset;
        left: -11px;
    }
}

横方向のタイムライン

横方向のタイムラインのステップバーバージョン

ステップバー

step1
デザインを調整する
  1. step3
  2. step4
  3. step5

当サイトでも使用している、ナビゲーションとして設置するのに適したタイムライン。ユーザー登録や商品購入などのフローを分かりやすく可視化することができます。ちなみにアクティブ化するには、現在のステップの項目に「current」クラスを、それ以前の項目に「prev」を付けてあげる必要があります。

step2
HTMLをコピペする
HTML
<ol class="timeline-003">
    <li class="prev">step1</li>
    <li class="prev">step2</li>
    <li class="current">step3</li>
    <li>step4</li>
    <li>step5</li>
</ol>
step3
CSSをコピペする
CSS
.timeline-003 {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding: 0;
}

.timeline-003 li {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    color: #969da3;
    font-size: .8em;
}

.timeline-003 li.prev,
.timeline-003 li.current {
    color: #2589d0;
}

.timeline-003 li::before {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-bottom: 6px;
    content: '';
    border: 2px solid #d6dde3;
    border-radius: 50%;
    background-color: #fff;
}

.timeline-003 li.prev::before,
.timeline-003 li.current::before {
    border-color: #2589d0;
}

.timeline-003 li:not(:last-child)::after {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: -1;
    width: 100%;
    height: 2px;
    background-color: #d6dde3;
    content: '';
}

.timeline-003 li.current::before,
.timeline-003 li.prev::after {
    background-color: #2589d0;
}