by shigemk2

当面は技術的なことしか書かない

olを使わずに要素に通し番号を振る

CSS

counter-increment CSS 生成内容

要素に連番を振るにはolを使うことが多いと思われますが、
counter-incrementプロパティは contentプロパティで、追加されたカウンタ（連番）の値を進めることができます。
CSS2.1から使えるようになりました。

カウンタは、「1.」「2.」「3.」「4.」の様にして番号を振ったり、
「1.1.」「1.2.」「1.3.」「2.1.」の様にして章や節を表す形で番号を振ることもできます。

カウンタの制御は、counter( )、または counters( ) の形式で、
括弧内にカウンタ名やスタイル（）、区切り文字を contentプロパティに指定して行います。

その性質上、疑似要素beforeで使われることが殆どのようですね。

counterを使う順序として、

  1. contentでフォーマットを決める
  2. contentの中にcounterを用意して、どのようにインクリメントをするかを決める
  3. counter-incrementでどのcounterをインクリメントさせるかを決める
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Hoge</title>
  </head>
  <body>
    <ul>
      <li>小早川大尉</li>
      <li>工藤先生</li>
      <li>Y先生</li>
    </ul>
  </body>
</html>

li:before {
    /* 1. contentで連番を振るフォーマットを決めて、 */
    /* 2. counterでどのようにインクリメントするかを決める */
    content : "Chapter" counter(chapter, decimal-leading-zero) " ";
    /* 3. counter-incrementでどのcounterをインクリメントするかを決める */
    counter-increment : chapter;
    color : #666 ;
}
li {
    color : #136 ;
}

(なお、decimal-leading-zeroで、接頭辞に0をつけることができます)

結果

こんな感じになります。

なお、webkit系のブラウザ(Safari Chrome)では使えません。