人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

NGなら回答不要です。


●質問者: P-mako
●カテゴリ:インターネット ウェブ制作
✍キーワード:NG いもの スタイルシート タグ ダメ
○ 状態 :終了
└ 回答数 : 2/3件

▽最新の回答へ

1 ● makiton
●35ポイント

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:"";
}

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

◎質問者からの返答

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

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

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

ありがとうございます。


2 ● wizemperor
●35ポイント

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

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

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...

◎質問者からの返答

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