矢印付きスケジュールをタイムライン形式で作る方法

Webページで「1日のスケジュール」を分かりやすく・視覚的に表示したい時に便利なのが、矢印や丸付きのタイムライン風デザインです。
今回は、HTMLとCSSを使って実装できる 矢印付きスケジュール表示の実例 を紹介します。
「始業」や「休憩」「就業」などのマイルストーンを丸で表示し、各時間の予定を矢印でつなぐ構造になっています。

<div class="flow-content">
<ul class="flex-schedule">
  <li>
    <span class="time">9:00-</span>
    <div class="area">
      <div class="sch_box">
        <div class="title-with-icon">
          <img loading="lazy" decoding="async" src="/kopipesityainayo/wp-content/uploads/2025/01/favicon.png" alt="" width="64" height="51" class="favicon-icon">
          <div>
		  	<p class="sch_title">タイトル</p>
            <p class="sch_tx">サンプルテキスト</p>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="time">10:00-</span>
    <div class="area">
      <div class="sch_box">
        <div class="title-with-icon">
          <img loading="lazy" decoding="async" src="/kopipesityainayo/wp-content/uploads/2025/01/favicon.png" alt="" width="64" height="51" class="favicon-icon">
          <div>
 		  	<p class="sch_title">タイトル</p>
            <p class="sch_tx">サンプルテキスト</p>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="time">11:00-</span>
    <div class="area">
      <div class="sch_box">
        <div class="title-with-icon">
          <img loading="lazy" decoding="async" src="/kopipesityainayo/wp-content/uploads/2025/01/favicon.png" alt="" width="64" height="51" class="favicon-icon">
          <div>
		  	<p class="sch_title">タイトル</p>
            <p class="sch_tx">サンプルテキスト</p>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="time"></span>
    <div class="area">
      <div class="sch_box">
        <div class="title-with-icon">
          <img loading="lazy" decoding="async" src="/kopipesityainayo/wp-content/uploads/2025/01/favicon.png" alt="" width="64" height="51" class="favicon-icon">
          <div>
		  	<p class="sch_title">タイトル</p>
            <p class="sch_tx">サンプルテキスト</p>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="time">13:00-</span>
    <div class="area">
      <div class="sch_box">
        <div class="title-with-icon">
          <img loading="lazy" decoding="async" src="/kopipesityainayo/wp-content/uploads/2025/01/favicon.png" alt="" width="64" height="51" class="favicon-icon">
          <div>
		  	<p class="sch_title">タイトル</p>
            <p class="sch_tx">サンプルテキスト</p>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="time">15:00-</span>
    <div class="area">
      <div class="sch_box">
        <div class="title-with-icon">
          <img loading="lazy" decoding="async" src="/kopipesityainayo/wp-content/uploads/2025/01/favicon.png" alt="" width="64" height="51" class="favicon-icon">
          <div>
		  	<p class="sch_title">タイトル</p>
            <p class="sch_tx">サンプルテキスト</p>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="time">17:00-</span>
    <div class="area">
      <div class="sch_box">
        <div class="title-with-icon">
          <img loading="lazy" decoding="async" src="/kopipesityainayo/wp-content/uploads/2025/01/favicon.png" alt="" width="64" height="51" class="favicon-icon">
          <div>
		  	<p class="sch_title">タイトル</p>
            <p class="sch_tx">サンプルテキスト</p>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>
</div>

