【CSS】文章の最初の文字を大きくする

ドロップキャップと呼ばれ、雑誌などで見かけるレイアウトです。
今回はCSSを使って文章の最初の１文字を大きくする方法を紹介します。

HTML：

<p>今日は手羽先が食べたいです。</p>

CSS：

p:first-letter {
	font-size: 2em;
	color: #dd0000;
	line-height: 1;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
}

これで、pタグで囲まれた文章の１文字目が大きくなりました。

幅を狭く調整してみました。文字を回り込みさせるとこうなります。

背景色などを指定すればもっとアイキャッチ効果をねらえますね。