2021/01/30

CSSで連番をつける方法【現役エンジニアが解説】

PROGRAM

今回は、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要素に対し、ループ文を使って、連番をつけています。

• facebook
• Tweet
• Read Later