- ベストアンサー
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』などの 番号を振る方法とは、ありますでしょうか。 もしあるのであればご教授ください。 よろしくお願いいたします。
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
最近のブラウザであればこんな書き方ができるようです <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などでやることになるかもしれません
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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/syndata.html#counter ) ⇒12.5 カウンタと自動番号振り(Automatic counters and numbering)( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html#counters ) ⇒12.5.1 カウンタの入れ子と作用範囲(Nested counters and scope)( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html#scope ) が資料になります。 ポイントは、カウンターリセットは、カウントする自身では出来ないので、 <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; } とか・・テストしてません。
お礼
早速のご返答、ありがとうございました。 ブラウザ依存ということで、今回は使用を 見送りましたが、参考にさせていただきました。 ありがとうございました。
お礼
早速のご返答、ありがとうございました。 cssでできるというのは解ったのですが、 ブラウザに依存するというのではやはり 思ったようにはできなそうです。 タグのみでできるのが理想だったのですが、 残念です。 ここでいうことではないかもしれませんが、 cssでなく、タグで標準機脳としてもあって よいような気もします。 ありがとうございました。