<li>の数字を(1),(2)…にしたい
-
0 名前: soso : 2005/10/17 12:56
- はじめまして。見つからなかったので質問させてください。
(1)・・・・
(2)・・・・
というようなリストを作りたいのですが、<li>タグでは数字、アラビア数字などは
ありましたが、(1)(2)という形式のものは見当たりません。
どのようにすれば、このようなリストが作れるのでしょうか?
文が長くなった時にきちんと良い位置に折り返してくれれば<li>タグにはこだわっていないのですが…
何かいい方法はありますでしょうか?
-
1 名前: 愛浦憂馬 : 2005/10/17 12:56 [URL]
- >文が長くなった時にきちんと良い位置に折り返してくれれば<li>タグにはこだわっていないのですが…
>何かいい方法はありますでしょうか?
テーブルを使ってみてはどうでしょう
<table>
<tr><td>1</td><td>本文</td></tr>
<tr><td>2</td><td>本文</td></tr>
<tr><td>3</td><td>本文</td></tr>
</table>
-
2 名前: soso : 2005/10/17 12:56
- ありがとうございます。
量が多いので、できれば<li>のような簡単なタグが良かったのですが、
テーブルは思いつきませんでしたので、感謝です!
もし他に<li>のような簡単なタグであれば教えていただきたいです。
(調べていたら<li>でもスタイルシートを使えば画像で表示できるなどあったのですが、
やっぱりでは不可能ですかね。最初と言っていることが少し違ってしまってすいません)
-
3 名前: 元帥 : 2005/10/17 12:56 [URL]
- /* CSS */
li:before{
content: "(" counter(hoge) ") ";
counter-increment:hoge;
}
ol{
list-style-type:none;
}
/* HTML */
<ol>
<li>sample</li>
<li>sample</li>
<li>sample</li>
</ol>
/* 表示結果 */
(1) sample
(2) sample
(3) sample
ちなみに私のブラウザはOpera8.5です。
-
4 名前: 元帥 : 2005/10/17 12:56 [URL]
- 補足です。
番号付きリストなのでulでなくolを用いましたが、そうしますと、
(少なくともOperaのレンタリングエンジンは)
どうやらliのCSS設定如何に関わらず先頭に番号を振るようです。
ですから取り敢えず、list-style-type:none とさせて頂きました。
参考:
http://www.y-adagio.com/public/standards/tr_css2/generate.html#markers
-
5 名前: soso : 2005/10/17 12:56
- html板でここまで書いて頂いてありがとうございます。
しかし私の環境(ブラウザIE6.0とfirefox)では表示できないようなのですが…
sample
sample
sample
という表示結果になってしまいますm(__)mすみません
-
6 名前: 元帥 : 2005/10/17 12:56 [URL]
- > しかし私の環境(ブラウザIE6.0とfirefox)では表示できないようなのですが…
ですから敢えてOperaと明記したわけです^^;
IE、Firefoxともに対応していないようなので、この記述を享受できるのはOpera等しかありません。
次期バージョンに期待ですね。
ですがWebページが自分だけが見るものではなく皆に見せるものなので、若干数%のユーザーは、()付きの番号リストを見てくれる程度に理解し、使用するのも悪くはないでしょう。
CSSで揃える、JavaScriptで出力する等の方法もありますが、
簡単な方法はやはり、>>1.で愛浦憂馬さん仰るようにtableを使う事です。
-
7 名前: soso : 2005/10/17 12:56
- なるほど!そうだったのですね。
Operaは私は良く知りませんが、他のブラウザでも次期バージョンで
導入されると嬉いですね!
詳しく教えてくださってどうもありがとうございました!