シュウ

今回は【CSS】擬似要素のfirst-line、first-letterの使い方!
についての解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• first-line、first-letterの使い方について学びたい方へ
• 今回は文字、文章に対する擬似要素を学習しよう

上の図のように、最初の1行目、1文字目にスタイルが適用されています。
今回は、文字に対する擬似要素についての記事になります。

文字に対する擬似要素

文字に対する擬似クラスとは、最初の1行目、1文字目にスタイルが適用されています。
書き方は以下のようになります。

/*--first-line--*/
p:first-line {プロパティ: 値;}

/*--first-letter--*/
p:first-letter {プロパティ: 値;}

擬似要素:first-lineについて

:first-lineとは、要素の1行目にスタイルを適用する。
今回は最初の1行目の文字色を変更し太字に指定しています。また、ボーダー線や背景色の指定も可能です。

first-lineはブロックボックスに分類される要素のみに適用されます。

<p>赤色(情熱・強さ)の特徴とは
情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など</p>
<!--以下省略-->

/*--first-lineを指定--*/
p:first-line {
	/*--文字色の指定*/
	color: #febe3e;
	
	/*--太字を指定*/
	font-weight: bold;
}

擬似要素:first-letterについて

:first-letterとは、要素の1文字目にスタイルを適用する。
今回は最初の1文字目の文字色を変更し背景色、余白を指定しています。また、ボーダー線や太字の指定も
可能です。

first-letterはブロックボックスに分類される要素のみに適用されます。

<p>赤色(情熱・強さ)の特徴とは
情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など</p>
<!--以下省略-->

/*--first-letterを指定--*/
p:first-letter {
	/*--文字サイズの指定*/
	font-size: 20px;
	
	/*--文字色の指定*/
	color: #333;
	
	/*--背景色の指定*/
	background-color: #febe3e;
	
	/*--余白の指定 上下左右に10px*/
	padding: 10px;
}

インライン要素でもスタイルを適用する

今回は、「first-line、first-letter」について解説してきました。
２つの共通点はブロックレベル要素にしか適用しないということです。

主なインラインボックスの例になります。

ですが、インラインボックスでも、displayプロパティを指定することで、適用が可能になります。
cssで指定する際に、インライン要素に対して「block、inline-block」のどちらかを指定しましょう。

<div><span>赤色(情熱・強さ)の特徴</span></div>

/*--inline-blockを指定--*/
span {
	display: inline-block;
}

span:first-letter {
	/*--以下装飾--*/
	color: #333;
	background-color: #febe3e;
	padding: 10px;
}

display:inlineとblockの記事

【CSS】display:inlineとblockの違いを解説！

display:inlineとblockに違い、使い方についての記事になります。

まとめ

今回はこれで以上です。

最新記事

• 

  【CSS】display flex指定方法のまとめを解説

  2024.03.07

• 

  【CSS】背景画像を複数設置について解説!

  2023.12.14

• 

  【CSS】疑似クラス、::afterと::beforeで斜めの背景を解説!!

  2023.06.22

• 

  【CSS】画像の透過について、mix-blend-modeを使ってみよう

  2023.06.01

関連記事

< 前の記事

【CSS】リンク擬似クラスのlink、visitedの使い方!

次の記事 >

【CSS】UI要素状態擬似クラスenabled、disabled、checkedの使い方！