入れ子OLリストにCSSのカウンタで番号を振る方法
まずは見た目。こんなんです。
実物はこの記事の下の方にあるのでそちらを見てもらえれば良いかと思うのですが、とりあえずキャプチャはってみますね。右側の赤字部分はそこのhtmlソースです。
意味的に正しいマークアップかとか厳しい目で見ると多分「1.コンピューターのある暮らし」とかはh要素使った方が良いかもしんないです。まぁまぁそれは置いておいて、今回はOLを入れ子にした時に親の番号を引き継いでその階層ごとに連番ふりたいってお話。
サンプルページ
上のソースのままだと、ちょっと分かりにくいのでとりあえずサンプルページ作りました。
>> 入れ子OLリストにCSSのカウンタで番号を振る方法 サンプルページ
OLの入れ子は３段階にしたサンプル。htmlソースとcssソースは下記の通りです。
<ol>
<li>テキスト１
<ol>
<li>入れ子１段階目テキスト１</li>
<li>入れ子１段階目テキスト２</li>
</ol>
</li>
<li>テキスト２
<ol>
<li>入れ子２段階目テキスト１</li>
<li>入れ子２段階目テキスト２
<ol>
<li>入れ子３段階目テキスト１</li>
<li>入れ子３段階目テキスト２</li>
<li>入れ子３段階目テキスト３</li>
</ol>
</li>
<li>入れ子２段階目テキスト３</li>
</ol>
</li>
</ol>
ol{
counter-reset:item;
list-style-type:none;
}
li:before{
counter-increment:item;
content:counters(item, "-")". ";
}
CSS解説
やってる事はCSSのカウンタ使ってcontentsプロパティでカウンタの値を連番にして出力しましたってだけの話なんですが、せっかくなのでもう少し丁寧に見ていきますね。見たくなくてもせっかくだからゆっくりしていってね！
counter-reset を使ってカウンタの値をリセットする。
「counter-reset」プロパティは、カウンタの値をリセット(初期化)するためのプロパティです。書き方はこんな感じ。
counter-reset : 「カウンター名」 「リセット値」;
値の「カウンター名」には任意の名前を入れます。上のサンプルページでは「item」としています。一応この値は「カウンター名」か「none」を入れるようになっているのですが、「none」にする使い道が浮かばないので、とりあえずカウンター名を入れると覚えておけば良いかと。
「リセット値」は任意の値を指定できます。省略した場合は「0」になります。負の数値も指定出来ます。サンプルでは「0」にしたいだけだったので省略しています。
CSSのカウンタというのは、まぁなんていうか、いわゆる「変数」ですね。
ちなみにですが、カウンタによって番号が振られるのがli要素(の前)なのでli要素に「counter-reset」プロパティをセットしてしまいがちですが、あくまでリセットするのは「ここでリセットしておきたい」という要素です。だからここではol要素に「counter-reset」をセットしています。
counter-increment を使ってカウンタの値を更新する。
変数である以上、中身の値が変える事が出来ます。値の中身の数を更新するのに使うのが「counter-increment」プロパティです。
counter-increment : 「カウンター名」 「更新する値」;
「カウンター名」には先ほどリセットした名前と同じものを指定します。カウンタを更新しない時のために「none」値を入れる事も出来ます。
「更新する値」は更新する数を指定します。省略した場合は「1」になります。0や負の数値も指定できます。
counters 関数を使って値を出力する。
さて、本題の入れ子OLリストに連番を振るのですが、「contents」プロパティを使ってli:before疑似要素に連番を当ていきます。その際に使用するのが「counters」関数です。
今回はカウンタも入れ子にしたいから「counters」関数を使いますが、似たような関数で「counter」関数というのもあるのです。そちらは入れ子とか関係ない時に使います。これについては後ほど書きます。とりあえず今はcounters 関数のお話。
content : counters( カウンター名 , "区切り文字", list-style-type) "後に続く文字等";
ちょっとややこしいんですけれども、サンプルでは
content : counters(item, "-")". ";
としています。「item」という名前のカウンタを「-」で区切って、番号の後に「. 」を入れるといった感じの指定です。区切り文字は何でも良いです。「.」にして「1.1.2」みたいな形でも良いですし、日本語でも大丈夫です。
list-style-typeの部分は省略しても大丈夫です。サンプルでは省略しています。使用する場合は「content : counters(item, "-" ,upper-roman)". ";」のように、list-style-typeで指定できる値ならどれでも使えます。upper-roman を指定すれば「Ⅰ-Ⅰ-Ⅱ.」のような表示になりますし、squareなら「■-■-■」のようになります。
ついでなので counter 関数の書き方も確認しておきます。
上でチラっと書いたのですが、counter関数というのもあります。こちらは入れ子状態のものには使えませんが、並列の関係の要素をカウントしていって出力するのに使います。
content : counter( カウンター名) "後に続く文字等";
予め「counter-reset」や「counter-increment」の指定が必要なのは同じですが、こちらはcounters 関数よりシンプルで、単に任意のカウンター名でカウントしている変数の中身の数字を出力します。
"後に続く文字等"と上には書きましたが、「counter(カウンター名)」の前にも""で括った文字列を入れる事が出来ます。例えばこんな感じで使います。
<p>あああああああああああ</p> <p>いいいいいいいいいいいいい</p> <p>うううううううううううううう</p> <p>えええええええええええええ</p> <p>おおおおおおおおおおおおおおお</p>
body{
counter-reset:sample;
}
p:before{
counter-increment:sample;
content:"これは「" counter(sample) "」行目です。";
}