[CSS]擬似クラス:first-letterでドロップキャップ

今回も紙面デザイン的WEBデザイン。

擬似クラス:first-letterを使ったドロップキャップの3分クッキング。
ドロップキャップってナニ？な方はまずはデモでも見てみよう。

ね。文章の1文字目だけがデカいアレ。アレがドロップキャップです。

CSS

p:first-letter {
	font-size:3em;
	float:left;
	font-family: 'Hiragino Mincho Pro','HGS明朝E','MS P明朝',serif;
	margin:0 0.2em 0 0;
}

読んで字のごとく、:first-letterは最初の1文字のマッチします。
※font-familyは指定しなくての大丈夫です。それっぽく見せたかったんで明朝体にしてみました。

まとめ

IE5.5以上大丈夫なのでモーマンタイです。
最近流行りの紙面デザインチックなWEBデザインもドロップキャップがあれば怖いものないですね！
※流行ってませんし怖いものもあります。