• HOME
  • HTML/CSS
  • CSS（スタイルシート）で連番・項目名などを付ける

CSS（スタイルシート）で連番・項目名などを付ける

管理人:sofu

サイトマップやQ&A、契約文書を載せるときに、各項目の頭に数字や印をつけるときがあると思います。数字の連番だけなら<ul>タグや<ol>タグを使えばできますが、「1章」「Q1.」みたいに数字と文字を一緒に挿入することはできません。そこでcontentプロパティというCSS（スタイルシート）を使います。

contentプロパティ関連の一覧
プロパティ名 指定値 説明
content 文字列 「"」または「'」で括って文字列を指定
counter(カウンタ名) counter-incrementで指定したカウンタ名を記述
counter-increment カウンタ名 contentプロパティで追加された連番の値を進めるプロパティ。
counter-reset カウンタ名 contentプロパティで追加された連番の値を初期化するプロパティ。

contentプロパティを使って、項目の前に「Q.」「A.」を挿入

まずは、HTMLを記述

 
<dl id="faq">
    <dt>質問</dt>
    <dd>テキストテキスト</dd>
    <dd>テキストテキスト</dd>
    <dt>質問</dt>
    <dd>テキストテキスト</dd>
    <dd>テキストテキスト</dd>
    <dt>質問</dt>
    <dd>テキストテキスト</dd>
    <dd>テキストテキスト</dd>
</dl>
 

次に、項目の前に「Q.」を挿入するCSS（スタイルシート）を記述します。
<dt>タグにcounter-incrementを指定。任意の値（今回はquestion）を付けます。:before疑似要素を使ってcontent: counter();を指定します。

 
#qa dt {
    counter-increment: question;
}
 
#qa dt:before {
    content: "Q" counter(question) ".";
}
 

同じように<dd>にも「A.」が挿入されるようにCSS（スタイルシート）を指定します。

 
#qa dd {
    counter-increment: answer;
}
 
#qa dd:before {
    content: "A" counter(answer) ". ";
}
 

サンプル

ただ、このままだと上のサンプルのように「A.」の番号がずっと増え続けるので、番号をリセットするcounter-resetを指定します。ここで注意して欲しいことは、counter-incrementを指定した前の要素でcounter-resetを指定することです。つまりcounter-increment: answer;を指定した要素<dd>の前にくる要素<dt>に指定しなければいけません。

 
#qa dt {
    counter-reset: answer;
}
 

まとめ・サンプル

今までの記述をまとめて書くとこうなります。この方法は、IE6～7には使えないのでまだ活用できませんが、2～3年後には普通に使っている方法だと思います。今のうちに覚えておいても損はないですし、プロのコーダーの人は使わずしても頭の片隅に置いていると思います。

 
#qa dt {
    counter-increment: question;
    counter-reset: answer;
}
 
#qa dt:before {
    content: "Q" counter(question) ".";
}
 
#qa dd {
    counter-increment: answer;
}
 
#qa dd:before {
    content: "A" counter(answer) ". ";
}
 

※CSSでフォント・ボーダーなど装飾に関する記述は便宜上、省かせていただきました。

完成したサンプル

date 2010.10.27
blog comments powered by Disqus

PageTop