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

CSS デザイン

css_first_letter

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

HTML:

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

CSS:

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

css_first_letter_sample01

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

css_first_letter_sample02

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

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

CSS デザイン

関連記事