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]にメールを送ってください。