Title

::first-lineとは

ここで説明する::first-line とは次の語句からなるCSSの疑似要素です。

first

読み: ファースト
意味: 最初、初めの、一番目

line

読み: ライン
意味: 行、線

目次に戻る

::first-line疑似要素の概要

この疑似要素はブロックレベル要素、またはボックスがブロックに変換された要素内の一行目にあるテキストノード、またはエレメントノードをコンテンツとして包含します。

つまり、ブロックレベル要素か、CSSのdisplayプロパティでblock、及びinline-blockを設定した要素の一行目にあるテキスト、 及び一行目の子要素を含むテキストを疑似要素で包含し、それにプロパティを適用するということです。

なお、この疑似要素でCSSの全てのプロパティが使えるわけではありません。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似要素の記述は以下のような書き方になります。

セレクター::first-line{プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルでは純粋に汎用コンテナーのdivとspanを使ってブロックレベル要素とインライン要素への疑似要素の適用を試験してみます。

目次に戻る

参考: 最初の一行目を包含する

ここではサンプルとテストを兼ねて、ブロックレベル要素とインライン要素の双方に::first-lineを使用してみます。

ブロックレベル要素にはdiv、インライン要素にはspanを使用しています。

結果を見てお分りいただけるとおもいますが、::first-lineは要素のボックスがブロックの要素にしか使えません。

div, span{
	border: thin solid darkgray;
	color: lightcoral;
	padding: 0 1.5em;
	background-color: ivory;
}
span{
	background-color: lightcyan;
}
div::first-line{
	font-size: 200%;
	color: crimson
}
span::first-line{
	font-size: 200%;
	color: crimson
}

上記のCSSコードの結果をHTMLタグとしてイメージすると下記のようになります。

<div>
	<疑似要素>First line</疑似要素>
	<br>
	This element is a generic container.
</div>

目次に戻る