blockquoteのデザイン

引用符を使ったblockquoteのデザインとCSS

文中において他の文を引用する場合、blockquoteタグを用いて記述します。このblockquoteを引用符を付けてcssを用いてデザインする方法を紹介します。

blockquoteで囲んだ文章を引用符で囲んだ表示に変えることができます。

<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終わり------------*/

widthで幅を決定していますので自由に変更してください。引用符の画像は直接リンクではなく、下の引用符画像を右クリックで保存してお使いください。

your website URLの欄にイメージ画像を保存したURLを記入してお使いください。

関連記事

• W3C CSS 検証サービス
• リンクのカラーと装飾
• 被写体に影をつける方法
• オリジナルのファビコンをデザイン
• フリーのイメージ素材
• おしゃれなメニューのデザイン方法
• 書籍「HTML+CSS Handbook 3rd Edition」
• 立体感のあるアイコンのデザイン方法
• タグクラウドを設置