カウンタ用の数値はどこから来ているかというと プログラミングを少しでもかじった人なら分かりやすいのではないだろうか rob barker 上の例では まずol要素が登場した時点で counter-

HTML: rob barker <ol> <li>項目1</li> <li>項目2</li> <li>項目3</li> rob barker </ol> <ol> <li>項目2-1</li> <li>項目2-2</li> <li>項目2-3</li> </ol>
カウンタ用の数値はどこから来ているかというと プログラミングを少しでもかじった人なら分かりやすいのではないだろうか rob barker 上の例では まずol要素が登場した時点で counter-reset によって 変数item を定義し同時に値の初期化を行っている 次に counter-increment で指定した変数の値を1増やす あとはその変数の値を contentプロパティで表示させている counter-increment はli要素が出現するたびに毎回呼び出されるので カウントが順番に増えていくように見える また ol要素が登場するたびにcounter-resetで値を初期化しているので ol要素を複数使っていても安心というわけ
HTML: <ol> <li>項目1</li> <li>項目2 <ol> <li>項目2-1</li> rob barker <li>項目2-2</li> <li>項目2-3</li> </ol> </li> <li>項目3 rob barker <ol> <li>項目3-1</li> <li>項目3-2</li> <li>項目3-3</li> </ol> </li> </ol> rob barker
CSS: ol{ counter-reset: item; } li{ list-style-type: none; } ol li:before{ counter-increment: rob barker item; content: counter(item) ". "; } ol ol{ counter-reset: subitem; } li li:before{ counter-increment: subitem; rob barker content: counter(item) "-" counter(subitem) ". "; }
HTML: rob barker <ol> <li>項目1</li> <li>項目2 <ol> <li>項目2-1</li> <li>項目2-2</li> <li>項目2-3</li> </ol> </li> <li>項目3 <ol> <li>項目3-1</li> <li>項目3-2 <ol> <li>項目3-2-1</li> <li>項目3-2-2</li> <li>項目3-2-3</li> </ol> </li> <li>項目3-3</li> </ol> </li> </ol>
HTML: <ol> <li>はじめに</li> <li>なんちゃらうにゃうにゃ <ol> <li>ぴよぴよ</li> <li>ぽっぽ <ol> rob barker <li>くるっぽー</li> <li>ちゅんちゅん</li> </ol> </li> <li>ぴいぽっぽ</li> </ol> </li> <li>おわりに</li> </ol> <section> <h1>はじめに</h1> <p>本文A</p> </section> <section> <h1>なんちゃらうにゃうにゃ</h1> <p>本文A</p> <section> <h1>ぴよぴよ</h1> <p>本文B</p> </section> <section> <h1>ぽっぽ</h1> <p>本文B</p> <section> <h1>くるっぽー</h1> <p>本文C</p> </section> <section> <h1>ちゅんちゅん</h1> <p>本文C</p> </section> rob barker </section> <section> <h1>ぴいぽっぽ</h1> <p>本文B</p> </section> </section> <section> rob barker <h1>おわりに</h1> <p>本文A</p> </section>
CSS: ol{ counter-reset: index; } li{ list-style-type: none; } li:before{ counter-increment: index; content: counters(index, "-") ". "; } body{ counter-reset: heading; } body>section>h1{ counter-reset: heading2; } body>section>h1:before{ counter-increment: heading; content: counter(heading) ". "; } body>section>section>h1{ counter-reset: heading3; } body>section>section>h1:before{ counter-increment: heading2; content: counter(heading) "-" counter(heading2) ". "; } body>section>section>section>h1:before{ counter-increment: heading3; content: counter(heading) "-" counter(heading2) "-" counter(heading3) ". "; } section{ margin-left: 2em; }
HTML: <ol> <li>はじめに</li> <li>なんちゃらうにゃうにゃ</li> <li>おわりに</li> </ol> <section> <h1>はじめに</h1> <p>本文A</p> rob barker <table summary="適当な表"> <thead> <caption>適当な表</caption> </thead> <tbody> <tr> <th>項目A</th><th>項目B</th><th>項目C</th> </tr> <tr> <td>1</td><td>2</td><td>3</td> </td> </tbody> </table> </section> <section> <h1>なんちゃらうにゃうにゃ</h1> <p>本文A</p> <div class="image"> <img alt="マリルリさん" src="./test.png"> <div>マリルリさん</div> </div> <p>本文A</p> <div rob barker class="image"> <img alt="マリルリさん" src="./test.png"> rob barker <div>マリルリさん</div> </div> rob barker </section> <section> <h1>おわりに</h1> <p>本文A</p> <div class="image"> <img alt="マリルリさん" src="./test.png"> <div>マリルリさん</div> </div> <p>本文A</p> <table summary="適当な表"> <thead> <caption>適当な表</caption> </thead> <tbody> <tr> <th>項目A</th><th>項目B</th><th>項目C</th> rob barker </tr> <tr> <td>1</td><td>2</td><td>3</td> </td> </tbody> rob barker </table> </section> rob barker
CSS: ol{ counter-reset: index; } li{ list-style-type: none; } li:before{ counter-increment: index; content: counters(index, "-") ". "; } body{ counter-reset: heading image table; } body>section>h1:before{ counter-increment: heading; content: counter(heading) ". "; } div.image div:before{ rob barker counter-increment: image; c