Title

::first-letterとは

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

first

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

letter

読み: レター
意味: 文字、字、手紙

目次に戻る

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

この疑似要素はブロックレベル要素、またはボックスがブロックに変換された要素内のテキストノード、またはエレメントノードの最初の一文字を包含します。

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

ただし、これは最初の文字より前に置換要素など他のコンテンツが無いときに限り有効となります。 また、この疑似要素でCSSの全てのプロパティが使えるわけではありません。

目次に戻る

構文

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

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

目次に戻る

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

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

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

目次に戻る

参考: 最初の一文字を包含する

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

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

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

div, span{
	border: thin solid darkgray;
	color: lightcoral;
}
div::first-letter{
	font-size: 200%;
	color: crimson
}
span::first-letter{
	font-size: 200%;
	color: crimson
}

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

<div><疑似要素>T</疑似要素>his element is a generic block container. </div>

目次に戻る