<ol>
<li>あああ</li>
<li>えええ</li>
<li>うううう </li>
</ol>
は
1 あああ
2 えええ
3 うううう
と表示されます。これを、
3 あああ
2 えええ
1 うううう
と機械的に逆順にする方法をお教えください。
HTML4.01の仕様書には<ol>を降順にする方法については記載されていませんでしたので自動的に降順にする方法は無いかもしれません。
ただし<li>にvalue属性を指定することでリストの番号を再設定する機能を利用することで逐次指定したい番号を指定すれば見た目上、ブラウザのレンダリングにより降順に番号を表示することは可能です。
面倒な場合はJavaScriptでvalueを設定するのもひとつの手段でしょう(当然JSをオフにすると元の番号になってしまいますが)。
<ol id="hoge">
<li>3番目</li>
<li>2番目</li>
<li>1番目</li>
</ol>
<script>
var o = document.getElementById("hoge");
var max = o.childNodes.length;
for(var i = 0;i < max;i ++){
o.childNodes[i].value = max - i;
}
</script>
http://msugai.fc2web.com/web/CSS/generate.html
http://www.y-adagio.com/public/standards/tr_css2/generate.ht...
CSSのカウンタを使えば出来そうですが、IE6は対応していないようです。
Firefox 1.5.0.1とOpera 8.53は対応していました。
こんな感じです。
<html> <head> <title>test</title> <style type="text/css"> ol.reverse { counter-reset: revcounter 4; } ol.reverse li { list-style-type: none; } ol.reverse li:before { content: counter(revcounter) " "; counter-increment: revcounter -1; } </style> </head> <body> <ol class="reverse"> <li>あああ</li> <li>えええ</li> <li>うううう</li> </ol> </body> </html>
JavaScriptではうまくいきません。やり方が悪いのでしょうか?