>

リンク

  • 2007年9月16日

文脈セレクタ

  • 2007年9月16日

CSS1 では文脈セレクタは要素の木構造に対して先祖、子孫

全称セレクタであるワイルドカード * (アスタリスク)

div * p { font-size: 10.5pt }

* 前後の半角スペースに注意

子供セレクタ

子要素だけを指定したい場合、「大なり」不等号記号

IEはだめ。

隣接セレクタ

或る要素の共通の子要素であり、且つ相前後して隣接する要素にマッチ

h1 + h2 { margin-top: -5mm }

イメージ無しのblockquoteで引用を表示するCSSサンプル - WEBデザイン BLOG:より。

blockquoteでの引用を美しく表示するCSSサンプル:phpspot開発日誌のエントリーを読んでみて、イメージ無しでのblockquoteでの引用を二重引用符で表示するCSSサンプルを紹介してみることに。

WEBデザイン BLOG」は恥ずかしながら最近知ったのですが、内容もデザインも素晴らしいサイト。思いっきり影響受けました。

blockquoteに関しては僕も長い事悩んでいまして、最近A List Apart: A List ApartのCSSを参考に(……というかほとんどそのまま)利用する事に落ち着いたばかり。こちらはオーソドックスに画像での処理。

一方紹介してくれているひとつは画像ではなく文字を<span></span>でくくる方法ですが、やはりちょっと美しくはないですよね。普通に、

<blockquote><p>引用文</p></blockquote>

で行きたい所。

CSS疑似要素要素(:beforeと:after)を利用するのがやはりいいのかな。IEでは適用されませんけれど、htmlソースをデザインのためにいじるのは最後の手段かなあと思います。インクルードしているヘッダやフッタなどはOKだと思いますけれどね。

カテゴリ

ページの先頭に戻る