blockquote(引用部分)をCSSでデザインするサンプル集

blockquote(引用部分)をCSSでデザインするサンプル集

ブログを書いていると他のサイトから文章などを引用してきたりする事もあるかと思います。

そういう時に使えそうな blockquote のデザインとサンプルを作ってみました。

demo page

…ここからが続き

サンプル 1

サンプル 1

XHTML

<div class="sample1">
<blockquote>
<p>
	~ 省略 ~
</p>
<p class="origin"><a href="http://">ウィキペディア(Wikipedia)</a></p>
</blockquote>
<!--/ .sample1--></div>

CSS

/* サンプル1要素
----------------------------------------------------------- */
.sample1 blockquote	{
	background: url(image/blockquote1.gif) no-repeat 95% 68%;
	padding: 15px;
	color: #064599;
}
.sample1 p	{
	margin-bottom: 12px;
}
.sample1 .origin	{
	text-align: right;
	padding-top: 8px;
	margin-bottom:0;
}
.sample1 .origin a	{
	background: url(image/origin1.gif) no-repeat 0 7px;
	padding-left: 15px;
	color: #999;
}

サンプル 2

サンプル 2

XHTML

<div class="sample2">
<blockquote>
<p>
	~ 省略 ~
</p>
<p class="origin"><a href="http://">ウィキペディア(Wikipedia)</a></p>
</blockquote>
<!--/ .sample2--></div>

CSS

/* サンプル2要素
----------------------------------------------------------- */
.sample2 blockquote	{
	background: url(image/blockquote2.gif) no-repeat 2% 6%;
	padding: 10px 20px;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	color: #212121;
}
.sample2 p	{
	margin-bottom: 12px;
}
.sample2 .origin	{
	text-align: right;
	margin-bottom:0;
}
.sample2 .origin a	{
	color: #2D88B3;
}

サンプル 3

サンプル 3

XHTML

<div class="sample3">
<blockquote>
<p>
	~ 省略 ~
</p>
<p class="origin"><a href="http://">ウィキペディア(Wikipedia)</a></p>
</blockquote>
<!--/ .sample3--></div>

CSS

/* サンプル3要素
----------------------------------------------------------- */
.sample3	{ background: url(image/blockquote3-t.gif) no-repeat center top; }
.sample3 blockquote	{
	background: url(image/blockquote3-b.gif) no-repeat center bottom;
	padding: 40px;
	color: #AAA;
}
.sample3 p	{
	margin-bottom: 12px;
}
.sample3 .origin	{
	text-align: center;
	margin-bottom:0;
}
.sample3 .origin a	{
	color: #555;
}

サンプル 4

サンプル 4

XHTML

<div class="sample4">
<blockquote>
<p>
	~ 省略 ~
</p>
</blockquote>
<p class="origin"><a href="http://">ウィキペディア(Wikipedia)</a></p>
<!--/ .sample4--></div>

CSS

/* サンプル4要素
----------------------------------------------------------- */
.sample4	{	background: #C0C0C0 url(image/blockquote4-t.gif) no-repeat; }
.sample4 blockquote	{
	background: url(image/blockquote4-c.gif) no-repeat bottom;
	padding: 10px 30px 5px 30px;
	color: #212121;
}
.sample4 p	{
	margin-bottom: 12px;
}
.sample4 p.origin	{
	background: url(image/blockquote4-b.gif) no-repeat left bottom;
	text-align: right;
	padding: 5px 20px;
	margin-bottom: 0px;
}
.sample4 p.origin a	{
	background: url(image/origin1.gif) no-repeat 0 7px;
	padding-left: 15px;
	color: #999;
}

サンプルを一式ダウンロード・デモページ

ダウンロード

demo page

Comments

MIYA

MIYA

誠さんはじめまして!

あれは js でやってますよ!

http://code.google.com/p/syntaxhighlighter/

2010年03月17日 10:54

誠

はじめまして!
ここのコードサンプルで使われている行数があるコード一覧はどうやっているんですか?
直接記事と関係なくて申し訳ないんですが、教えて頂けると助かります。

2010年03月16日 11:45

MIYA

MIYA

やまださんはじめまして!

参考になれるような記事を増やしていけるよう頑張りたいと思います!
こちらこそよろしくお願いします。

2009年08月30日 15:36

やまだ

やまだ

はじめまして!

blockquoteのデザイン、使わせていただきました。

CSS、HTMLを一から勉強してみようと思っているのですが、ジジイの脳みその硬さに愕然としています。
まずは、勝手に師匠と思わせていただいている皆様の真似をしつつ、自分のものを見つけようと思っています。

こちらのコンテンツは目一杯参考にさせていただきますので、よろしくお願い致します。

まずは、ご挨拶とお礼まで・・・(__)

2009年08月28日 17:54

MIYA

MIYA

やっぱり消えていたんですね><

正直~で意味あるのか?と思ってました…
citeは確かにblockquoteにはかなり有効ですね^^

てか使うべきですね^^

ありがとうございます!!

2009年07月05日 21:39

kuracom

kuracom

ありゃ、肝心のコードが消えてる……
<cite>の事でした。意味不明なコメントですみません。

2009年07月03日 17:37

MIYA

MIYA

kuracomさん

出典についてそこまで詳しく知っていたわけではなかったので教えて頂きありがとうございます。

2009年07月02日 19:19

kuracom

kuracom

出典を表す部分は 〜 でくくった方がより良いソースになると思います。
意味を明示できますし、classを付ける必要も無くなります。

2009年07月02日 18:43

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article