使ってみたくなるやつ！！
あまり使い道はなさそうだけど、
あると使いたくなるものがCSS3には沢山ありますよね。
今回はこれ
DEMO
|
1 2 3 4 5 6 7 8 9 10 11 |
<dl> <dt>質問の内容です</dt> <dd>テキストテキストテキストテキスト</dd> <dd>テキストテキストテキストテキスト</dd> <dt>質問の内容です</dt> <dd>テキストテキストテキストテキスト</dd> <dd>テキストテキストテキストテキスト</dd> <dt>質問の内容です</dt> <dd>テキストテキストテキストテキスト</dd> <dd>テキストテキストテキストテキスト</dd> </dl> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
dt { counter-increment: q; counter-reset: a; } dt:before { content: 'Q' counter(q) '.'; } dd { counter-increment: a; } dd:before { content: 'A' counter(a) '. '; } |
increment で、１進めて
reset で、リセットするってだけです。
dd 側のカウンターを
dtの時にリセットしておかないと
デモの例でいうと1から6までになってしまうのでご注意を。
一応IE8で見たらいけてたので
対応ブラウザに関してはあまり気にせずいけるかと思われます。
使い道考えたけど、
クライアントさんに記事とか書かせるときに
同じようなボックスに連番付与したデザインのときとか
クライアントさんがわざわざ連番いれていかなくても
勝手にカウントされていくとか、
そんな感じでしょうか？