ドロップキャプスを表現する

▼EntryMore▼

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

さて、んでは早速ソース。

#contents .drop-caps-forie{ /* IE他、すべてのブラウザ用 */
font-size: 250%;
font-weight: bold;
line-height: 100%;
display: block;
float: left;
margin-right: 2px;
margin-bottim: 2px;
width: 1em;
heigth: 1em;
}

#contents .drop-caps:first-letter{ /* IE以外のモダンブラウザに適用されるスタイル */
font-size: 250%;
font-weight: bold;
line-height: 100%;
display: block;
float: left;
margin-right: 2px;
margin-bottim: 2px;
width: 1em;
heigth: 1em;
}


まず「: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要素で囲むだけ。

<p>
<span class="drop-caps-forie">こ</span>れはテストテキストです。
<p>


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

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