cssのcounterを使ってみた。
下のページの文字達は全てcss内で書かれているっ
https://hai3.net/dev/increment.html
こういうインクリメンタルな値をCSSで扱うことができるのがcounter。
counterはcontentプロパティ内で使うことができて、
content: counter(counterの名前);
というように使う。この場合、カウントしていないので必ず０が表示される。
カウントをするには、counter-incrementプロパティを使用する。
.miku
という要素をカウントしたければ、mikuのcounter-incrementにカウンタ名を指定する。
.miku{
counter-increment: miku;
}
このようにすれば、.mikuが出現するたびにmikuカウンタがインクリメントされる。
これで、以下のように
.miku:before{
content: "その" counter(miku);
}
とすると、最初の.mikuには「その1」
次の.mikuには「その2」
３つめの.mikuには「その3」
というように、インクリメンタルな数値が表示される。
counter-resetというものも用意されていまして、これはcounterの数値を０にすることができる。
たとえば、
.unco{
counter-increment: unco;
}
.unco:nth-child(3n+1){
counter-reset: unco;
}
.unco:before{
content: counter(unco);
}
のように、3n+1のnth-childでcounterがリセットされる。
こうすると、カウンタが.uncoに応じて1,2,3,1,2,3,1,2,3・・・とループすることになる。
