OLリスト 番号だけ画像なしでスタイルを変更
こちらのページより、面白いなーと思ったCSSネタ。
CSS Code Snippets : 15 Wicked Tricks | DevSnippets
上記ページの8番目の「Style Your Ordered List」の部分。これはOLリストのliタグの中にpを入れて、OLで付与されるリスト番号の部分のフォントの見た目のスタイルを変更するっていう趣旨。
今までOLリストを使う時、liの中にpタグを入れた経験がなかったし（多分）、実はOLリストの数字の見た目を変えたい時は画像置換で背景画像を表示させてた。画像にしちゃえば好きなフォント使えるし、数字の他にちょこっと飾りなんかも入れれるし。ただ、それをするためにはidやらclassやらをhtmlに別途与える必要が出てくるんよね。それってあまり好みじゃない書き方だったりする。もちろんCSS3の:nth-child(n)等（参考：CSS3擬似クラス）がまともに使えるならそれでCSS側だけに手を入れればいいんだけど、ブラウザが追いついてないし。
で、5つほど試してみました。分かりやすいように数字部分大きめにしてます。
とはいえ、そのフォントが入ってなかったら何も変化はなくなっちゃうんだけれども。（一応キャプった）
よほどの理由がない限り日本語サイトって読みやすいゴシックフォントにしますよね。普段欧米のフォントを指定することをあまり意識してないから、今いざサンプル作ってみよう！と思ったけど、どんなフォントがあったっけー？みたいな状態になった。ということで、フォントに関してはこちらのページを参考にさせて頂きました。
問題は今後私がliタグの中にpタグを入れるマークアップをするような原稿に出会えるかどうかだ。もし出会えたら・・・余力があったらコレ使ってちょっとカワイイ感じにしてもいいなーって思いました。まぁpタグじゃなくてもいいんだけれども。spanでもいいしstrongでもいいし。なんせ入れ子にして対象のスタイルを通常のものに戻せたらいいんよね、要は。
<< IE6 → 透過PNG+overflow=混ぜるな危険（追記有） | 自分もプロパティの書き順とか >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/217
コメント (9)
おおーー、そうか！この手があったか。
olの味気ない番号リストが嫌でolはあまり使わずなんとなくulで対応することが多かったのですが、こういう方法でスタイル設定できるんですね！
勉強になりましたー。
投稿者: きしらう | 2009年02月01日 15:47
>きしらうさん、こんばんわー。
ユーザーの環境でそのフォントが入ってたらっていう前提付きだけど（入ってなかったらそれはそれでもいいのだけれど）画像用意しなくていいのは手軽でいいですよね。
海外のサイトはCSSの組み合わせで「面白い事考えるなぁ」というのが多くて楽しいですね。
投稿者: Red | 2009年02月01日 20:44
これは全然気がつきませんでした！
こんどやってみますね。
目からボタモチです！
投稿者: painkiller | 2009年02月03日 11:50
>painkillerさん
コメントありがとうございます。私も元ネタのページ見るまでOLのリスト番号のスタイルだけ変更しようなんて思った事なかったです。
目から鱗・・・棚からぼたもちｗｗ
ところでpainkillerさんのブログ、ちょっと拝見したんですけど、DreamweaverのCSSいじったら落ちるっていう問題解決しましたか？私はまだその落ち方には遭遇したことないんですが、うる覚えなんですけど、なんかCSSファイルを新しく作り直したら落ちないって読んだ記憶が・・・よかったら試してみてください～。ガセだったらごめんなさい＞＜
投稿者: Red | 2009年02月03日 12:04
CSSを作り直すのですか？うーん？？？
僕の出くわした現象はDreamweaverでCSSだけを直しながらブラウザを更新すると何故か落ちます。
唐突に落ちます。
試してみますね。
投稿者: painkiller | 2009年02月03日 19:48
>painkillerさん
あ。ごめんなさい。落ちるのはDreamweaverじゃなくてブラウザの方ってことでしたか（汗
なんか勘違いしてたかもです。申し訳ない＞＜
投稿者: Red | 2009年02月03日 20:40
いえいえ、Dreamweaverが落ちるのです。
何の前触れも無く。
と、いうことはRedさんの環境ではそういうのは無いのですね？
不思議だな？？ちなみに僕の環境はWindows XPです。
今日も落ちたのねーん。。。
投稿者: painkiller | 2009年02月04日 19:13
横からで失礼します。
私もCSSファイルの変更中に突然Dreamwever(以下、DW)がクラッシュした経験があります。OSはWindows XPです。
経験則からですが、CSSファイルの記述中に"{"から"}"で囲まれていない部分に、メモとして何かを貼り付ける、または"{"や"}"抜けている(状態で上書き保存をする場合に起きる気もしています。)など、CSSの文法としてミスがある場合、DWが突然クラッシュするような気がしております。
その場合は、再度DWを起動しても、クラッシュする恐れがあるため、テキストエディタで修正したうえで、DWを起動しなおしております。
これらに注意しても、DWがクラッシュする場合は、下記の現象が考えられます。
http://support.adobe.co.jp/faq/qadoc/AJ25.nsf/900f7bf03cd385244925696900084026/bfc0e86afede8f7e492571d2001908db?OpenDocument
投稿者: ヒロ | 2009年02月04日 19:48
>painkillerさん
私もXPです。使ってるDWのバージョンが少し前まではバージョン8、今はCS4なんですが、その現象には遭遇したことがないですね・・・。なんでしょう・・・その現象が起きるトリガーをまだ引いた事がないだけなのかな。しかしそれは不便ですよね。なんとか解決できればいいんですが、お力になれなくて申し訳ないです＞＜
>ヒロさん
ありがとうございますー。参考になりました。
とはいえ自分がその現象に遭遇していないので試してみるっていうのが出来ないのが悲しいところ・・・いつかはまったら文法回り、確認してみますね。
ググってみたところ、こんな情報もでてきましたよ。
http://www.abcc-crossmedia.com/blog/?p=410
投稿者: Red | 2009年02月05日 09:16