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

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

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

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

CSS

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

まとめ

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク