▼EntryMore▼

またも、ですが。
IE さんが聞き分け悪くて、言う事聞いてくれないんスよorz
なので IE でも同じように表示できる方法も、ってことでふたつですｗ

CSS ソース

まず:first-letter疑似クラスから。
これは、CSSを適用させた要素の中の最初に登場する"1文字"に適用する疑似クラスです。
（ちなみに最初に登場する"1行"に適用するには「:first-line」疑似クラスを使います）
最初の1文字をブロック要素にし、かつfloatさせることで後に続く文章を回り込ませることができます。

ブロック要素にする意味は、インライン要素のままだとただ文字が大きくなるだけで 1 行目の高さがのびるだけで 2 行目は普通に 1 行目の下に表示されてしまいます。これだとドロップキャプスの意味がありませんね。

なので、1 文字目だけをブロック要素にしてfloatさせることにより、2 行目（またそれ以上の行）を大きくした 1 文字目の右側に回り込ませることができます。

あとは、その大きくしたい文字を思い通りのサイズになるように調整してやります。
文字との間がつまりすぎてるなーと思ったらmarginを設定しましょう。
（ここでは下と右に2pxずつmarginを取っています）

さて説明はこれで終わりですが、この:firest-letter疑似クラス、IE は対応していないのです。

なので上のサンプルをIEで表示すると、上の文章だけが適用され、下のは普通の文章になっていますね。

では、IE に対応させるやりかたは、というと。
文字を大きくしたい文字をspan要素で囲むだけ。

こんな感じ。
あとの CSS の設定は同じです。

疑似クラス、IE でも使えるようにあるとコーディングがスムーズになるだけでなく、無駄なタグやクラスが増えなくていいんですけどね…。早く対応してくれないかなァ；；