cssのcontent”counter”って便利ですよね。
使い方を間違えて連番にならず、全部1になるという事がありましたので、正しい書き方をメモします。
HTMLコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="contents"> <section> <h3>テキスト</h3> <p>ああああああ</p> </section> <section> <h3>テキスト</h3> <p>ああああああ</p> </section> <section> <h3>テキスト</h3> <p>ああああああ</p> </section> </div> |
CSS（間違い）
|
1 2 3 4 |
h3:before { counter-increment:num; content:counter(num); } |
間違っているし、あと1つ記述が足りません。
CSS（正しい）
|
1 2 3 4 5 6 7 8 9 |
#contents { counter-reset:num; } h3 { counter-increment:num; } h3:before { content:counter(num); } |
(num)となっているところは自分で好きな名前を付けるところです。
counter-reset:がカウンターリセットの役割を果たすのですが、これを然るべき位置に設定することで連番を表示させることができます。
counter-reset:はカウンターを表示させる要素の1つ上の親に指定するといいと思います。
スポンサードリンク