CSSと画像で引用（blockquote）を見栄えよく表示する

<blockquote>タグでの引用をオシャレに表示するCSSサンプルです。

<blockquote>タグの子要素にはブロックレベルの要素を

XHTML 1.0 Strict記述の場合、<blockquote>タグの直下にはインライン要素（spanとか）は置けないので、記述するときは大体このようなHTMLになると思います。（XHTML 1.0 Transitional記述はインラインを使ってもいいですけど、Strictに合わせたほうが何かと都合がいいかと）

 
<blockquote>
    <p>アメイジング・グレイスは、ジョン・ニュートンの作詞による賛美歌である。特にアメリカで愛唱され、またバグパイプでも演奏される。"grace"とは「神の恵み」「恩寵」の意。</p>
</blockquote>
 

文字量によって画像の位置が変わるサンプル

<p>タグをインラインにすれば、文字量によって画像の位置が変わります。ただし、IEでは上手く表示されません。IEのバグなのか、改行されたインラインに背景を指定しても表示されないのです。

 
blockquote {
    text-indent: 16px;
    background: url(blockquote_mark01.gif) 0 0.2em no-repeat;
}
 
blockquote p {
    display: inline;
    padding: 0 12px 0 0;
    background: url(blockquote_mark02.gif) right bottom no-repeat;
}
 

引用のサンプル1

画像を固定位置に配置したサンプル

この方法が一番無難かと。

 
blockquote {
    padding: 0 0 0 15px;
    text-align: left;
    background: url(blockquote_mark01.gif) 0 0.1em no-repeat;
}
 
blockquote p {
    padding: 0 15px 0 0;
    background: url(blockquote_mark02.gif) right bottom no-repeat;
}
 

引用のサンプル2

内容に合った画像を使ったサンプル

歌詞を引用してるので音符の画像にしてみました（※歌詞は著作権が切れてるものしか引用してはいけません。）人とは違うデザインにする一つの方法です。

 
<blockquote>
    <p>Amazing grace how sweet the sound<br />
    That saved a wretch like me<br />
    I once was lost but now am found<br />
    Was blind but now I see</p>
</blockquote>
 

 
blockquote {
    background: url(blockquote_mark03.gif) 0 0.1em no-repeat;
}
 
blockquote p {
    background: url(blockquote_mark03.gif) right bottom no-repeat;
}
 

引用のサンプル3

CSS疑似要素（:beforeと:after）を使ったサンプル

IEでは:before疑似要素:after疑似要素はサポートされていないので、この方法は適用されません。Firefox・Safari・Netscape・Operaでのみ有効です。

先程のHTMLを使って、CSSを記述しています。

 
blockquote {
    width: 15em;
    margin: 1em auto 2em auto;
}
 
blockquote:before{
    content: url(blockquote_mark03.gif);
    display: block;
    vertical-align: middle;
}
 
blockquote:after{
    content: url(blockquote_mark03.gif);
    display: block;
    text-align: right;
}
 
blockquote p {
    margin: -12px 18px;
}
 

引用のサンプル4