HTML5+CSS3でサイトを作ってみる。

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

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

(c) 2011-2014 naoko okihara