HTML & CSS

レシピ

テキスト

テキストの1文字目だけCSSを適用する

擬似要素「::first-letter」を使って、テキストの1文字目だけを大きくしたり、色を変える方法を解説します。

この記事のポイント

  • テキストの1文字目だけスタイルを調整する
  • ブロックレベル要素以外でも、1文字目だけスタイルを調整する

目次

1文字目にだけスタイルを適用する

CSSには::first-letterという擬似要素があり、こちらを使うとテキストの1文字目のみに

1文字目のみスタイルを変更している例
1文字目のみスタイルを変更している例

ブロックレベル要素のテキストであれば適用可能なため、リストのli要素などでも使用できます。

リストの各項目の1文字目にスタイルを適用
リストの各項目の1文字目にスタイルを適用

ブロックレベル以外の要素(span要素など)でも、「display:inline-block」「display:block」を適用すれば、この擬似要素は適用可能です。

::first-letterに対し、1行目のみスタイルを適用する擬似要素::first-lineもあります。
詳しくは「テキストの1行目だけCSSを適用する」をご覧ください。

ブロックレベル要素の1文字目にスタイルを適用する

テキストの1文字目にスタイルを適用するには、擬似要素::first-letterにスタイルを指定します。

擬似要素::first-letterへのスタイル適用例

<style>
section p::first-letter {
	color: #2992e3;
	font-size: 200%;
}
</style>
<section>
	<p>テキストの1文字目のみスタイルを変更。<br>1文字目のみ大きくしたり、色を変えたりできる。</p>
</section>
1文字目のみスタイルを変更している例

リストについても上記と同様に適用可能です。

擬似要素::first-letterへのスタイル適用例

<style>
section ul li::first-letter {
	color: #2992e3;
	font-size: 200%;
}
</style>
<section>
	<ul>
		<li>テキストの1文字目のみスタイルを変更。</li>
		<li>テキストの1文字目のみスタイルを変更。</li>
		<li>テキストの1文字目のみスタイルを変更。</li>
	</ul>
</section>
リストの各項目の1文字目にスタイルを適用

インライン要素でも1文字目にスタイルを適用する

インライン要素は通常のままでは::first-letterを適用できませんが、displayプロパティでブロックレベルに変更することで適用可能になります。

擬似要素::first-letterへのスタイル適用例

<style>
section p span {
	display: inline-block;
}
section p span::first-letter {
	color: #2992e3;
	font-size: 200%;
}
</style>
<section>
	<p><span>テキスト</span></p>
</section>
インラン要素への適用例

span要素をブロックレベル要素へ変更している「display: inline-block;」が肝。
このようにすれば、基本的にはどの要素にも::first-letterを適用することが可能になります。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。