101LAB::design::clip

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

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

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

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

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

で行きたい所。

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