今回は、「CSSを使って自動でナンバリングする方法」について解説します。
CSSを使って自動でナンバリングする方法
デモサイトはこちら。
1〜10までの数字がナンバリングされていることが分かるでしょう。
HTML
<ul>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
<li>テキストが入ります。テキストが入ります。テキストが入ります。</li>
</ul>
ulとliでリストを作成します。
CSS
/* 行頭を揃える */
ul {
box-sizing: border-box;
width: 300px;
padding: 20px;
margin: 0 auto;
background-color: pink;
counter-reset: item;/* カウントをリセットする */
}
ul li {
line-height: 1.3;
}
ul li:not(:last-child) {
margin-bottom: 20px;
}
ul li::before {
counter-increment: item;/* 「item」が増えたらナンバリングさせる */
content: counter(item)".";/* ブラウザに表示させる */
}
まずはulに対して「counter-reset: item;」を指定して、カウントをリセットします。
itemの部分は変数みたいなものなので、ご自由に変えてください。
次にliのbeforeの擬似要素に対して「counter-increment: item;」でitemが増えたら自動でナンバリングするようにします。
最後に「content: counter(item)”.”;」でブラウザにナンバリングした数字を表示させます。
まとめ
以上が、「CSSを使って自動でナンバリングする方法」でした。
