[CSSコードスニペット] h2とh3の前に番号付け
h2
とh3
の前に自動的に番号を付けてくれれば本当に良いという考えをしてきた。しばらく前だIE8からCSSの counter
属性をサポートしていることを知った。すごい!
以下は、 counter
属性を利用したCSSコード部分である。そうすれば、 h2
ごとに番号が付けられる。 h2
が起動するたびに h3
の番号がリセットされ、1から再起動する。コード見て説明聞こう。
.document {
counter-reset:h2number;
}
.document h2 {
counter-increment:h2number;
counter-reset:h3number;
}
.document h2:before {
content:counter(h2number) '. ';
}
.document h3 {
counter-increment:h3number;
}
.document h3:before {
content:counter(h3number) ')';
}
プロパティを三つ使っていることにだ。 counter-reset
、counter-increment
、content
。そして content
プロパティの値に ‘counter(変数名)’を使用した。
ここでは、パブリッシャーにはやや理解しにくいかもしれない概念が登場した。この counter
は、変数を使用する。数字を覚えなければならないからである。私は h2
の数字を記憶させるための変数に h2number
を使用した。
ここでは、 h2
に counter-increment:h2number
して書いてくれれば counter-reset
のようなものなくても、一度最初に出てくるh2
と1をCSSの世話を関連づけて。そして、その後、 h2
が出てくるたびに数字を1ずつ上げることになる。
私は選択子を .document h2
と書いた、そして .document h2
にのみ影響を与える。 .asdf h2
が出てもカウンターが上がらないということだ。
h3
は h2
が出てくるたびに数字が1から再起動しなければならない。だから h2
に counter-reset:h3number
を入れておいたのだ。これにより、 h2
が出てくるたびに、h3
の数字を記憶している変数h3number
が1にリセットされる。
最後に、 content:counter(h2number) '. ';
コードを見てみよう。まず、このコードは、 .document h2:before
の属性である。したがって、 `、:before ‘選択が動作している場合にのみこれ動作することだ。 IE8でこの選択はよく働く。 IE8では、二重引用符では動作せず、単一引用符でのみ動作するので参考にしてください。
値の counter(h2number)
は数を指す。そして '. '
は点を打ち、一間浮かべることだ。他の言語とは異なり、 +
や`。’のようなラインのシンボルかだけなので構いません。
だから、まとめると以下のとおりである。一度 counter-reset
は必須ではない。
counter-increment
:その要素が出てくるたびに、指定した変数が覚えている数字を一つずつ上げる。最初に出てくる1から開始します。counter-reset
:その要素が出てくる指定された変数が覚えている数字をリセットする。content
:counter(変数名)
を入れてくれるプロパティです。:before
や:after
セレクタで動作することを忘れてはならない。
以上です。書くことが多いのか分からない、一度明らかに使うところはあると思います。すぐに私の個人的な文書整理システムも既に導入した。
- コメント機能はありません。コメントの代わりに[email protected]
にメールを送ってください。