TIPSWEB制作の備忘録

ホーム > WEB制作の備忘録 > 左右交互に表示するタイプのタイムラインを作る

左右交互に表示するタイプのタイムラインを作る

公開：2025.12.20　

左右交互に表示するタイムライン

今回は左右互い違いに表示するタイプのタイムラインを作成しました。
コピペで次のようなタイムラインができます。

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

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

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

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

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

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

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

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

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

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

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

HTML
<ul class="timeline-list-alternate">
	<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>
	<li>
		<p class="timeline-list-title">04タイトルが入ります。</p>
		03の項目の簡単な説明が入ります。
	</li>
	<li>
		<p class="timeline-list-title">05タイトルが入ります。</p>
		03の項目の簡単な説明が入ります。
	</li>
</ul>
CSS
ul.timeline-list-alternate {
  padding-left: 0;
  margin: 0;
}
ul.timeline-list-alternate li {
  list-style: none;
  position: relative;
  width: 50%;
}
ul.timeline-list-alternate li:not(:last-of-type) {
  padding-bottom: 4rem;
}
ul.timeline-list-alternate li:not(:last-of-type)::before {
  content: " ";
  display: block;
  position: absolute;
  background-color: #000000;
  width: 2px;
  height: calc(100% - 1.4rem);
  top: calc(1.5rem + 0.45em);
}
ul.timeline-list-alternate li::after {
  content: " ";
  display: block;
  position: absolute;
  background-color: #000000;
  width: 1.6rem;
  height: 1.6rem;
  top: 0.45em;
}
ul.timeline-list-alternate li:nth-of-type(odd) {
  padding-right: 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
ul.timeline-list-alternate li:nth-of-type(odd)::before {
  right: -1px;
}
ul.timeline-list-alternate li:nth-of-type(odd)::after {
  right: -0.8rem;
}
ul.timeline-list-alternate li:nth-of-type(even) {
  margin-left: auto;
  padding-left: 4rem;
}
ul.timeline-list-alternate li:nth-of-type(even)::before {
  left: -1px;
}
ul.timeline-list-alternate li:nth-of-type(even)::after {
  left: -0.8rem;
}

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

タイムラインのHTMLを簡単に説明

箇条書きのような形式で書くことが多いため、今回はulでマークアップしました。

HTML
<ul class="timeline-list-alternate">
	<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>
	<li><!--偶数番目-->
		<p class="timeline-list-title">04タイトルが入ります。</p>
		03の項目の簡単な説明が入ります。
	</li>
	<li><!--奇数番目-->
		<p class="timeline-list-title">05タイトルが入ります。</p>
		03の項目の簡単な説明が入ります。
	</li>
</ul>

今回は奇数のliが左に、偶数のliが右になるように表示を切り替えています。
「timeline-list-title」の要素は、タイトルっぽいものがあったほうが見栄えがいいので作りました。
いらなかったら消しても大丈夫です。

左右交互に表示するタイムラインのCSSの説明

CSSが適用される前の状態はこんな感じです。

装飾なしのタイムライン

①ulに「timeline-list-alternate」を指定しています。
②「timeline-list-alternate」の中にあるliのうちの一つです。
③「timeline-list-title」のタイトルです。

ulと全てのli共通の設定

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

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

次に、liにデフォルトでついている黒丸を「list-style: none;」で削除します。
この後liを基準に擬似要素をabsoluteで配置するので、「position: relative;」を指定しておきます。
liは左右交互に配置するので「width: 50%;」で幅を指定しました。

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

全てのli共通の四角アイコンと縦線の擬似要素

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

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

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

まずは縦線を作成します。
一番最後の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、rightは、何番目のliかによって変更するので、ここでは指定しませんでした。

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

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

こちらも先ほどの縦線と同じくleft、rightは後で指定します。

奇数番目のli用の設定

CSS
ul.timeline-list-alternate li:nth-of-type(odd) {
  padding-right: 4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
ul.timeline-list-alternate li:nth-of-type(odd)::before {
  right: -1px;
}
ul.timeline-list-alternate li:nth-of-type(odd)::after {
  right: -0.8rem;
}

1・3・5…など奇数番目のliを左側に表示するための設定をしていきます。
「li:nth-of-type(odd)」とすることで、奇数番目のliに対してCSSを指定できます。

右側に擬似要素を配置するための空間を、「padding-right: 4rem」で確保。

liの中にある要素を右寄せにしたいので、「display: flex」「flex-direction: column」「align-items: flex-end」を組み合わせて右寄せにしてみました。
「text-align:right」でも右寄せになりますが、中のテキストが改行するときは左寄せになっていてもらいたいな～と思ったのでflexを使いました。

あとは縦線と四角アイコンが「timeline-list-alternate」の中央に配置されるように、「right」で位置を指定します。

偶数番目のli用の指定

CSS
ul.timeline-list-alternate li:nth-of-type(even) {
  margin-left: auto;
  padding-left: 4rem;
}
ul.timeline-list-alternate li:nth-of-type(even)::before {
  left: -1px;
}
ul.timeline-list-alternate li:nth-of-type(even)::after {
  left: -0.8rem;
}

2・4・6…など偶数番目のliを左側に表示するための設定をしていきます。
「li:nth-of-type(even)」とすることで、偶数番目のliに対してCSSを指定できます。

左側に擬似要素を配置するための空間を、「padding-left: 4rem」で確保。

liを右側に配置するため、「margin-left: auto」を指定します。

あとは縦線と四角アイコンが「timeline-list-alternate」の中央に配置されるように、「left」で位置を指定します。

簡単にまとめ

以上、交互に表示するタイプのタイムラインについての説明でした。
〇番目だけ表示を変える～とか結構使うので、覚えておくと便利です。
最後に、こんな感じのタイムラインになりますよ、というのをもう一度置いておきます。

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

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

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

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

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

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

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

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

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

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

今回のまとめ

  • ulやliについている余分なcssは打ち消す
  • liの擬似要素で縦線と四角アイコンを作成するため、配置するためのスペースを確保する
  • 一番最後の要素以外にCSSを適用させたい場合は「:not(:last-of-type)」を使う
  • 縦線と四角アイコンのサイズや位置は、他の要素の配置を考慮して考える
  • 奇数番目の要素に指定するには「li:nth-of-type(odd)」を使う
  • 偶数番目の要素に指定するには「li:nth-of-type(even)」を使う
  • 「display: flex」「flex-direction: column」「align-items: flex-end」を組み合わせて右寄せにできる

今回作成したタイムラインは、こちらの記事のものをもとに作っています。

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

自動連番バージョンはこちら。

CSSで自動で連番をつけたリストを作成する
FFFTPの設定 FFFTPを使ってみよう
WordPressのバージョンを戻すWP Downgrade