スタイルシートの質問です。

LIタグのマーカを背景画像を利用することで任意画像に変更可能ですが、任意のテキスト(display:inlineを使って、/や|などのセパレータを使いたい)にすることは不可能でしょうか?
以下を見る限り、予約されていないものはダメなようですが・・・
http://w3g.jp/css/list/list-style-type

NGなら回答不要です。

回答の条件
  • URL必須
  • 1人1回まで
  • 登録:2008/03/19 10:45:23
  • 終了:2008/03/19 11:50:24

回答(3件)

id:makiton No.1

makiton回答回数23ベストアンサー獲得回数32008/03/19 11:14:56

ポイント35pt

before疑似クラスを使用すると、要素の前に文字列を挿入する事が可能です。

ただし、IE6では実装されていませんのでご注意ください。

IE7以上、もしくは他のブラウザなら問題ないようです。


パンくずリストサンプル集

.pan-list {
  margin:0px; padding:0px;
}
.pan-list li {
  display:inline;
}
.pan-list li:before {
  /* :before -> ie6未対応
     content -> :before と組合せ
     li要素の前に記号文字を挿入 */
  content:" > ";
}
.pan-list li:first-child:before {
  /* :first-child:before -> ie6未対応
     子要素の一番初めのみ指定 */
  content:"";
}

以上、参考になれば幸いです。

id:P-mako

ご回答ありがとうございます。

IE6対応はIE7が標準になったものの別のもっと大きな意味で悩ましいところですね。

before擬似クラスというものを知っただけでも質問した甲斐がありました。

ありがとうございます。

2008/03/19 11:50:15
id:wizemperor No.2

wizemperor回答回数379ベストアンサー獲得回数522008/03/19 11:15:08

ポイント35pt

リストマーカーとして任意のテキストを使うのは(現在の実情と照らし合わせると)不可能です。

現状で普及している方法としては、背景画像を利用する方法か

after/before擬似要素とcontentプロパティの組み合わせが、ブラウザ間での問題も少なく手軽だと思います。

任意のテキストを生成できます。

li:before {
  content: "/";
}

li:before {
  content: "|";
}

ただIEだけは未対応なので、IEだけは背景画像にするか、JavaScriptで追加するなり、「|」を border-left でごまかすなり、

あるいは、IEはセパレータなしにするとかでしょうか。

http://www.y-adagio.com/public/standards/tr_css2/generate.html#p...

id:P-mako

ご回答ありがとうございます。

after擬似クラスというのもあるんですね。

2008/03/19 11:50:18

質問者が未読の回答一覧

 回答者回答受取ベストアンサー回答時間
1 mattz 13 6 5 2008-03-19 11:48:13

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません