CSS | テキストの1文字目のスタイルを変更する方法

2022-01-23CSS テキスト,CSS

CSSの疑似クラス「:first-letter」を使ってでテキストの最初の文字、1文字目のスタイルを変更する方法を紹介しています。

テキストの1文字目のスタイルを変更する

テキストの1文字目のスタイルを変更した表示サンプルとCSSのサンプルコードになります。

See the Pen CSS | Italicize Text by yochans (@yochans) on CodePen.

最初の文字を加工する対象のテキストにpタグ、class名に「.text」を指定しています。

<p class="text">First letter styling</p>

CSSで最初の文字のスタイルを変更するには疑似クラス「:first-letter」が用意されていますので利用します。

サンプルでは最初の文字の色のみを指定していますが、その他のプロパティも有効です。

.text {
	font-size: 50px;
	color: #4169e1;
}

.text:first-letter {
	color: #ff6347;
}