<li>の数字を(1),(2)…にしたい

[新着] Webテンプレートを仮オープンしました



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は私は良く知りませんが、他のブラウザでも次期バージョンで
導入されると嬉いですね!

詳しく教えてくださってどうもありがとうございました!

一覧へ戻る