【CSS】最初の文字・最初の1行目にスタイルを適用させたい

デザイン

css_first_letter

以下の擬似クラスを利用するとテキストの一部にスタイルを適用させることができます。
今回は最初の文字、最初の行だけに適用する方法を紹介します。

:first-letter 1文字目にだけスタイルを適用

css_first_sample01

<p>最初の文字が大きくなります。</p>
p:first-letter {
	font-weight: bold;
	font-size: 24px;
	color: #ff0000;
}

:first-line 1行目にだけスタイルを適用

css_first_sample02

<p>
一行目にだけスタイルを適用します。<br />
ここは適用されません。<br />
ここも適用されません。
</p>
p:first-line {
	font-weight: bold;
	font-size: 24px;
	color: #ff0000;
}

ソースすっきり、タグで挟む手間も省けます。

デザイン

関連記事