目次
リストやスタイルシートで数字の連番を設定する方法
順番に数字を割り振りたい時に、数字を書くのが大変。
それぞれにクラスを与えるのも大変…
そんな時に役立つ、連番の設定方法についてご説明します。
HTMLで数字の設定をする
「ol」のタグを使います。
サンプル
|
1 2 3 4 5 |
<ol> <li>数字の連番</li> <li>数字の連番</li> <li>数字の連番</li> </ol> |
表示サンプル
- 数字の連番
- 数字の連番
- 数字の連番
CSSで数字の設定をする<
cssの「before」を使って指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<style> .numbers{ counter-reset: number; } .numbers p::before { counter-increment: number; content: counter(number); } </style> <div class="numbers"> <p>数字の連番</p> <p>数字の連番</p> <p>数字の連番</p> </div> |
「CSS」表示サンプル
数字の連番
数字の連番
数字の連番
Related Posts
