ドロップキャップでテキストを目立たせる

ドロップキャップとは、段落の最初の文字を数行分大きくすることです。Microsoft Wordなどにある機能ですね。雑誌などでよく見る手法だと思います。

このドロップキャップ効果をCSSを使用すると以下のような記述になります。

CSSコード

p:first-letter{
   font-size:200%;
   color:red;
}

(X)HTMLコード

<p>
あいうえおかきくけこさしすせそたちつてとなにぬねの
</p>

ちなみに:first-letter擬似要素に指定できるプロパティは以下のものです。

• font関連
• color
• background関連
• text-decoration
• text-transform
• text-shadow
• vertical-align
• line-height
• margin
• padding
• border
• float
• clear