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

2012.08.25 Category:CSS Tag:summary

blockquoteというのは、比較的長めの文章を引用・転載する際に使用します。　※　比較的長めの文章というのは、改行を必要とする程度の事です。

その他にも引用タグというのがありますが、改行を必要としない程度の比較的短い文を引用・抜粋する際は、＜Q＞タグを使用し、文書名、著者名、サイト名などへの参照をするときは＜cite＞タグを使います。

今日は、blockquoteについて書きたいと思います。

画像を使わないblockquote

ここからは、画像を一切使わずにblockquoteを作ってます。

擬似要素を使っていますので、古いバージョンのIEでは上手く表示できません。デモを作りました。

対応ブラウザ Google Chrome / Safari / Firefox / Opera

DEMO

シンプル

HTML

<blockquote ">
<span class="bqstart">“</span>
<p>＜BLOCKQUOTE＞～＜/BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。 
＜BLOCKQUOTE＞タグは、比較的長めの文章を引用・転載する際に使用します。</p>
<span class="bqend">”</span>
</blockquote>

“

＜BLOCKQUOTE＞～＜/BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。

＜BLOCKQUOTE＞タグは、比較的長めの文章を引用・転載する際に使用します。

”

</blockquote>

CSS

blockquote {
	width: 380px;
	margin: 5em 10px; 
	line-height: 22px; font-weight:bold; 
	 background: #FFF;  border: 3px dashed #999;}
blockquote p{
	padding: 10px; margin-left: 10px;
}

.bqstart {
     float: left;
     height: 45px;
     margin: -28px 0 -50px -3px;
     padding-top: 45px;
     font-size: 700%;
     color: #FF0000;
 }

 .bqend {
     float: right;
     height: 25px;
     margin: 10px 0 ;
     padding-top: 5px;
     font-size: 700%;
     color: #FF0000;
 }

blockquote {

width: 380px;

margin: 5em 10px;

line-height: 22px; font-weight:bold;

background: #FFF; border: 3px dashed #999;}

blockquote p{

padding: 10px; margin-left: 10px;

}

.bqstart {

float: left;

height: 45px;

margin: -28px 0 -50px -3px;

padding-top: 45px;

font-size: 700%;

color: #FF0000;

}

.bqend {

float: right;

height: 25px;

margin: 10px 0 ;

padding-top: 5px;

font-size: 700%;

color: #FF0000;

}

DropCapsを使う

HTML

<blockquote >
<p>＜BLOCKQUOTE＞～＜/BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。 
＜BLOCKQUOTE＞タグは、比較的長めの文章を引用・転載する際に使用します。</p>
</blockquote>

＜BLOCKQUOTE＞～＜/BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。

＜BLOCKQUOTE＞タグは、比較的長めの文章を引用・転載する際に使用します。

</blockquote>

CSS

blockquote {
	margin: 5em 10px;
	border-left: 3px dashed #999;
	padding-left: 1em;
	line-height: 22px; }
blockquote p:first-letter {
	float: left;
	 margin: 0 .5em .1em 0;
	font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
	font-size: 220%;
	font-weight: bold; 
	border: 1px solid #999;
	border-radius: 30px;         
	-webkit-border-radius:30px;  
	-moz-border-radius: 30px;  padding: 10px; background: #ccc;}
blockquote p:first-line {
	font-variant: small-caps; }

blockquote {

margin: 5em 10px;

border-left: 3px dashed #999;

padding-left: 1em;

line-height: 22px; }

blockquote p:first-letter {

float: left;

margin: 0 .5em .1em 0;

font-family: "Monotype Corsiva", "Apple Chancery", fantasy;

font-size: 220%;

font-weight: bold;

border: 1px solid #999;

border-radius: 30px;

-webkit-border-radius:30px;

-moz-border-radius: 30px; padding: 10px; background: #ccc;}

blockquote p:first-line {

font-variant: small-caps; }

:afterを使う

HTML

<blockquote >
<p>＜BLOCKQUOTE＞～＜/BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。 
＜BLOCKQUOTE＞タグは、比較的長めの文章を引用・転載する際に使用します。</p>
</blockquote>

＜BLOCKQUOTE＞～＜/BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。

＜BLOCKQUOTE＞タグは、比較的長めの文章を引用・転載する際に使用します。

</blockquote>

CSS

blockquote{
	width: 350px;
	background: #fff;
	padding: 10px; 
	margin: 5em 10px;
	border:5px solid #DBDBDB;
	border-radius: 10px;        
	-webkit-border-radius: 10px;    
	-moz-border-radius: 10px;  
    }

blockquote p{
	color:#3D80B6;
	font-weight:bold;
	line-height: 20px;
}

blockquote:after{
	content:"QUOTE";
	text-align:right;
	display:block;
	height:10px;
	font-weight: lighter;
	font-style: oblique;
	font-size: 300%;
	color: #666;
}

blockquote{

width: 350px;

background: #fff;

padding: 10px;

margin: 5em 10px;

border:5px solid #DBDBDB;

border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

}

blockquote p{

color:#3D80B6;

font-weight:bold;

line-height: 20px;

}

blockquote:after{

content:"QUOTE";

text-align:right;

display:block;

height:10px;

font-weight: lighter;

font-style: oblique;

font-size: 300%;

color: #666;

}

:beforeを使う

HTML

<blockquote >
<p>＜BLOCKQUOTE＞～＜/BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。 
＜BLOCKQUOTE＞タグは、比較的長めの文章を引用・転載する際に使用します。</p>
</blockquote>

＜BLOCKQUOTE＞～＜/BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。

＜BLOCKQUOTE＞タグは、比較的長めの文章を引用・転載する際に使用します。

</blockquote>

CSS

blockquote{
	width: 350px;
	background: #fff;
	padding: 10px; 
	margin: 5em 10px;
	border:5px solid #DBDBDB;
	border-radius: 10px;        
	-webkit-border-radius: 10px;  
	-moz-border-radius: 10px;    
    }

blockquote p{
	color:#3D80B6;
	font-weight:bold;
	line-height: 20px;
	margin-top: 100px;
}

blockquote:before{
	content:"QUOTE";
	text-align:right;
	display:block;
	height:10px;
	font-weight: lighter;
	font-style: oblique;
	font-size: 380%;
	color: #6D6D6D;
	margin: -80px -80px 50px 30px;
	-moz-transform: rotate(25deg); 
	-webkit-transform: rotate(25deg);
	 -moz-transform: rotate(25deg);
	 -o-transform: rotate(25deg); 
}

blockquote{

width: 350px;

background: #fff;

padding: 10px;

margin: 5em 10px;

border:5px solid #DBDBDB;

border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

}

blockquote p{

color:#3D80B6;

font-weight:bold;

line-height: 20px;

margin-top: 100px;

}

blockquote:before{

content:"QUOTE";

text-align:right;

display:block;

height:10px;

font-weight: lighter;

font-style: oblique;

font-size: 380%;

color: #6D6D6D;

margin: -80px -80px 50px 30px;

-moz-transform: rotate(25deg);

-webkit-transform: rotate(25deg);

-moz-transform: rotate(25deg);

-o-transform: rotate(25deg);

}

:beforeと:afterを使う

HTML

<blockquote >
<p>＜BLOCKQUOTE＞～＜/BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。 
＜BLOCKQUOTE＞タグは、比較的長めの文章を引用・転載する際に使用します。</p>
</blockquote>

＜BLOCKQUOTE＞～＜/BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。

＜BLOCKQUOTE＞タグは、比較的長めの文章を引用・転載する際に使用します。

</blockquote>

CSS

blockquote{
	width: 350px;
	background: #fff;
	padding: 10px; 
	margin: 5em 10px;
	border:5px solid #DBDBDB;
	 border-radius: 10px;          
	-webkit-border-radius: 10px;   
	-moz-border-radius: 10px;
	-o-border-radius: 10px;   
    }

blockquote p{
	color:#3D80B6;
	font-weight:bold;
	line-height: 30px;
}

blockquote:before{
	content:"“";
	float: left;
	font-weight: bold;
	font-size: 500%;
	display:block;
	height:30px;
	color: #666;
	padding-right: 10px;
}

blockquote:after{
	content:"”";
	text-align:right;
	display:block;
	height:30px;
	font-weight: bold;
	font-size: 500%;
	color: #666;
	margin-top: -30px;
	padding-bottom: 10px;
}

blockquote{

width: 350px;

background: #fff;

padding: 10px;

margin: 5em 10px;

border:5px solid #DBDBDB;

border-radius: 10px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-o-border-radius: 10px;

}

blockquote p{

color:#3D80B6;

font-weight:bold;

line-height: 30px;

}

blockquote:before{

content:"“";

float: left;

font-weight: bold;

font-size: 500%;

display:block;

height:30px;

color: #666;

padding-right: 10px;

}

blockquote:after{

content:"”";

text-align:right;

display:block;

height:30px;

font-weight: bold;

font-size: 500%;

color: #666;

margin-top: -30px;

padding-bottom: 10px;

}

画像を使ったblockquote

デモを作りました。

対応ブラウザ Google Chrome / Safari / Firefox / Opera / InternetExplorer

DEMO

画像ありのHMTLについては全てこちらのものを使っています。

HTML

<blockquote >
<p>＜BLOCKQUOTE＞～＜/BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。 
＜BLOCKQUOTE＞タグは、比較的長めの文章を引用・転載する際に使用します。</p>
</blockquote>

＜BLOCKQUOTE＞～＜/BLOCKQUOTE>で囲まれた部分が引用・転載であることを表します。

＜BLOCKQUOTE＞タグは、比較的長めの文章を引用・転載する際に使用します。

</blockquote>

シンプル

CSS

blockquote {
	margin: 5em 10px;
	padding-left: 50px;
	line-height: 1.878em;
	font-weight:bold; 
 	background: transparent url('画像URL/quote.gif') no-repeat;
	 }

blockquote {

margin: 5em 10px;

padding-left: 50px;

line-height: 1.878em;

font-weight:bold;

background: transparent url('画像URL/quote.gif') no-repeat;

}

角丸使う

CSS

blockquote{
	width: 350px;
		background: #fff url('画像URL/blockquote2.gif') no-repeat 2% 6%;
	padding: 10px 20px; 
	margin: 5em 10px;
	border:5px solid #DBDBDB;
	border-radius: 0 30px 0 30px;         
	-webkit-border-radius: 0 30px 0 30px;  
	-moz-border-radius:  0 30px 0 30px;  
	text-indent: 65px;
    }

blockquote p{
	color:#3D80B6;
	font-weight:bold;
	line-height: 2.8em;
}