contentプロパティでコンテンツを追加する(3):FirefoxとSafariのCSS

エ・ビスコム・テック・ラボ
2008-07-28 17:50:01
  • このエントリーをはてなブックマークに追加

中見出しにも番号を付ける

 階層構造を持つ見出しにも番号を付けることができる。たとえば、

でマークアップした中見出しに番号を付けるには、次のように「h2:before {〜}」と「h2 {〜}」の設定を追加する。

 ここでは新しく「sub」というカウンター名で連番を表示するようにした。しかし、これだけでは「2. 大見出し」の階層下の中見出しは4番から始まってしまう。

Internet Explorer 8(ベータ版)での表示 Internet Explorer 8(ベータ版)での表示
body{
counter-reset: section;
}

h1:before{
content: counter(section) '. ';
}

h1{
counter-increment: section;
}


h2:before{
content: counter(sub) '. ';
}

h2{
counter-increment: sub;
margin-left: 40px;
}

大見出し

中見出し

中見出し

中見出し

大見出し

中見出し

中見出し

中見出し

ブラウザで表示を確認する

 そこで、中見出しの連番をcounter-resetプロパティで大見出しごとにリセットして、1番から始まるように設定する。counter-resetではリセットしたいカウンターの名前を指定する。

Internet Explorer 8(ベータ版)での表示 Internet Explorer 8(ベータ版)での表示
body{
counter-reset: section;
}

h1:before{
content: counter(section) '. ';
}

h1{
counter-increment: section;
counter-reset: sub;
}


h2:before{
content: counter(sub) '. ';
}

h2{
counter-increment: sub;
margin-left: 40px;
}
ブラウザで表示を確認する

中見出しに大見出しの番号も入れる

 次のように記述すれば、中見出しの番号に大見出しの番号を入れることもできる。ここでは、区切り文字として「-(ハイフン)」を利用して、「大見出しの番号 - 中見出しの番号」という形で表示している。

Internet Explorer 8(ベータ版)での表示 Internet Explorer 8(ベータ版)での表示
body{
counter-reset: section;
}

h1:before{
content: counter(section) '. ';
}

h1{
counter-increment: section;
counter-reset: sub;
}


h2:before{
content: counter(section) '-' counter(sub) '. ';
}

h2{
counter-increment: sub;
margin-left: 40px;
}
ブラウザで表示を確認する

 あとは、同じように何階層の見出しにでも連番を追加していくことができる。

Internet Explorer 8(ベータ版)での表示 Internet Explorer 8(ベータ版)での表示
body{
counter-reset: section;
}

h1:before{
content: counter(section) '. ';
}

h1{
counter-increment: section;
counter-reset: sub;
}


h2:before{
content: counter(section) '-' counter(sub) '. ';
}

h2{
counter-increment: sub;
counter-reset: subsub;
margin-left: 40px;
}

h3:before{
content: counter(section) '-' counter(sub) '-' counter(subsub) '. ';
}

h3{
counter-increment: subsub;
margin-left: 80px;
}

大見出し

中見出し

小見出し

小見出し

小見出し

中見出し

小見出し

小見出し

小見出し

大見出し

中見出し

小見出し

小見出し

小見出し

中見出し

小見出し

小見出し

小見出し

ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]