【CSS】counterを解説！ナンバリング(連番)を挿入

シュウ

今回は【CSS】counterを解説！ナンバリング(連番)を挿入
についての解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
counter(カウンター)の使い方について学びたい方へ
:beforeや:afterについても学習しよう

上の図のように、counterを指定することにより、連番などのナンバリングの実装が
可能になります。

[記事の内容]

counterについて

counterプロパティとは、「:before」と「:after」の擬似要素にコンテンツを挿入します。
書き方は以下のようになります。

ol li {
	/*--カウンター名を「カウンター名を入力」に指定--*/
	counter-increment: カウンター名を入力 数値;
}
	
ol li:before {
	/*--content  counter(カウンター名)を指定--*/
	content: counter(カウンター名を入力);
}

指定できる値

none(初期値)
カウンターを指定しません
カウンター名
値を更新したいカウンター名を入力します
数値
指定した整数の前後に数値が増えていきます、0や負の値も指定できます（省略時は1になります）
指定した要素が続く度に数字が1つずつ増えていきます。

content counter(カウンター名)について

counter(カウンター名)とは、カウンター名を指定することで、連番を挿入します。
counter-incrementと同時に指定します。

counter-incrementプロパティとは、カウンター名を入力をすることにより、連番の指定が可能になります。指定した要素が続く度に数字が1つずつ増えていきます。

今回はカウンター名を「num」に指定し、数値は1からのスタートにします。
counter(num)を指定した際に、ダブルクオーテーションを使い前後に文字の指定が可能になります。

{content: "〇〇" counter(num) "〇〇" ;}

counter(カウンター名)

〇〇〇〇商品
〇〇〇〇商品
〇〇〇〇商品
〇〇〇〇商品
〇〇〇〇商品

<ol class="list-inner">
 	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
</ol>

ol.list-inner li {
	/*--カウンター名を「num」に指定--*/
	counter-increment : num 1;
	list-style: none;
}
	
ol.list-inner li:before {
	/*--content  counter(num)に指定--*/
	content: "第" counter(num) "位";
		
	/*--以下 装飾--*/
	color: #febe3e;
	margin: 0 20px 0 0;
	font-weight: bold;
}

表示形式の変更について

初期値は数字になりますが、漢数字、ひらがなやカタカナにも変更が可能になります。
カウンター名の入力後に,(カンマ)で区切り入力します。

主な表示形式の例

decimal
数字（初期値）
decimal-leading-zero
0つき数字（例：01、02、03）
lower-roman
ローマ数字（小文字）（例：ⅰ、ⅱ、ⅲ）
upper-roman
ローマ数字（大文字）（例：Ⅰ、Ⅱ、Ⅲ）
lower-alpha
アルファベット（小文字）（例：a、b、c）
upper-alpha
アルファベット（大文字）（例：A、B、C）
cjk-ideographic
漢数字（例：一、二、三）
hiragana
ひらがな（例：あ、い、う）
katakana
カタカナ（例：ア、イ、ウ）
hiragana-iroha
いろは順（例：い、ろ、は）
katakana-iroha
イロハ順（例：イ、ロ、ハ）

書き方は以下のようになります。

content: counter(カウンター名を入力,表示形式);}

表示形式

〇〇〇〇商品
〇〇〇〇商品
〇〇〇〇商品
〇〇〇〇商品
〇〇〇〇商品

<ol class="list-inner">
 	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
	<li>〇〇〇〇商品</li>
</ol>

ol.list-inner li {
	/*--カウンター名を「num」に指定--*/
	counter-increment : num 1;
	list-style: none;
}
	
ol.list-inner li:before {
	/*--content  表示形式を指定--*/
	content: counter(num,cjk-ideographic);
		
	/*--以下 装飾--*/
	color: #febe3e;
	margin: 0 20px 0 0;
	font-weight: bold;
}

見出しでのカウンターについて

h1、h2、h3など見出しタグにもcounter(カウンター)の指定は可能になります。

counter(カウンター名)

<h2>タイトル</h2>
<p>テキストが入りますテキストが入りますテキストが入ります</p>

<h2>タイトル</h2>
<p>テキストが入りますテキストが入りますテキストが入ります</p>

<h2>タイトル</h2>
<p>テキストが入りますテキストが入りますテキストが入ります</p>

h2 {

	/*--カウンター名を「num」に指定--*/
	counter-increment : num 1;
	margin-bottom: 10px;
}

h2:before {
	
	/*--content  counter(num)に指定--*/
	content: "第" counter(num, cjk-ideographic) "章 ";
	
	/*--以下 装飾--*/
	color: #333;
	margin: 0 20px 0 0;
	font-weight: bold;
}

ポイント！
counter(カウンター名)を指定する際のポイント！
counterはリストタグ以外での指定も可能になりますが、連番(数値)の意味になるため、
ol li「順序のあるリスト」での使用が一番適してるかとおもわれます。

counter reset(リセット)について

reset(リセット)とは、contentプロパティで挿入するカウンター値をリセットします。
同じクラス名なら、リセットされ1からのスタートになります。
書き方は以下のようになります。

{counter-reset: カウンター名 リセット値;}

reset(リセット)

〇〇〇〇商品
〇〇〇〇商品
〇〇〇〇商品

リセット商品
リセット商品
リセット商品

<ol class="list-inner">
 	<li>〇〇〇〇商品</li>
 	<li>〇〇〇〇商品</li>
 	<li>〇〇〇〇商品</li>
</ol>
<ol class="list-inner">
 	<li>リセット商品</li>
 	<li>リセット商品</li>
 	<li>リセット商品</li>
</ol>

ol.list-inner {	
	/*--リセット「reset」を指定--*/
	counter-reset: num 0; 
}


ol.list-inner li {
	/*--カウンター名を「num」に指定--*/
	counter-increment : num 1;
}

ol.list-inner li:before {
	/*--content  counter(num)に指定--*/
	content: "第" counter(num) "位";
	
	/*--以下 装飾--*/
	color: #febe3e;
	margin: 0 20px 0 0;
	font-weight: bold;
}
ol.list-inner li + li {margin: 10px 0 0;}