PAGETOP

【CSS】スクリプトを使わず、CSSだけで手軽に連番を振る方法

【CSS】スクリプトを使わず、CSSだけで手軽に連番を振る方法

表やリストに順番に連番を振りたいとき、Javascriptでも実装することができますが、もっと手軽な方法があります。
CSSの「counter-reset」と「counter-increment」プロパティです。
これは、CSSのみで１ずつ数字を増やしていく、という処理ができるもの。CSS2からすでに存在していましたが、あまり活用していない方もいるのではないでしょうか。
今回は、この便利なプロパティの使い方をご紹介します。

counter-resetって何？

カウンタ変数を作成し、カウンタの値をリセット。ゼロにします。
記述を省略することもできます。

counter-incrementって何？

カウンタに値を１ずつ増やしていきます。
加算する値を指定することもできます。

使い方

①表組やリストなど、連番を使いたい要素にカウンタ変数を生成させます。
カウンタ変数の名前は任意です。
ここでは「ranking」という名の変数を使いました。

[HTML]


<table> 
<caption>表のタイトル</caption> 
<tr> <th>順位</th> <th>項目</th> <th>項目</th> </tr> 
<tr> <th class="rank"></th> <td>値1</td> <td>値２</td> </tr> 
<!--繰り返す-->
 </table>




table{ 	
counter-reset:ranking; 
}

②連番を振りたい要素のカウンタ変数を加算します。
下記のように記述すると、rankクラスが付与されたth要素に１ずつ値が加算されていきます。


table th.rank{ 	
counter-increment:ranking;
}

③このままでは値は加算されるものの、画面には表示されません。
カウンタ変数の値を疑似要素「before」に表示させます。


table th:before{ 	
content: counter(ranking) ; 
}

もっと便利な使い方

・カウンターの初期値を設定する
＊100から加算を始める場合


table{
counter-increment:ranking 100;
}

・加算ではなく、減算する場合は、負の値を指定する


table{
counter-increment:ranking -1;
}

・連番の前後に文字を加える


table th.rank:before{ 	
content: "第" counter(ranking) "位"; 
}

サンプルはこちら。

表組み以外に、リストや見出しでも同様のことができます。
簡単な連番なら、スクリプトを使わなくてもこれで十分ですね。
知らなかった！という方はぜひ使ってみてください。

CSSについて, jQueryについて, WEBデザイン