SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.07.04
  • CATEGORY
TITLE

【CSS】擬似要素のfirst-line、first-letterの使い方!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!

サーバーとドメインの同時取得で.jpが無料

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

こんな方に読んでほしい

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

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

文字に対する擬似要素

文字に対する擬似要素

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

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

/*--first-letter--*/
p:first-letter {プロパティ: 値;}
指定できる値
  • first-line
    要素の1行目にスタイルを適用する
  • first-letter
    要素の1文字目にスタイルを適用する

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

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

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

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

ブロックレベルの例
  • <div>、<section>、<header>、<footer>、<h1〜h6>、<p>、<ul>、<li>、<form>など

擬似要素:first-line

赤色(情熱・強さ)の特徴とは
情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など

橙色(ぬくもり・健康)の特徴とは
ぬくもり・健康・陽気・暖かさ・にぎやか・派手 など

黄色(はつらつ・エネルギー)の特徴とは
はつらつ・陽気・活気・希望・愉快・注意 など

<p>赤色(情熱・強さ)の特徴とは
情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など</p>
<!--以下省略-->
/*--first-lineを指定--*/
p:first-line {
	/*--文字色の指定*/
	color: #febe3e;
	
	/*--太字を指定*/
	font-weight: bold;
}

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

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

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

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

ブロックレベルの例
  • <div>、<section>、<header>、<footer>、<h1〜h6>、<p>、<ul>、<li>、<form>など

擬似要素:first-letter

赤色(情熱・強さ)の特徴とは
情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など

橙色(ぬくもり・健康)の特徴とは
ぬくもり・健康・陽気・暖かさ・にぎやか・派手 など

黄色(はつらつ・エネルギー)の特徴とは
はつらつ・陽気・活気・希望・愉快・注意 など

<p>赤色(情熱・強さ)の特徴とは
情熱・強さ・生命力・活動・祝福・派手・刺激・警告 など</p>
<!--以下省略-->
/*--first-letterを指定--*/
p:first-letter {
	/*--文字サイズの指定*/
	font-size: 20px;
	
	/*--文字色の指定*/
	color: #333;
	
	/*--背景色の指定*/
	background-color: #febe3e;
	
	/*--余白の指定 上下左右に10px*/
	padding: 10px;
}

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

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

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

インラインの例
  • <span>、<a>、<br>、<img>、<input>など
  • ※一部のタグ<img>、<input>は、width、height、margin(上下)の指定が可能です

ですが、インラインボックスでも、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の記事

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

まとめ

今回はこれで以上です。

POINT
  • :first-lineとは、要素の1行目にスタイルを適用する。
  • :first-letterとは、要素の1文字目にスタイルを適用する。
  • インライン要素に対しては「block、inline-block」のどちらかを指定しましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top