I have been meaning to write about this technique for some time now. The aim is a block quote looking something like this, with speech marks at the front and termination of the text but without the nastiness of inline images.

blockquoteでの引用を美しく表示するCSS。
次のようなシンプルなblockquoteのHTMLがあったとします。

<blockquote cite="Brian Littrell"><p>Shoot for the moon. Even if you miss, you'll land among the stars.</p></blockquote>

サンプルで示されているCSSを使うことで次のように表示されます。



画像を２枚使っていて、ＣＳＳは次のようになっています。

blockquote {
     text-indent: 25px;
     background: url(quotes1.png);
     background-position: 0 2px;
     background-repeat: no-repeat;
}

blockquote p {
     display: inline;
     margin: 0;
     padding-right: 24px;
     background: url(quotes2.png);
     background-position: bottom right;
     background-repeat: no-repeat;
}

画像とＣＳＳをちょこっと変更することで、よりオシャレな引用部分を作れるでしょう:-)

関連エントリ

• CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例
• CSSベースのクールなフォーム、サンプル集
• CSSの小技集、20個
• CSSを書く際の5つのテクニック
• CSSだけでフレームを作るテクニック
• CSSの便利ツール集