お世話になります。

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』などの
番号を振る方法とは、ありますでしょうか。

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

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

A 回答 (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などでやることになるかもしれません
    • good
    • 0
この回答へのお礼

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

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

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

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

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

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;
}

とか・・テストしてません。
    • good
    • 0
この回答へのお礼

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

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

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

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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報