CSSで連番をつける方法【現役エンジニアが解説】
今回は、CSSで連番をつける方法について、CSSでの方法とCSS以外での方法に分け、簡単に解説していきます。
CSS
counter-incrementとcontentの2つのプロパティで実装できます。
要素にカウンタを設定し、要素のbeforeの擬似クラスで要素の手前に連番を表示させます。
section{ counter-increment:hoge; } section::before{ content:counter(hoge)". "; }
上記のコードでは、section要素にhogeというカウンタを設定し、”n. ~”の形式で表示させています。
HTML
ol要素はordered listの略であり、この要素ではリストに連番をつけることが可能です。
リスト全体をol要素で囲んだうえで、個々のリストをli要素で囲み、順序のあるリストを作ります。
<ol> <li>hoge1</li> <li>hoge2</li> <li>hoge3</li> </ol>
上記のコードでは、hoge1~3という文字列のリストを作り、それぞれの文字の手前には連番がつけられます。
JavaScript
JavaScriptでは要素の種類を問わず、全ての要素に自由度の高い連番をつけることができます。
for文等のループ文でカウンタ変数をカウントアップさせながら、各要素の文字に連番をつけていきます。
var sections = document.getElementsByTagName("section"); for(var i=0;i<sections.length;i++){ sections[i].innerText = (i+1) + ". " + sections[i].innerText; }
上記のコードでは、section要素を全て取得し、各section要素に対し、ループ文を使って、連番をつけています。