SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.06.28
  • CATEGORY
TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

counterについて

counterについて

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

ol li {
	/*--カウンター名を「カウンター名を入力」に指定--*/
	counter-increment: カウンター名を入力 数値;
}
	
ol li:before {
	/*--content  counter(カウンター名)を指定--*/
	content: counter(カウンター名を入力);
}
指定できる値
  • none(初期値)
    カウンターを指定しません
  • カウンター名
    値を更新したいカウター名を入力します
  • 数値
    指定した整数の前後に数値が増えていきます、0や負の値も指定できます(省略時は1になります)
    指定した要素が続く度に数字が1つずつ増えていきます。

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

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

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

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

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

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

counter(カウンター名)

  1. 〇〇〇〇商品
  2. 〇〇〇〇商品
  3. 〇〇〇〇商品
  4. 〇〇〇〇商品
  5. 〇〇〇〇商品
<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(カウンター名を入力,表示形式);}

表示形式

  1. 〇〇〇〇商品
  2. 〇〇〇〇商品
  3. 〇〇〇〇商品
  4. 〇〇〇〇商品
  5. 〇〇〇〇商品
<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(リセット)について

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

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

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

reset(リセット)

  1. 〇〇〇〇商品
  2. 〇〇〇〇商品
  3. 〇〇〇〇商品
  1. リセット商品
  2. リセット商品
  3. リセット商品
<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;}

まとめ

今回はこれで以上です。
毎回、番号を手打ちをするのが、大変だとおもう方はこのcounterを使用してみてはいかがでしょうか。

POINT
  • counterを指定することにより、連番などのナンバリングの機能を実装ができます。
  • 表示形式の変更はcountercounter(カウンター名を入力,表示形式)になります。
  • リセットの変更はcounter-resetカウンター名 リセット値 になります。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top