ぶれすとつーる

だいたいjavascript

cssのcounter()って便利だよなーって話

css

TL見てて@watilde氏がこんなこといってるの見て



昔制作さんにもらったテンプレでcounter()使われてたときはjsで制御しなきゃいけないだろーなって思ってところばっさりいらなくなったのでかなり感動したなーって思い出してあれだったのでサンプルコード書いてみた。

サンプル(動きはResultを参照)

ぐぐったほうが正確な使いかたでるだろうけどcounter-incrementすればcssでカウンター機能が実現できるよってやつ

.item-first {
    border-top: 6px solid #069;
    counter-reset: item;
}

.item-raw {
    border-left: 6px solid #069;
    border-right: 6px solid #069;
    border-bottom: 6px solid #069;
    padding: 5px;
    height: 2em;
    line-height: 2em;
}

.item-input:before {
    counter-increment: item;
    content: counter(item) ")　";
}

jsfiddleのサンプルみたらわかるけど要素なくなったり増えたりしたときに自動計算されるのでjs制御がごっそりなくせて幸せ度高い。

たとえばcss counter()使わなかった場合は
1)
2) <-こいつ消す
3)

ってしたときに
1)
3)
ってなって番号振り直す必要があるけどcounter()様はこの辺をよしなにやってくれる。


あ、ちなみに例のごとくie7はサポートしてません(^q^)
スマホサイトとかだともはや普通に使えるのでオヌヌメ