CSS "blockquote" "引用" "( “ ” )" デザイン

　<blockquote>～</blockquote>

　文章を抜粋・引用する時に用いられます。

　<blockquote> - 引用　　とほほのＷＷＷ入門

　＊右の画像：quote/unquote bookends by eric janssen

• 表現方法
  

1. 左上に 「 “ 」 を表示
2. 左上に 「 “ 」 右上に 「 ” 」 を表示
3. 左上に 「 “ 」 右上に 「 ” 」 を表示 （幅固定で画像一つバージョン） 
4. 左上に 「 “ 」 右下に 「 ” 」 を表示
5. 左上に 「 “ 」 右下に 「 ” 」 を表示（citeタグも絡めたHTML）

• カスタマイズする箇所　( CSS 部分 )

blockquote {
margin:　px;
padding:　px;
background:#　　　　　; 　/* 背景 */
border:#　　　　　 1px solid; 　/* 枠線 */  
}

blockquote/ {
margin:　px;
padding:　px;
background:#　　　　　; 　/* 背景 */
border:#　　　　　 1px solid; 　/* 枠線 */  
}

• 参考サイト 
  

1. 第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法 - creazy photograph
2. Re:「blockquote」を「“”」で囲ったようなデザインにする方法＠ネタフル - creazy photograph
3. Block Quotes and Pull Quotes: Examples and Good Practices | Design Showcase | Smashing Magazine

<blockquote>～</blockquote>で囲むと、タグの中に書かれている文章を引用したことを表します。この引用文のはじめと終りにCSSを使って引用符をつけます。

HTML 
<blockquote><p>～</p></blockquote>

CSS

/*------------引用CSS開始------------*/

 blockquote {
 width: 470px;
 background: url(your website URL/blockquote_start.gif) no-repeat scroll
 top left;
 padding: 0px;
 margin-top: 10px;
 margin-right: 0px;
 margin-bottom: 10px;
 margin-left: 30px;

}

 blockquote p {
 background: url(your website URL/blockquote_end.gif) no-repeat scroll
 bottom right;
 padding-top: 10px;
 padding-right: 30px;
 padding-bottom: 10px;
 padding-left: 30px;
 margin: 0px;
}

/*------------引用CSS終わり------------*/

• 参考サイト 
  

1. WEBデザイン.net > CSS > 引用符を使ったblockquoteのデザインとCSS