■ 自動でナンバーをつける

自動でナンバーをつける 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) " ";	
}