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

この記事では、ペットショップの紹介ページやスタッフ経歴ページを例に、シンプルで読みやすい縦型タイムラインの実装方法を解説します。

1 実装のポイント

・見やすい縦ライン＋丸アイコンで経歴が分かりやすい
・コピペだけで WordPress に導入できる
・スマホでも崩れない軽量 CSS

2 表示用HTML（タイムライン）

<div class="profile-timeline">

  <ul>
    <li>
      <span class="year">2020年3月</span>
      <span class="text">ペットに関する専門知識を習得し、動物ケアの分野で活動開始。</span>
    </li>

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

    <li>
      <span class="year">2024年1月</span>
      <span class="text">ペットの健康相談サービスを開始し、飼い主サポートを強化。</span>
    </li>

    <li>
      <span class="year">2025年3月</span>
      <span class="text">店長就任。地域のペットと家族の幸せづくりに専念。</span>
    </li>
  </ul>

</div>

3 汎用CSS

/* -------------------------------------------
 * 経歴タイムライン
 * ----------------------------------------- */

/* 外枠 */
.profile-timeline {
  padding: 30px; /* 全体余白 */
  border-radius: 12px; /* 角丸 */
  box-shadow: 0 8px 24px rgba(0,0,0,0.06); /* 影 */
  color: #2a1f1e; /* 文字色 */
  font-family: "Yu Gothic", "Hiragino Kaku Gothic Pro", sans-serif; /* フォント */
}

/* 縦ライン */
.profile-timeline ul {
  list-style: none; /* マーカー削除 */
  padding: 0; 
  margin: 0;
  border-left: 3px solid #eee; /* 左ライン */
  padding-left: 16px; /* 位置調整 */
}

/* 各項目 */
.profile-timeline ul li {
  position: relative; /* 丸アイコン配置 */
  margin-bottom: 22px; /* 下余白 */
  padding-left: 10px; /* 内側余白 */
}

/* 丸アイコン */
.profile-timeline ul li::before {
  content: "";
  width: 12px; /* 丸のサイズ */
  height: 12px;
  background: #fff; /* 中身白 */
  border: 3px solid #a05a4a; /* 枠色 */
  border-radius: 50%; /* 丸形状 */
  position: absolute;
  left: -24px; /* 左位置 */
  top: 9px; /* 上位置 */
}

/* 年 */
.profile-timeline .year {
  font-weight: 700; /* 太字 */
  color: #3a2a28; /* 色 */
  font-size: 1em; /* サイズ */
  display: block;
  margin-bottom: 4px; /* 下余白 */
}

/* 本文 */
.profile-timeline .text {
  font-size: 0.95em; /* 文字サイズ */
  line-height: 1.6; /* 行間 */
}

/* スマホ対応 */
@media (max-width: 700px) {
  .profile-timeline {
    padding: 20px; /* 余白縮小 */
  }
  .profile-timeline ul {
    padding-left: 13px; /* ライン位置調整 */
    border-left-width: 2px; /* ラインを細く */
  }
  .profile-timeline ul li::before {
    left: -22px; /* 位置微調整 */
    width: 10px; /* 丸を小さく */
    height: 10px;
  }
}

4 完成イメージ

5 代用プラグイン

・「Timeline Express」
・「Cool Timeline」
HTMLカスタムに慣れていない場合の代替手段として使えます。

6 まとめ

ペットショップの沿革・スタッフ歴・事業紹介などで使いやすい縦型タイムラインの実装方法を紹介しました。HTML・CSS がシンプルなので、ぜひ自由に編集して使用してください。