list-styleを使わない方法。
活用イメージ
連番はolの初期状態で振られてるんだけど、これは単純にliに紐付いてるだけで色とサイズを除く装飾に耐えられない。特定商取引法とかプライバシーポリシーみたいな、テキスト用途だったらそれでいいんだけど。
わざわざ画像を作ったりhtml上で連番を手打ちする、jsで挿入するのもまだるっこしいのでcssで出力したほうがいいよね、っていうケースがある。::beforeとか::afterとか疑似要素に突っ込めるなら楽だよね。それをやっていく。
組み方
htmlでこんな感じのがあったとして
<div class="wrap">
<div></div>
<div></div>
<div></div>
<div></div>
</div>こうする
.wrap{
counter-reset: numberCount; //カウンタ名宣言
}
.wrap > div::before{
content: counter(numberCount); //表示する
counter-increment: numberCount; //+1する
}カウンターの初期値は「0」で、counter-incrementで数値の増減を指定することで変化する。jsとかと違って表示の後に増減の命令を書いても増減後の数値が表示される。だからこの場合、表示されるのは「1～4」になる。宣言と表示と増減は別々に書き込む必要があることを理解する。
応用するとこうなる
.wrap{
counter-reset: numberCount 99; //初期値を99に設定
}
.wrap > div::before{
content: "No."counter(numberCount); //文字列追加
counter-increment: numberCount -1; //-1する
}ulだろうがdlだろうが疑似要素に対応してるタグなら何にでも使える。
cssもhtmlもなんだかんだピーキーなので、htmlでちゃんとパターンを組んでcssできちんと指定する、っていう前提でやること。
疑似要素を触ってたら分かってると思うけど、contentは文字列を出力することしかできない。htmlタグを突っ込むことはできないので、極力シンプルな利用に留める。ついでに、出力される連番はただの数字（0123456789）なので、こういう（①②③…）機種依存文字は無理なんで、やりたかったら疑似要素自体をどうにかしてそれっぽく見せる。2桁にしたいとかローマ数字にしたいとかそういうのは指定できる。詳しくは↓とかを見ると分かる。
まとめ的なもの
殆ど使わないというか、使っても局所的だからあんまり活用の幅はないなというのが体感。
でもまあ知らないより知ってたほうが便利。
調べてみたら色々設定できることは分かるけど、その恩恵はどうなんだろうね。
コメント