経歴タイムラインを美しく表示する方法｜CSSで簡単に作れるデザイン例

プロフィールページや会社案内などで、これまでの経歴を時系列で分かりやすく見せたいことがあります。

普通の箇条書きでも経歴は表示できますが、年月ごとの出来事を縦につないだタイムライン形式にすると、過去から現在までの流れをひと目で追いやすくなります。

この記事では、HTMLとCSSだけで作れる、シンプルな経歴タイムラインを紹介します。

1 今回作る経歴タイムライン

左側に縦線と丸印を表示し、その右側に「年月」と「経歴」を表示します。

たとえば、次のような経歴です。

• 2020年3月　動物ケアの分野で活動開始
• 2022年3月　地域密着型ペットショップに入社
• 2024年1月　ペットの健康相談サービスを開始
• 2025年3月　店長就任

これらを縦のラインでつなぎ、時間の流れが視覚的に分かるようにします。

2 HTMLを設置する

タイムラインを表示したい場所に、次のHTMLを設置します。

WordPressのクラシックエディタを使用している場合は、「テキスト」モードに貼り付けてください。

<div class="ptl-timeline">

    <ul>

        <li>
            <time class="ptl-date" datetime="2020-03">
                2020年3月
            </time>

            <p class="ptl-text">
                ペットに関する専門知識を習得し、
                動物ケアの分野で活動開始。
            </p>
        </li>


        <li>
            <time class="ptl-date" datetime="2022-03">
                2022年3月
            </time>

            <p class="ptl-text">
                地域密着型ペットショップに入社し、
                犬・猫・小動物のケアや販売管理を担当。
            </p>
        </li>


        <li>
            <time class="ptl-date" datetime="2024-01">
                2024年1月
            </time>

            <p class="ptl-text">
                ペットの健康相談サービスを開始し、
                飼い主サポートを強化。
            </p>
        </li>


        <li>
            <time class="ptl-date" datetime="2025-03">
                2025年3月
            </time>

            <p class="ptl-text">
                店長就任。
                地域のペットと家族の幸せづくりに専念。
            </p>
        </li>

    </ul>

</div>

1つの <li> が、1件の経歴になります。

経歴を増やしたい場合は、<ul> の中に新しい <li> を追加するだけです。

3 CSSを追加する

次に、タイムラインを表示するためのCSSを追加します。

子テーマを使用している場合は子テーマの style.css、またはテーマで利用できる追加CSS欄などへ記述してください。

/* 経歴タイムライン */
.ptl-timeline,
.ptl-timeline * {
    box-sizing: border-box;
}

.ptl-timeline {
    max-width: 800px;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    color: #2a1f1e;
}


/* タイムライン本体 */
.ptl-timeline ul {
    position: relative;
    margin: 0;
    padding: 0 0 0 30px;
    list-style: none;
}


/* 縦線 */
.ptl-timeline ul::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 7px;
    width: 3px;
    background: #e5e5e5;
}


/* 各経歴 */
.ptl-timeline li {
    position: relative;
    margin: 0 0 28px;
    padding: 0;
}

.ptl-timeline li:last-child {
    margin-bottom: 0;
}


/* 丸印 */
.ptl-timeline li::before {
    content: "";
    position: absolute;
    top: 6px;
    left: -30px;
    width: 15px;
    height: 15px;
    background: #fff;
    border: 3px solid #a05a4a;
    border-radius: 50%;
}


