TIPSWEB制作の備忘録

ホーム > WEB制作の備忘録 > CSSで自動で連番をつけたリストを作成する

CSSで自動で連番をつけたリストを作成する

公開：2025.09.26　

HTML&CSSで作る自動連番リスト

今回は自動で連番を付けたリストを作成します。
別の記事で作成したタイムラインを応用してカスタマイズしました。
完成形はこちらです。

  1. 01タイトルが入ります。

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

  2. 02タイトルが入ります。

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

  3. 03タイトルが入ります。

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

ちなみにタイムラインの記事はこちら。
一部今回の記事と同じ説明をしているところがあります。

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

自動連番付きリストのHTMLとCSSがこちら！
〇〇の流れ、のような何かの手順の説明で使用する想定で作成しました。
では、こちらのHTMLとCSSについて簡単に説明していきます。
※CSSでrem指定しているところは、使用する人の環境によって数値が変わりますのでご注意ください。
※このwebサイトでは、1rem＝10pxくらいのサイズになります。

HTML
<ol 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>
</ol>
CSS
ol.timeline-list {
  padding-left: 0;
  margin: 0;
}
ol.timeline-list li {
  list-style: none;
  padding-top: 1.5rem;
  padding-left: 8rem;
  position: relative;
  counter-increment: timelineNum;
}
ol.timeline-list li:not(:last-of-type) {
  padding-bottom: 4rem;
}
ol.timeline-list li:not(:last-of-type)::before {
  content: " ";
  display: block;
  position: absolute;
  background-color: #000;
  width: 2px;
  height: calc(100% - 5.4rem);
  top: 5.5rem;
  left: 2.8rem;
}
ol.timeline-list li::after {
  content: counter(timelineNum, decimal-leading-zero);
  display: block;
  position: absolute;
  background-color: #000;
  width: 5.6rem;
  height: 5.6rem;
  top: 0;
  left: 0;
  color: #fff;
  line-height: 5.6rem;
  font-family: "Quantico", sans-serif;
  text-align: center;
  font-size: 1.6rem;
}

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

CSSで自動で連番をつけたリストのHTMLの説明

今回はolでマークアップしています。
なぜulではなくolにしたかというと、連番を振る場合は順序付きリストの方が適切だと思ったからです。

「timeline-list-title」というタイトル用のクラスを作成しましたが、必ず必要というわけではないので消してもOKです。見た目的にあった方がいいかな～くらいの気持ちで作っています。
使用例について、例えば料理を作る手順を紹介する場合、このタイトル部分に「まず具材を切ります」などといれます。その下に「じゃがいもを一口大に切り、にんじんはいちょう切りにします。」などの説明を入れます。

HTML
<ol 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>
</ol>

タイムラインのCSSの説明

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

css適用前の状態

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

olとliの指定

CSS
ol.timeline-list {
  padding-left: 0;
  margin: 0;
}
ol.timeline-list li {
  list-style: none;
  padding-top: 1.5rem;
  padding-left: 8rem;
  position: relative;
  counter-increment: timelineNum;
}
ol.timeline-list li:not(:last-of-type) {
  padding-bottom: 4rem;
}

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

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

liに設定した「counter-increment: timelineNum;」というプロパティ。これで「ol.timeline-list」の中にある「li」の数を数えてくれます。
これが後で作成する連番で必要になります。
今回は「timelineNum」という名前にしていますが、「timelineNum」ではなく別の名前にしても大丈夫です。

liに「padding-top: 1.5rem;」を指定しました。これは後で作成する連番の位置調整で必要なため、設定しています。

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

縦線と連番を擬似要素で作成する

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

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

CSS
ol.timeline-list li:not(:last-of-type)::before {
  content: " ";
  display: block;
  position: absolute;
  background-color: #000;
  width: 2px;
  height: calc(100% - 5.4rem);
  top: 5.5rem;
  left: 2.8rem;
}

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

「left: 2.8rem;」で、四角アイコンの真ん中くらいの位置に縦線を配置ました。

CSS
ol.timeline-list li::after {
  content: counter(timelineNum, decimal-leading-zero);
  display: block;
  position: absolute;
  background-color: #000;
  width: 5.6rem;
  height: 5.6rem;
  top: 0;
  left: 0;
  color: #fff;
  line-height: 5.6rem;
  font-family: "Quantico", sans-serif;
  text-align: center;
  font-size: 1.6rem;
}

次に連番部分を作成します。
幅と高さを指定して、topとleftで配置を決定します。

「content: counter(timelineNum, decimal-leading-zero);」が数字を出力する部分です。「timelineNum」は、先ほどliに設定した「counter-increment: timelineNum;」と同じ名前です。
「decimal-leading-zero」を指定することで、連番の表示形式を変更できます。この指定だと1桁の数字の場合に、「01」のように数字の直前に「0」を表示できます。必要ない場合は消してください。

「line-height: 5.6rem;」と「text-align: center;」を指定して、数字が上下左右中央に表示されるように調整しました。

簡単なまとめ

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

  1. 01タイトルが入ります。

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

  2. 02タイトルが入ります。

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

  3. 03タイトルが入ります。

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

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

今回のまとめ

  • ulやliについている余分なcssは打ち消す
  • liの擬似要素で縦線と連番を作成するため、配置するためのスペースを確保する
  • 一番最後の要素以外にCSSを適用させたい場合は「:not(:last-of-type)」を使う
  • 縦線と連番のサイズや位置は、他の要素の配置を考慮して考える
  • 連番を振るために数えなければいけない要素に「counter-increment」を指定して、好きな名前を付ける（今回はli）
  • 連番の擬似要素に「content: counter(前項でつけた名前, decimal-leading-zero);」と指定すると、「01」のような形式で数字を表示できる
  • 数字の表示形式を「1」のようにする場合は、「, decimal-leading-zero」部分は削除する

今回の参考サイト

メールアカウント設定をする
HTMLとCSSでタイムラインを作りました