0

counter-incrementプロパティを使って自動連番を実現する

counter-incrementプロパティを使って自動連番を実現する

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-1.HTMLを記述

 1-2.CSSを記述

 

サンプル1

 

2.自動連番をある一定の間隔値で割り振る

 サンプル2

カウンタを1づつではなく、指定した数値づつ増やしたい場合は、counter-incrementプロパティの値を[カウンタ名 整数値]の形式で指定します。

例)theme 3

 

2-1.HTMLを記述

 2-2.CSSを記述

 

サンプル2

 

3.入れ子のリストをカウントする

 サンプル3

カウンタ自身を入れ子にすることも可能です。その際は、counters()を使って一括設定を行います。同じカウンタ名のリストが、ネストされた入れ子構造であれば、ネストされたリストに対して「2-1.」「2-2.」「2-3.」「2-3-1.」のように番号付けします。

 

3-1.HTMLを記述

3-2.CSSを記述

 

 サンプル3

 

4.counter-resetを使ってみる

よくある質問で「Q」&「A」がそれぞれリスト化されて場合に番号の連番を決まった場所でリセットしたい場合があります。試しに下記コードを記述しプレビューしてみてください。

 

4-1.HTMLを記述

 4-2.CSSを記述

サンプル4

 

サンプル4

 

一見正しく表示されているように見えますが、このままだと「A.」の番号が1づつ加算され続けてしまうので、「Q.」ごとに番号をリセットしなければなりません。そこでcounter-resetを指定します。指定する場所は、counter-incrementを指定した前の要素でcounter-resetを指定します。つまりcounter-increment: answer;を指定した要素<dd>の前にくる<dt>に指定するということになります。ですのでCSSを下記のように書き換えます。

4-3CSSを書き換える

 こうすることで、「Q1.」「Q2.」「Q3.」ごとに「A1.」「A2.」が表示されるようになります。

サンプル5

 

サンプル5

 


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > counter-incrementプロパティを使って自動連番を実現する