見出しにも連番を振りたいよね
見出しや段落などの要素に連番を振りたいときにはcounter-incrementプロパティが使えます。
counter-incrementプロパティとは
要素の数を数えるカウンター。counter-incrementプロパティはカウンターであり単体では表示できません。
数えたい要素に対してcounter-incrementプロパティでカウンターを作り、表示したい所にcontentプロパティのcounter()関数やcounters()関数でカウンターの値を挿入するという流れ。
html
html
<body>
<h1>ページタイトル</h1>
<h2>タイトル</h2>
<p>じゅげむ じゅげむ ごこうのすりきれ かいじゃりすいぎょの すいぎょうまつ うんらいまつ ふうらいまつ</p>
<h2>タイトル</h2>
<p>くうねるところに すむところ やぶらこうじの ぶらこうじ</p>
<h2>タイトル</h2>
<p>パイポパイポ パイポのシューリンガン シューリンガンのグーリンダイ</p>
<h2>タイトル</h2>
<p>グーリンダイのポンポコピーのポンポコナーの ちょうきゅうめいのちょうすけ</p>
</body>
css
css
body { counter-reset: number; } /* カウンター初期化 */
h2 { counter-increment: number; } /* h2をカウントするnumberという名前のカウンターを作る */
h2:before{ content: counter(number)" "; } /* h2の前にnumberの値と半角スペースを挿入 */
その他気付いたこと
- コメント化されたhtmlの中にある要素は無視してカウントされる。
- リストではないのでcssでナンバリングする事で、htmlから「ナンバリングされた」という情報が抜けおちてしまうのだけど、構造化文書としてはどうなんだろう、こういうの。レシピとか手順とかだと順序の記載も大事な情報だと思うけど。