■ 自動でナンバーをつける
自動でナンバーをつける 1
olエレメント以外を使い、自動でナンバーを振る。
サンプルhtml
--[ html ]----------------------- <div class="counter01"> <h1>タイトル</h1> <p>内容 内容 内容 内容 内容 内容 内容 内容</p> <h1>タイトル</h1> <p>内容 内容 内容 内容 内容 内容 内容 内容</p> <h1>タイトル</h1> <p>内容 内容 内容 内容 内容 内容 内容 内容</p> <h1>タイトル</h1> <p>内容 内容 内容 内容 内容 内容 内容 内容</p> <h1>タイトル</h1> <p>内容 内容 内容 内容 内容 内容 内容 内容</p> </div> --[ CSS ]------------------------ .counter01 { counter-reset: first; } .counter01 h1:before { counter-increment: first; content: counter(first) ". "; }
自動でナンバーをつける 2 / ネストしているリスト
サンプルhtml
--[ html ]----------------------- <div class="counter02"> <p class="first_title">太郎さんの日課</p> <p class="second_title">朝</p> <p class="third_title">マラソン</p> <p class="third_title">ラジオ体操</p> <p class="second_title">昼</p> <p class="third_title">ウォーキング</p> <p class="second_title">夜</p> <p class="third_title">事務</p> <p class="first_title">花子さんの日課</p> <p class="second_title">朝</p> <p class="third_title">お弁当作り</p> <p class="third_title">洗濯</p> <p class="second_title">朝</p> <p class="third_title">お弁当作り</p> </div> --[ CSS ]------------------------ .counter02 { counter-reset: one 0; } .counter02 .first_title { counter-reset: two; } .counter02 .first_title:before { counter-increment: one; content: counter(one,upper-roman) ". "; } .counter02 .second_title { counter-reset: two; } .counter02 .second_title:before { counter-increment: two; content: counter(one) "." counter(two) " "; } .counter02 .third_title { counter-reset: three; } .counter02 .third_title:before { counter-increment: three; content: counter(one) "." counter(two) "." counter(three) " "; }