TIPSWEB制作の備忘録

ホーム > WEB制作の備忘録 > HTMLとCSSでタイムラインを作りました

HTMLとCSSでタイムラインを作りました

公開：2025.09.23　

今回はHTMLとCSSでタイムライン風のパーツを作ってみました。
コピペで次のようなタイムラインができます。

  • 01タイトルが入ります。

    01の項目の簡単な説明が入ります。

  • 02タイトルが入ります。

    02の項目の簡単な説明が入ります。

  • 03タイトルが入ります。

    03の項目の簡単な説明が入ります。

そのHTMLとCSSがこちら！
会社の沿革とかで使ったりします。他には1日のスケジュールの流れとか。
では、こちらのHTMLとCSSについて簡単に説明していきます。
※CSSでrem指定しているところは、使用する人の環境によって数値が変わりますのでご注意ください。
※このwebサイトでは、1rem＝10pxくらいのサイズになります。

HTML
<ul class="timeline-list">
	<li>
		<p class="timeline-list-title">01タイトルが入ります。</p>
		01の項目の簡単な説明が入ります。
	</li>
	<li>
		<p class="timeline-list-title">02タイトルが入ります。</p>
		02の項目の簡単な説明が入ります。
	</li>
	<li>
		<p class="timeline-list-title">03タイトルが入ります。</p>
		03の項目の簡単な説明が入ります。
	</li>
</ul>
CSS
ul.timeline-list {
  padding-left: 0;
  margin: 0;
}
ul.timeline-list li {
  list-style: none;
  padding-left: 4rem;
  position: relative;
}
ul.timeline-list li:not(:last-of-type) {
  padding-bottom: 4rem;
}
ul.timeline-list li:not(:last-of-type)::before {
  content: " ";
  display: block;
  position: absolute;
  background-color: #000;
  width: 2px;
  height: calc(100% - 1.4rem);
  top: calc(1.5rem + 0.45em);
  left: 0.7rem;
}
ul.timeline-list li::after {
  content: " ";
  display: block;
  position: absolute;
  background-color: #000;
  width: 1.6rem;
  height: 1.6rem;
  top: 0.45em;
  left: 0;
}