/* 年月 */
.ptl-date {
    display: block;
    margin-bottom: 6px;
    color: #3a2a28;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}


/* 経歴本文 */
.ptl-text {
    margin: 0;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.8;
}


/* スマホ */
@media screen and (max-width: 700px) {

    .ptl-timeline {
        padding: 22px 18px;
    }

    .ptl-timeline ul {
        padding-left: 26px;
    }

    .ptl-timeline ul::before {
        left: 6px;
        width: 2px;
    }

    .ptl-timeline li::before {
        left: -26px;
        width: 13px;
        height: 13px;
    }

}

4 タイムラインの仕組み

HTMLでは、タイムライン全体を次のように囲んでいます。

<div class="ptl-timeline">
    <ul>

        経歴をここに入れる

    </ul>
</div>

この <ul> の中に、経歴ごとの <li> を並べます。

つまり、構造は次のようになります。

<div class="ptl-timeline">

    <ul>

        <li>1件目の経歴</li>

        <li>2件目の経歴</li>

        <li>3件目の経歴</li>

    </ul>

</div>

<li> だけを単独で設置するのではなく、必ず <ul> の中へ入れます。

5 1件分の経歴はどう書く？

1件分の経歴は、次の形です。

<li>

    <time class="ptl-date" datetime="2024-01">
        2024年1月
    </time>

    <p class="ptl-text">
        ペットの健康相談サービスを開始し、
        飼い主サポートを強化。
    </p>

</li>

年月は ptl-date、説明文は ptl-text というクラス名にしています。

6 年月にはtimeタグを使う

年月部分には <time> タグを使用しています。

<time class="ptl-date" datetime="2024-01">
    2024年1月
</time>

画面上では「2024年1月」と表示されます。

datetime="2024-01" には、年月を機械が読み取りやすい形式で記述しています。

経歴や沿革など、日付を表す内容では <time> を使うとHTMLの意味も分かりやすくなります。

7 経歴を追加する方法

新しい経歴を追加するときは、<ul> の中に <li> を追加します。

たとえば、2026年4月の経歴を追加する場合は次のようにします。

<li>

    <time class="ptl-date" datetime="2026-04">
        2026年4月
    </time>

    <p class="ptl-text">
        新しいペット相談サービスを開始。
    </p>

</li>

CSSを追加する必要はありません。

HTMLに経歴を追加するだけで、同じデザインのタイムラインが続きます。

8 縦線はCSSで表示する

左側に表示される縦線は、HTMLに線専用のタグを追加しているわけではありません。

CSSの ::before を使っています。

.ptl-timeline ul::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 7px;
    width: 3px;
    background: #e5e5e5;
}

この縦線の上に、それぞれの経歴を表す丸印を重ねています。

9 丸印の色を変更する

経歴の左側にある丸印の色は、次の部分で指定しています。

border: 3px solid #a05a4a;

#a05a4a を変更すると、タイムラインのアクセントカラーを変えられます。

たとえば青系なら、

border-color: #2f6fa5;

緑系なら、

border-color: #3d8060;

のように変更できます。

10 スマホでは余白を少なくする

PCと同じ余白をスマホでも使うと、文章を表示できる横幅が狭くなってしまいます。

そのため、画面幅700px以下では外側の余白を小さくしています。

@media screen and (max-width: 700px) {

    .ptl-timeline {
        padding: 22px 18px;
    }

}

縦線と丸印も少し小さくしているため、スマホでも窮屈になりにくくなります。

11 専用のクラス名を使う理由

タイムラインの年月に .year、文章に .text といった短いクラス名を付ける方法もあります。

ただし、WordPressではテーマやプラグインが同じ名前を使用している可能性があります。

そこで今回は、

• .ptl-timeline
• .ptl-date
• .ptl-text

のように、タイムライン専用のクラス名を使用しています。

他のCSSと名前が重なりにくくなり、WordPressサイトでもデザインが干渉しにくくなります。

12 どんなページに使える？

このタイムラインは、経歴以外にもいろいろな用途に使えます。

• 代表者プロフィール
• 会社の沿革
• 資格取得歴
• 受賞歴
• サービス開始までの流れ
• プロジェクトの進行履歴

「いつ、何があったのか」を順番に見せたいページに向いています。

13 完成サンプル

実際に表示すると、次のようなタイムラインになります。

14 まとめ

HTMLとCSSだけでも、プロフィールや会社沿革を見やすいタイムライン形式で表示できます。

今回の方法では、左側に縦線と丸印を表示し、その右側に年月と内容を配置しています。

経歴を追加するときも、<ul> の中へ新しい <li> を追加するだけです。

文章や年月を変更すれば、個人プロフィール、企業サイト、士業サイト、店舗紹介など、さまざまなWordPressサイトに応用できます。