CSSで文章の最初の一文字目を大きくするやり方

雑誌などでよく見かけたりする、最初の一文字を大きくして表示してある装飾の文章。
そのような表現を、CSSでやってみるときのやり方の説明です。

:first-letter擬似要素を利用すると、最初の文字を対象に装飾を指定することができます。

例

<p class="sample">CSSで最初の一文字目を大きくする</p>

.sample:first-letter{
  font-size: 200%;
}

事前に最初の一文字目を大きくするための装飾用のクラスを作っておき、フォントサイズをパーセントやemで指定しておくと便利かもしれません。