htmlで以下のような番号を振ることはできるのでしょうか？

解決済

質問者：apena
質問日時：2009/09/08 17:12
回答数：1件

htmlで以下のような番号を振ることはできるのでしょうか？
Wordのアウトラインのような番号を振りたいのです。
ネットで検索したのですが、なかなか解決策が見つからなかったので、どなたかご存知の方がいらっしゃいましたら教えていただきたいと思います。よろしくお願いいたします。

＜作成したい番号＞

1.AAAAA
1.1 aaaa
1.2 bbbb
1.3 cccc
2.BBBBB
2.1 dddd
2.2 eeee
3.CCCCC
3.1 ffff
3.2 gggg
3.3 hhhh

＜現状のタグ＞

<ol>
<li>AAAAA
<ol><li>aaaa</li><li>bbbb</li><li>cccc</li></ol>
</li>
<li>BBBBB
<ol><li>dddd</li><li>eeee</li></ol>
</li>
<li>CCCCC
<ol><li>ffff</li><li>gggg</li><li>hhhh</li></ol>
</li>
</ol>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： steel_gray
回答日時：2009/09/08 17:33

HTMLではそこまで複雑な指定はできない。

現状では手作業で振っていくか、表示されない環境には目をつぶってJavascriptで付けるぐらいしかない。と思う。

CSS2の仕様にはあるけど、対応しているブラウザは希少。
http://www.y-adagio.com/public/standards/tr_css2 …
一応、Operaでは対応してた。
<html>
<head>
<title></title>
<style type="text/css">
ol {list-style:none;}
#list ol li:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
#list>li:before {
content: counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}

</style>
</head>
<body>

<ol id="list">
<li>AAAAA
<ol><li>aaaa</li><li>bbbb</li><li>cccc</li></ol>
</li>
<li>BBBBB
<ol><li>dddd</li><li>eeee</li></ol>
</li>
<li>CCCCC
<ol><li>ffff</li><li>gggg</li><li>hhhh</li></ol>
</li>
</ol>

</body>
</html>