.flow-content {
    .flex-schedule {
        list-style: none;
        margin: 0 auto 0 0;
        box-sizing: border-box;
        margin-left: 0 !important;
        padding-left: 0;
        background-color: #FFFFFF;
        overflow: hidden;
    }

    /* 各リストアイテム */
    .flex-schedule li {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: flex-start;
        position: relative;
    }

    /* 左側の縦ライン */
    .flex-schedule .area {
        position: relative;  /* 擬似要素の基準 */
        padding: 10px;
        padding-left: 48px;
        display: block;
        width: 100%;
        border-left: 6px solid #f2c94d;
    }

    /* 時刻 */
    .flex-schedule li .time {
        position: relative;
        display: inline-flex;
        justify-content: flex-end;
        align-items: center; /* 垂直中央に揃える */
        flex-basis: 80px;
        max-width: 80px;
        margin-right: 48px;
        height: 100px;
        font-weight: bold;
        font-size: 1.1rem;
        color: #15689f;
    }
    .flex-schedule li:nth-child(2) .time,
    .flex-schedule li:nth-child(3) .time,
    .flex-schedule li:nth-child(5) .time,
    .flex-schedule li:nth-child(6) .time {
        left: 24px;
    }
                
    
    /* スケジュールボックス全体 */
    .flex-schedule .sch_box {
        position: relative;
        padding: 16px;
        min-height: 60px;
        background-color: #caf6fb;
    }

    /* 偶数行は明るい青 */
    .flex-schedule li:nth-child(even) .sch_box {
        background-color: #fbf4db;
    }

    /* sch_boxの丸マークは無効化 */
    .flex-schedule .sch_box::before {
        content: none;
    }

    /* sch_boxの矢印マーク（下向き） */
    .flex-schedule .sch_box::after {
        content: "";
        position: absolute;
        left: -44px;
        top: 8px;
        width: 12px;
        height: 12px;
        border-right: 6px solid #f2c94d;
        border-top: 6px solid #f2c94d;
        transform: rotate(135deg);
        z-index: 0;
    }

    /* 最初のスケジュール項目には矢印を表示しない */
    .flex-schedule li:first-child .sch_box::after {
        display: none;
    }
    .flex-schedule li:nth-child(4) .sch_box::after,
    .flex-schedule li:nth-child(7) .sch_box::after {
        top: -10px;
    }

    /* 丸＋文字をareaの擬似要素で作る */
    /* 1,4,7番目 */
    .flex-schedule li:nth-child(1) .area::before,
    .flex-schedule li:nth-child(4) .area::before,
    .flex-schedule li:nth-child(7) .area::before {
        content: "";
        position: absolute;
        top: 16px;
        left: -35px;
        width: 64px;
        height: 64px;
        line-height: 60px;
        border: 3px solid #15b0c1;
        border-radius: 50%;
        text-align: center;
        font-size: 1.2rem;
        color: #15b0c1;
        background: #FFFFFF;
        z-index: 2;
        box-sizing: border-box;
        font-weight: 900;
    }
    .flex-schedule li:nth-child(1) .area::before {
        content: "始業";
    }
    .flex-schedule li:nth-child(4) .area::before {
        content: "休憩";
    }
    .flex-schedule li:nth-child(7) .area::before {
        content: "就業";
    }
    /* 1,7番 */
    .flex-schedule li:nth-child(1) .area::after,
    .flex-schedule li:nth-child(7) .area::after {
        content: "";
        position: absolute;
        left: -10.5px;
        width: 0px;
        height: 80px;
        border-left: 20px solid #ffffff;
    }
    .flex-schedule li:nth-child(1) .area::after {
        top: 0px;
    }
    .flex-schedule li:nth-child(7) .area::after {
        top: 76px;
    }

    /* 2,3,5,6番目 */
    .flex-schedule li:nth-child(2) .area::before,
    .flex-schedule li:nth-child(3) .area::before,
    .flex-schedule li:nth-child(5) .area::before,
    .flex-schedule li:nth-child(6) .area::before {
        content: "";
        position: absolute;
        top: 38.5px;
        left: -13.5px;
        width: 21px;
        height: 21px;
        line-height: 35px;
        border: 3px solid #15b1c0;
        border-radius: 50%;
        text-align: center;
        font-weight: bold;
        font-size: 0.9rem;
        color: #ff6600;
        background: #f0c94d;
        z-index: 2;
        box-sizing: border-box;
    }

    /* タイトルとアイコンを横並びに */
    .title-with-icon {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* favicon画像 */
    .favicon-icon {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    /* テキストの縦並び */
    .title-with-icon > div {
        display: flex;
        flex-direction: column;
    }

    /* タイトル */
    .sch_title {
        margin: 0 0 4px 0;
        font-weight: bold;
        font-size: 1.1rem;
        color: #15689f;
    }
	/* タイトル */
	.sch_title {
	  margin: 0 0 4px 0;
	  font-weight: bold;
	  font-size: 1.1rem;
	  color: #15689f;
	}
    /* 本文テキスト */
    .sch_tx {
        margin: 0;
        font-size: 1rem;
        color: #333;
    }
}