コニファ・ロゴ

csstest:ol要素とcounter-incrementを使い、cssのみで深い階層の枝番を追加

olタグを使用すると、サンプル01のように自動で連番をふってくれますが、CSSの「counter-increment」プロパティを使うと、サンプル02のように、さらに深い階層まで、連番(枝番)をふってくれます。

(サンプル01)olタグを使った通常の自動連番

  1. ダミーテキスト(第1階層)
  2. ダミーテキスト(第1階層)
  3. ダミーテキスト(第1階層)
  4. ダミーテキスト(第1階層)
  5. ダミーテキスト(第1階層)

(サンプル02)olタグに「counter-increment」プロパティを使った枝番付き

  1. ダミーテキスト(第1階層)
  2. ダミーテキスト(第1階層)
    1. ダミーテキスト(第2階層)
    2. ダミーテキスト(第2階層)
    3. ダミーテキスト(第2階層)
      1. ダミーテキスト(第3階層)
      2. ダミーテキスト(第3階層)
      3. ダミーテキスト(第3階層)
    4. ダミーテキスト(第2階層)
    5. ダミーテキスト(第2階層)
      1. ダミーテキスト(第3階層)
      2. ダミーテキスト(第3階層)
  3. ダミーテキスト(第1階層)
  4. ダミーテキスト(第1階層)

サンプル02のhtmlソース

<ol>
  <li>ダミーテキスト(第1階層)</li>
  <li>ダミーテキスト(第1階層)
    <ol>
      <li>ダミーテキスト(第2階層)</li>
      <li>ダミーテキスト(第2階層)</li>
      <li>ダミーテキスト(第2階層)
       <ol>
          <li>ダミーテキスト(第3階層)</li>
          <li>ダミーテキスト(第3階層)</li>
          <li>ダミーテキスト(第3階層)</li>
        </ol>
      </li>
      <li>ダミーテキスト(第2階層)</li>
      <li>ダミーテキスト(第2階層)
         <ol>
           <li>ダミーテキスト(第3階層)</li>
           <li>ダミーテキスト(第3階層)</li>
         </ol>
      </li>
    </ol>
  </li>
  <li>ダミーテキスト(第1階層)</li>	
  <li>ダミーテキスト(第1階層)</li>	
</ol>

サンプル02のCSSソース

ol {
  counter-reset: section;        
  list-style-type: none;
}
li:before {
  counter-increment: section;  
  color: blue;
  content: counters(section, ".") " ";   
}

 

※引用、参考:http://jsdo.it/21f/Ejxr

 

戻るボタン