[CSS]olの番号に括弧を付けてみた。正確にはolの番号に括弧は付けれらないよね。

css

olの番号に括弧を付けてみた。正確にはolの番号に括弧は付けれらないよね。だからcounter-incrementで連番振ってcontentで括弧付き番号振っちゃうもんね。

2015.09.15

どうも下山です。
忙しくなるとこのブログの存在を忘れるのが特技です。
いえ、特技と言うほどのものではありません。

今回はol、段落番号に括弧をつけてやろうとやっきになってアーデモナイコーデモナイってやった挙句のまとめです。

html sass
1. counter-incrementって？
まとめ

html sass

See the Pen LpGzzy by mitsuki sagayama (@sagayama) on CodePen.

sassそのままだと見慣れない方もいると思うからcssにコンパイルすると↓

ol li {
    list-style-type:none;
    counter-increment:cnt;
}
ol li:before {
    content:"(" counter(cnt) ")";
    margin-right:0.5em;
}

それでは見慣れないプロパティもありますので解説していきます。

counter-incrementって？

counter-incrementはページ内にある、ある要素に連番を与えるプロパティです。
この場合「li」にこのプロパティが付いてますので、「li」が出てくるたびに1，2，3，…と連番を振っていきます。
その振られた連番はどこに行くかというとcounter-incrementの値のcnt(これは任意の値なので好きな名前付けてね)に格納されるわけです。

他の使い方をするとすれば順位を表現するとか↓

See the Pen avdVzy by mitsuki sagayama (@sagayama) on CodePen.

と言う具合に順位を表現することも可能です。

少し応用ですが、この順位を2セット、3セットと同ページで作りたい場合、連番が続かないようにする必要があります。
counter-resetプロパティを使えば一度連番をリセットできますから、同ページで順位を2セット、3セットと作ることができます。

See the Pen yYePYJ by mitsuki sagayama (@sagayama) on CodePen.

クラスrankを数えクラスquesでリセットするってことです。

counter-incrementが分かったところで、後は擬似クラスbeforeを使ってcontentプロパティで「（）」を付けてあげればOKです。
このcontentプロパティを他のものに変えることで色んな表現ができそうですね。

まとめ

あまり使わないcounter-incrementですが、使い方が分かると表現の幅が広がってきますね。
IE+8なので色々使えそうです。