g:fragments:id:fukken:20060625:1151206177

断片部

cssネタにはがっつり食いついていくよ.
contentプロパティとcounterで何とかなるかなと.

ol li {
 list-style-type: none;
}

ol li:before {
 content: counter(lev1) ".";
 display: marker;
 counter-increment: lev1;
 counter-reset: lev2 lev3 lev4;
}

ol ol li:before {
 content: counter(lev1) "-" counter(lev2) ".";
 display: marker;
 counter-increment: lev2;
 counter-reset: lev3 lev4;
}

ol ol ol li:before {
 content: counter(lev1) "-" counter(lev2) "-" counter(lev3) ".";
 display: marker;
 counter-increment: lev3;
 counter-reset: lev4;
}

ol ol ol ol li:before {
 content: counter(lev1) "-" counter(lev2) "-" counter(lev3)  "-" counter(lev4) ".";
 display: marker;
 counter-increment: lev4;
}

地道に書くとこんな感じ. firefoxで最上位階層がincrementされなかったりする. Operaだと上手くいくんだけどなぁ. これってfirefoxのバグなのか?
もう少し上手い手があって, CSS 概説|生成内容に載っているのをちょっと弄ると以下.

ol {
 counter-reset: item;
}

ol li {
 list-style-type: none;
}

ol li:before {
 content: counters(item, "-") ".";
 display: marker;
 counter-increment: item;
}

追記
g:cssに書くべきだったかなぁ.

ol { counter-reset: item }
li { display: block }
li:before { content: counters(item, ".") ". "; counter-increment: item }

と違う理由.

  1. liは大体の場合display: list-itemされているし, そっちの方が良いので省略.
  2. list-style-type: none;は念のため.
  3. display: marker;は後になって要るかどうか分からなくなってきた. list-itemに:beforeで文字列を追加した場合, 自動的にmarkerになったような気もするが, どうだったか.
  4. ACID2ってcontentで生成できるかどうかはチェックしてるのか. counter周りもやるべきなんじゃないの?

更に変更
http://186.bz/hatena/20060625/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<title>test</title>
<style>
<!--
ol li {
 list-style-type: none;
}

body > ol > li:before {
 content: counter(item1) ".";
 display: marker;
 counter-increment: item1;
 counter-reset: item2;
}

body > ol > li > ol > li:before {
 content: counter(item1) "-" counter(item2) ".";
 display: marker;
 counter-increment: item2;
}

h1:before {
 content: counter(chapter) ". ";
 display: marker;
 counter-increment: chapter;
 counter-reset: section;
}

h2:before {
 content: counter(chapter) "-" counter(section) ". ";
 counter-increment: section;
}
-->
</style>
</head>
<body>
<h1>test</h1>
<ol>
<li> ol 1
 <ol>
 <li> ol 1-1</li>
 <li> ol 1-2</li>
 </ol>
</li>
<li> ol 2
 <ol>
 <li> ol 2-1</li>
 <li> ol 2-2</li>
 </ol>
</li>
</ol>
<h2>h2 1-1</h2>
<h2>h2 1-2</h2>

<h1>test2</h1>
<h2>h2 2-1</h2>
<h2>h2 2-2</h2>

</body>
</html>

firefoxで見ると2階層目のolはincrementされてる. 何故? DOM Inspectorで見たがcounterは進んでない. h1要素の前に生成したcounterはきいてないし, h2要素の前に生成した方ではchapterがきいておらず0になっている. 中途半端な実装なのか, 俺の理解が不味いのか. counters(item, ".") ". "だと上手くいくな.