olのタグの入れ子で、1-1等の番号を振りたいが

お世話になります。

olを使用したリストの入れ子で、1-1、1-2などの番号を
振る方法はないでしょうか。

例で言いますと、

<ol>
<li>A
<ol>
<li>AA</li>
<li>AB</li>
</ol>
</li>
</ol>

…等とすると、
1.A
1-1.AA
1-2.AB

のように表示させたいのですが、このように、
入れ子の数に対して、「1-3-1」とか『2-A-1-1』などの
番号を振る方法とは、ありますでしょうか。

もしあるのであればご教授ください。

よろしくお願いいたします。

No.2 回答者： ORUKA1951 回答日時： 2013/05/02 17:44

olにはわざわざ番号を振ることはないですが、h1～h6には階層の番号を振りますね。

第1節第2章2項　とか。
[Element]:beforeセレクタ
とcontent:(内容の追加プロパティ)
と、counterを使います。
　⇒4.3.5 カウンタ（Counters）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
　⇒12.5 カウンタと自動番号振り（Automatic counters and numbering）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
　⇒12.5.1 カウンタの入れ子と作用範囲（Nested counters and scope）( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
　が資料になります。
ポイントは、カウンターリセットは、カウントする自身では出来ないので、
<ol>
　<li>　ol liでサブ項目のカウントをリセットする。
　　<ol>
　　　<li></li>　ol li ol li でカウントする。
　　　<li></li>
　　</ol>
　</li>
ようにすれば良いでしょう。
/*見出しのナンバリング */
body ol {
counter-reset: chapter; /*　あらかじめリセットしておく必要がある */
}
body ol ol{
counter-reset: section; /*ol li ol li:before ではなく ここでリセットしなければならない */
}
body ol ol ol{
counter-reset: sub_section; /*　ol ol ol li:before ではなく h2 でリセットしなければならない */
}

body ol li:before {
content: counter(chapter) "-";
counter-increment: chapter 1;
}
body ol li ol li:before {
content: counter(chapter) "-" counter(section) "-";
counter-increment: section 1;
}
body ol li ol li ol li:before {
content: counter(chapter) "-" counter(section) "-"counter(sub_section) "-";
counter-increment: sub_section 1;
}

とか・・テストしてません。

この回答へのお礼

早速のご返答、ありがとうございました。

ブラウザ依存ということで、今回は使用を
見送りましたが、参考にさせていただきました。

ありがとうございました。

お礼日時：2013/05/07 16:25

No.1 ベストアンサー 回答者： yambejp 回答日時： 2013/05/02 14:39

最近のブラウザであればこんな書き方ができるようです

<style>
ol {counter-reset:item;}
ol >li{list-style:none;}
ol >li:before {
content : counters(item, '-') '. ';
counter-increment : item;
}
</style>
<ol>
<li>A
<ol>
<li>AA
<ol>
<li>AAA</li>
<li>AAB</li>
</ol>
</li>
<li>AB
<ol>
<li>ABA</li>
<li>ABB</li>
</ol>
</li>
<li>AC</li>
</ol>
</li>
</ol>

＞『2-A-1-1』など

どのようなロジックで「A」が出現するか確定できないので難しいと思います。

実際IEとかでは難しいかもしれないので、運用は難しいですね
真剣にやるならjavascriptなどでやることになるかもしれません

この回答へのお礼

早速のご返答、ありがとうございました。

cssでできるというのは解ったのですが、
ブラウザに依存するというのではやはり
思ったようにはできなそうです。
タグのみでできるのが理想だったのですが、
残念です。

ここでいうことではないかもしれませんが、
cssでなく、タグで標準機脳としてもあって
よいような気もします。

ありがとうございました。

お礼日時：2013/05/07 16:20