【HTML】【CSS】コピペで使えるサンプル集－引用部分編

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここでは他サイトから文章を引用した時に使う引用部分（brockquote）のデザインについて
コピペだけで利用できるタグを紹介してきたいと思います。

CSSがわかる方は更にカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しますので、
画像は使用しません。


■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）
・【HTML】【CSS】コピペで使えるサンプル集－ボタン編
・【HTML】【CSS】コピペで使えるサンプル集－背景編

────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

引用部分サンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

“

infinityforest

「引用部分①」
画像を使うBLOCKQUOTEと画像を使わないBLOCKQUOTEを
いろいろデザインする
”

<div style="text-align: right;"> <a href="http://infinityforest.net/"><i>infinityforest</i></a></div> 「引用部分①」<br /> <a href="http://infinityforest.net/home/archives/1530">画像を使うBLOCKQUOTEと画像を使わないBLOCKQUOTEを<br />いろいろデザインする</a><br /> <span style="color: red; float: right; font-size: 700%; height: 25px; margin: 10px 0; padding-top: 5px;">”</span> </blockquote>

引用部分②
ここに引用する文章を記載してください。

<blockquote style="border: 2px dotted #D4D4D4; margin: 10px; padding: 10px;"> 引用部分②<br /> ここに引用する文章を記載してください。 </blockquote>

❝ Let's create some interesting and modern styles for block quotes. We'll be using different techniques for creating a unique look for six examples.

tympanus

<blockquote style="background: #fff; border-radius: 5px; box-shadow: inset 0 2px 0 rgba(188, 147, 200, 0.7), -5px -4px 25px rgba(0, 0, 0, 0.3); padding: 30px; width: 500px;"> <span style="color: #bc93c8; font-family: serif; font-size: 80px; font-weight: 700; line-height: 32px; text-indent: 90px;">❝</span> <span style="color: #b4b4b4; font-family: "alegreya" , serif; font-size: 24px; font-style: italic; line-height: 40px; text-indent: 100px;">Let's create some interesting and modern styles for block quotes. We'll be using different techniques for creating a unique look for six examples.</span> </blockquote> <cite style="color: white; font-family: 'Alegreya', serif; font-style: italic; font-weight: 700; padding-left: 550px; text-shadow: 0 1px 1px rgba(0,0,0,0.3);"> <a href="http://tympanus.net/codrops/2012/07/25/modern-block-quote-styles/" target="_blank">tympanus</a> </cite>

❏参考記事、ブログ

こちらの記事やブログのサイト様を参考にさせていただきましたm(_ _)m

・画像を使うBLOCKQUOTEと画像を使わないBLOCKQUOTEをいろいろデザインする

・Modern Block Quote Styles

こちらも合わせてご確認ください☆

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）
・【HTML】【CSS】コピペで使えるサンプル集－ボタン編
・【HTML】【CSS】コピペで使えるサンプル集－背景編