CSSで先頭の文字だけ多くする方法（ドロップキャップ）

August 01, 2013

紙媒体でよく使用される頭文字だけを大きくするデザイン。「ドロップキャップ」や「イニシャルキャップ」と呼ばれています。CSSで表現する方法をご紹介します。ポイントは以下の３つになります

first-letterは要素の最初の文字にスタイルを適用する事ができる疑似要素です。例えばp:first-letterとするとp（段落）の最初の文字だけにスタイルを適用することができる。

p:first-letterを使うとすべての段落の最初の文字にスタイルが適用されてしまいます。恐らく、記事内の最初の段落だけに適用させたいという場合が多いと思いますので、その場合first-childという疑似クラスを併用する方法で回避できる。下記のようなコードになります。

 p:first-child:first-letter

ただし、IE6以下は非対応となっていますので、対応させるためには、適用させる段落にクラスを割り当てるしかないようです。

MAC版IEもこちらは対応していません。対応してないだけならば良いのですがバグがでてしまうので、MAC版IE向けに「HOLY HACK」で下記のように記述します。

/* この行と最後の行が必須。このコメントアウトがHOLY HACKです */
p:first-letter {
   //ここにスタイルを記述
}
/* この行も必須です */

検索のヒント