【css】counter-incrementプロパティを使ってcssでリストに番号をふる方法

2016年6月6日

普段コーディングを行っていて、リスト形式で並んでいる文章に１、２、３…と番号をふっていきたいことってありますよね。
そんな時にcssのcounter-incrementプロパティとbeforeを使って番号をふることができます。

下記が見本のソースとなります。

【HTML】

<body>
<div class="sample">
<ul>
<li>サンプル</li>
<li>サンプル</li>
<li>サンプル</li>
</ul>
</div>
</body>

<body>

<ul>

</ul>

</div>

</body>

【CSS】

.sample ul li{
counter-increment: number;
padding-left: 1em;
text-indent: -1em;
}
.sample ul li:before{ 
content: counter(number);
display: inline-block;
width: 1em;
text-indent: 0;
color: #00AC9A;
}

.sample ul li{

counter-increment: number;

padding-left: 1em;

text-indent: -1em;

}

.sample ul li:before{

content: counter(number);

display: inline-block;

width: 1em;

text-indent: 0;

color: #00AC9A;

}

cssで連番を適用したい要素に対して、counter-increment: 任意の名前;、beforeでcontent: counter(任意の名前);を入れてあげることで番号をつけることができる！
その他の記述については、2行、3行と増えて行った時でも文章が見えやすいように体裁を整えるような記述となっています。
実際には、こんな感じで表示されます。

スクリーンショット 2016-06-06 16.36.46