アフィリエイト広告を利用しております。
参考サイトの記載がある場合はそちらの方がより詳しく記載説明がされているのでぜひそちらもご覧ください。
そのままコピペしても反映されないものもあります。サイトごとに変えないといけない箇所がありますので修正してください。

CSS HTML

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

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


  • 9:00-

    タイトル

    サンプルテキスト

  • 10:00-

    タイトル

    サンプルテキスト

  • 11:00-

    タイトル

    サンプルテキスト

  • タイトル

    サンプルテキスト

  • 13:00-

    タイトル

    サンプルテキスト

  • 15:00-

    タイトル

    サンプルテキスト

  • 17:00-

    タイトル

    サンプルテキスト

HTMLコード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<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>
CSSコード
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
.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;
    }
}

おすすめ記事

1
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました [Tab]キー押して空白入れて見やすくインデントしたい! この記事を書くまでは入れないか、スペースキーを押して誤 ...
2
制作理由 ワードプレスのクラシックエディタを直接使っているといつも思うことがありました コード追加ボタンを自由に追加出来たら便利じゃない? この記事を書くまでは、クリップボード貼り付けアプリ[Clib ...
3
アプリ制作するに至った理由 納品代行の仕事をしていて思ったことがあります 納品代行をしていると本当に様々なお客様から様々な商品が届きます その中でも特に注意しているのが、「見た目ほぼ同じだけど違う商品 ...

-CSS, HTML
-

S