テキストの1文字目・1行目だけにスタイルを適用する方法【CSS】

おはようございます！社員Aです👩

今回はテキストの1文字目・1行目だけにスタイルを適用する方法をご紹介したいと思います。

テキストの1文字目だけにスタイルを適用できるCSS「:first-letter」

デザイン上、テキストの1文字目だけスタイルを適用させたい場合があります。

そんなときには、CSS「:first-letter」を使うことで対応できます。

「:first-letter」基本の使い方

1. 「:first-letter」は擬似要素になるので、要素名の後ろにつけて使用します。
2. ブロックレベル要素の最初の文字に適用されます。

実装

HTML

<div class="txt">
	それも多年無論そうした力説院って事のところにあるないます。あたかも将来を相違共ももしその誤解ましませなりを経っで来るですのは担任聴いうたが、まだにも炙ったないですだ。
</div>

CSS

.txt{
	padding:100px 0 0 0;
	width:500px;
	margin:0 auto;
}
.txt:first-letter{
	font-size:25px;
	font-weight:bold;
	color:#ce0000;
}

表示

txtクラスを付与したdiv要素の疑似要素として「:first-letter」を使うと、最初の1文字目だけスタイルを適用することができました。

わざわざspanタグなどで囲わなくても実現できるのが便利です。

テキストの1行目だけにスタイルを適用できるCSS「:first-line」

先程と同様にデザイン上、テキストの1行目だけスタイルを適用させたい場合があります。

そんなときには、CSS「:first-line」を使うことで対応できます。

「:first-line」基本の使い方

1. 「:first-line」は擬似要素になるので、要素名の後ろにつけて使用します。
2. ブロックレベル要素の最初の文字に適用されます。

実装

HTML

<div class="txt">
	それも多年無論そうした力説院って事のところにあるないます。あたかも将来を相違共ももしその誤解ましませなりを経っで来るですのは担任聴いうたが、まだにも炙ったないですだ。
</div>

CSS

.txt{
	padding:100px 0 0 0;
	width:500px;
	margin:0 auto;
}
.txt:first-line{
	font-size:25px;
	font-weight:bold;
	color:#ce0000;
}

表示

txtクラスを付与したdiv要素の疑似要素として「:first-line」を使うと、最初の1文字目だけスタイルを適用することができました。