counter-incrementプロパティは、Q&Aやサイトマップ、よくある質問などを記載する時に、テキストの先頭に数字を連番で割り振りたい場合などに利用できます。単なる連番であれば、ulタグやolタグで実現可能ですが、「第1章」や「Q1.」などのように数字と文字を合わせて挿入することは出来ません。そういった際にcontentプロパティを使用します。
カウンタの制御は、counter()、またはcounters()の形式で、()内に「カウンタ名やスタイル（list-style-type）、区切り文字をcontentプロパティに指定します。通常のカウンタはcounter()を用いて、同じカウンタ名のリストがネストされた入れ子構造のリスト等の場合には、counters()で一括指定が可能です。
| 値 | [カウンタ名][カウンタ名 整数値][none] |
| 初期値 | none |
| 適用対象 | すべての要素 |
| 継承 | しない |
| メディア | all |
▼プロパティに指定できる値はそれぞれ以下の意味を示します。
| カウンタ名 | 自動的に1だけ値を進める |
| カウンタ名 整数値 | 指定された整数値の分ずつカウンタの値を進める |
| none | カウンタの値を進めない（初期値） |
カウンタ名は自由につけることが可能で、感じやカタカナ、平仮名を入力することも出来ます。ただし、使える半角記号の文字種はハイフン(-)とアンダースコア（_）のみで、カウンタ名の最初を数字にすることは出来ない決まりです。値の進んだカウンタをリセット（初期値）したい場合には、counter-resetプロパティを指定します。
◆ counter-incrementプロパティの対応状況
 |
 |
 |
 |
 |
 |
 |
| ◯：IE8よりサポート、IE6, 7は未サポート | ◯ | ◯ | ◯ | ◯ | ◯ | ◯ |
1.見出しタイトルの前に「第○章」という連番を振る
1-1.HTMLを記述
|
1 2 3 4 5 6 7 8 9 10 11 |
<h3>起</h3> <p>歴史や人事を題材とし、比喩や連想から詠み始めることにより、様々な展開が出来るとする。</p> <h3>承</h3> <p>「穏健」に作るべきであるとし、突飛、露骨な句であったり、反対に平板であったりすることは避けるように主張している。</p> <h3>転</h3> <p>読み手を驚かす変化を入れるよう求めている。ただし、「転」の句は、「承」のそれと表裏一体であり、別物であってはならず、互いに応じ、互いに避けるという一貫性がなければならないとする。</p> <h3>結</h3> <p>「言に尽くる有りて意に窮まる無し」とし、適宜にフェードアウトすることにより、「含蓄」という詩作の目的の一つを達成できるとしている。</p> |
1-2.CSSを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 |
h3 { counter-increment: story; color: #F00; font-size:160%; line-height:1.3em; margin:10px; } h3::before { content: "第" counter(story) "章 " ; font-size: .7em ; color: #FFF; } |
2.自動連番をある一定の間隔値で割り振る
カウンタを1づつではなく、指定した数値づつ増やしたい場合は、counter-incrementプロパティの値を[カウンタ名 整数値]の形式で指定します。
例）theme 3
2-1.HTMLを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<h3>テーマ</h3> <p>text</p> <h3>テーマ</h3> <p>text</p> <h3>テーマ</h3> <p>text</p> <h3>テーマ</h3> <p>text</p> <h3>テーマ</h3> <p>text</p> |
2-2.CSSを記述
|
1 2 3 4 5 6 7 8 |
.themeBox h3 { counter-increment: theme 3; color: #F00; font-size:160%; } .themeBox h3:before { content: counter(theme) ". "; } |
3.入れ子のリストをカウントする
カウンタ自身を入れ子にすることも可能です。その際は、counters()を使って一括設定を行います。同じカウンタ名のリストが、ネストされた入れ子構造であれば、ネストされたリストに対して「2-1.」「2-2.」「2-3.」「2-3-1.」のように番号付けします。
3-1.HTMLを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ol> <li>項目</li> <li>項目 <ol> <li>項目</li> <li>項目</li> <li>項目 <ol> <li>項目</li> <li>項目</li> </ol> </li> <li>項目</li> </ol> </li> <li>項目</li> <li>項目</li> </ol> |
3-2.CSSを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
ol { counter-reset: item; list-style: none; line-height:2.0em; } li { display: block; background-color:#222; border-radius:5px; margin:5px; padding-left:10px; text-shadow:none;color:#FFF; } li:before { content: counters(item, "-")". "; counter-increment: item; } |
4.counter-resetを使ってみる
よくある質問で「Q」&「A」がそれぞれリスト化されて場合に番号の連番を決まった場所でリセットしたい場合があります。試しに下記コードを記述しプレビューしてみてください。
4-1.HTMLを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<p>よくある質問</p> <dl id="faq"> <dt>質問</dt> <dd>質問内容をここに記述</dd> <dd>質問内容をここに記述</dd> <dt>質問</dt> <dd>質問内容をここに記述</dd> <dd>質問内容をここに記述</dd> <dt>質問</dt> <dd>質問内容をここに記述</dd> <dd>質問内容をここに記述</dd> </dl> |
4-2.CSSを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#faq dt { counter-increment: question; } #faq dt:before { content: "Q" counter(question) "."; } #faq dd { counter-increment: answer; } #faq dd:before { content: "A" counter(answer) "."; } |
一見正しく表示されているように見えますが、このままだと「A.」の番号が1づつ加算され続けてしまうので、「Q.」ごとに番号をリセットしなければなりません。そこでcounter-resetを指定します。指定する場所は、counter-incrementを指定した前の要素でcounter-resetを指定します。つまりcounter-increment: answer;を指定した要素<dd>の前にくる<dt>に指定するということになります。ですのでCSSを下記のように書き換えます。
4-3CSSを書き換える
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#faq dt { counter-increment: question; counter-reset: answer; } #faq dt:before { content: "Q" counter(question) "."; } #faq dd { counter-increment: answer; } #faq dd:before { content: "A" counter(answer) "."; } |
こうすることで、「Q1.」「Q2.」「Q3.」ごとに「A1.」「A2.」が表示されるようになります。
