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

|

ドロップキャップとは、段落の最初の文字を数行分大きくすることです。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

このページに関連する記事

最近のブログ記事