.timeline-list-title {
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

タイムラインのHTMLの説明

今回はulでマークアップしています。
タイムラインは箇条書きのような形式で書くことが多いので、そのようにしています。

「timeline-list-title」というタイトル用のクラスを作成しましたが、必ず必要というわけではないので消してもOKです。見た目的にあった方がいいかな～くらいの気持ちで作っています。
例えばこのタイトル部分に「2000年 新社屋完成」とか入れて、その下に新社屋についての説明を入れる想定で作成しています。

HTML
<ul class="timeline-list">
	<li>
		<p class="timeline-list-title">01タイトルが入ります。</p>
		01の項目の簡単な説明が入ります。
	</li>
	<li>
		<p class="timeline-list-title">02タイトルが入ります。</p>
		02の項目の簡単な説明が入ります。
	</li>
	<li>
		<p class="timeline-list-title">03タイトルが入ります。</p>
		03の項目の簡単な説明が入ります。
	</li>
</ul>

タイムラインのCSSの説明

CSSが適用される前の状態がこちらです。

CSSが適用される前の状態

①「timeline-list」のクラスでli全体を囲っています。
②「timeline-list」の中にあるliのうちのひとつです。
③「timeline-list-title」のタイトルです。

ulとliの指定

CSS
ul.timeline-list {
  padding-left: 0;
  margin: 0;
}
ul.timeline-list li {
  list-style: none;
  padding-left: 4rem;
  position: relative;
}
ul.timeline-list li:not(:last-of-type) {
  padding-bottom: 4rem;
}

まずはulにデフォルトでついている「padding」と「margin」を打ち消します。

次に、liにデフォルトでついている黒丸を「list-style: none;」で削除します。
更にliに「padding-left」を指定します。このあと登場する擬似要素を配置するために必要になります。
擬似要素をabsoluteで配置するため、liに「position: relative;」を指定しておきましょう。

「timeline-list」の中のliのうち、一番最後以外のliには「padding-bottom: 4rem;」を指定しました。なぜ一番最後以外に指定するかというと、これは次のliと間をあけておくための指定なので、最後のliには不要になるからです。
また、marginではなくpaddingを指定するのにも理由があります。
次に登場する擬似要素の線の高さを設定する際に、marginが指定されているとmargin分の高さが取得できなくなるためです。

縦線と四角アイコンを擬似要素で作成する

擬似要素についてざっくり説明すると、HTMLには書かないけど、CSSで指定すると画面に表示される要素です。
今回は擬似要素を利用して、縦線と四角アイコンを作成します。

擬似要素には「display: block;」と「position: absolute;」を指定しておきます。

CSS
ul.timeline-list li:not(:last-of-type)::before {
  content: " ";
  display: block;
  position: absolute;
  background-color: #000;
  width: 2px;
  height: calc(100% - 1.4rem);
  top: calc(1.5rem + 0.45em);
  left: 0.7rem;
}

まずは線の作成です。
一番最後のliに縦線は不要なので、一番最後のli以外の場合に表示する指定になっています。
幅は2px、高さは「height: calc(100% – 1.4rem);」としました。
「calc」は計算をしてくれる関数です。
高さ「100%」はli自体の高さで、「1.4rem」はこのあと作成する四角アイコンの高さから「0.2rem」引いた数値です。
なぜ「0.2rem」引くかというと、サイトを見るブラウザや画面サイズによっては、ピッタリの数値で配置すると隙間が空いて見えることがあるからです。
縦線と上下の四角アイコンを「0.1rem」被らせることで、隙間が空くことを防いでいます。今回は縦線も四角アイコンも色が同じなのでこれで大丈夫です。
ですが、色が違う場合は四角アイコンの方が上になるように「z-index」で調整しましょう。

「top: calc(1.5rem + 0.45em);」の位置に配置しています。
「0.45em」は、このあと作成する四角アイコンの「top」に指定する数値です。
縦線を「1.5rem + 0.45em」の位置に配置することで、四角アイコンと「0.1rem」被る位置に配置できます。
「left: 0.7rem;」で、四角アイコンの真ん中くらいの位置に縦線を配置ました。

CSS
ul.timeline-list li::after {
  content: " ";
  display: block;
  position: absolute;
  background-color: #000;
  width: 1.6rem;
  height: 1.6rem;
  top: 0.45em;
  left: 0;
}

次に四角アイコンを作成します。
幅と高さを指定して、「top: 0.45em;」の位置に配置します。
なぜ「top: 0.45em;」にしたかというと、私の環境で四角アイコンを「timeline-list-title」の真ん中くらいの位置に配置できるのが、この位置だったからです。

「timeline-list-title」については特に説明することもないですね。

簡単なまとめ

以上、HTMLとCSSでタイムラインの説明でした。
最後に今回のHTMLとCSSで作成できるタイムラインを置いておきます。

  • 01タイトルが入ります。

    01の項目の簡単な説明が入ります。

  • 02タイトルが入ります。

    02の項目の簡単な説明が入ります。

  • 03タイトルが入ります。

    03の項目の簡単な説明が入ります。

では、今回の簡単なまとめです。

今回のまとめ

  • ulやliについている余分なcssは打ち消す
  • liの擬似要素で縦線と四角アイコンを作成するため、配置するためのスペースを確保する
  • 一番最後の要素以外にCSSを適用させたい場合は「:not(:last-of-type)」を使う
  • 縦線と四角アイコンのサイズや位置は、他の要素の配置を考慮して考える

今回作成したタイムラインを応用して、自動で連番を付けるリストを作成しました。
よかったらこちらもご覧ください。

HTMLとCSSでタイムラインを作りました
HTML&CSSで作る自動連番リスト CSSで自動で連番をつけたリストを作成する
画像hoverアニメーション例のまとめ