2008年3月16日日曜日

 

【CSS】<blockquote>での引用デザイン

イメージ無しのblockquoteで引用を表示するCSSサンプル
CSS疑似要素 before と after を使っての引用表示サンプル。


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

blockquote:after{
content:"”";
text-align:right;
display:block;
height:30px;
font-weight: bold;
font-size: 500%;
color: #666;
}
blockquote>p{
margin:0;
padding:1em;
}
blockquote>p:first-child{
text-indent:2em;
}
blockquote{
margin: 0 2em;
padding: 1em 2em;
background-color: silver;
}

IE以外に対応。画像を使わないのが良い。無駄な要素を使ってソースを汚さない。

第12回:引用(blockquote)をCSSと画像でそれらしく見せる方法
いくつかのパターン比較。

引用の始めと終りの画像をひとつで使いまわせたら理想。CSS の filter は IE のみ対応だし Javascript か CSS Sprite でやるしかなさそう。
CSS Spriteを活用しよう

blockquote は Web 標準的にblockquote要素はブロックレベル要素であるが、直接インライン要素やテキストを含むことはできず、p要素などの他のブロックレベル要素を含まなければならないなので注意。

その他blockquote デザイン。
Blockquote Examples by CSS-Tricks
同一HTMLソースで画像・CSSによる様々なデザイン。 Pull Quotes (15 examples)
凝った blockquote デザインのサイト例。

ラベル:


コメント: コメントを投稿

登録 コメントの投稿 [Atom]



この投稿へのリンク:

リンクを作成



<< ホーム

This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google