【CSS Modules】::first-letter疑似要素の使い方
::first-letter疑似要素の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
::first-letterオブジェクトは、特定の要素の最初の文字にスタイルを適用するために使用される、CSSの擬似要素を表すオブジェクトです。これは、HTMLのマークアップを直接変更することなく、テキストコンテンツの先頭にある文字を装飾する目的で利用されます。
この擬似要素は、ブロックレベル要素（例えば、<p>タグや<h1>タグなど）のコンテンツの最初の行にある最初の文字にのみ適用可能です。例えば、段落の最初の文字だけを大きくしたり、色を変えたり、フォントを変更したりする際に非常に便利です。
ただし、::first-letterに適用できるCSSプロパティは限定されており、例えばfont関連のプロパティ（font-size, font-weight, colorなど）、background関連のプロパティ、margin, padding, borderなどのボックスモデル関連プロパティ、text-decoration, text-transform, line-height, float, vertical-alignといった一部のテキスト関連プロパティが主な対象となります。全てのCSSプロパティが適用できるわけではないため、注意が必要です。
また、<input>や<img>のような置換要素、または:beforeや:afterといった他の擬似要素によって生成されたコンテンツの最初の文字には適用されません。ウェブページのデザインにおいて、読者の注意を引き、視覚的なアクセントを加えるための一般的な手法として広く利用されています。
公式リファレンス: ::first-letter
構文(syntax)
1selector::first-letter { 2 /* プロパティと値を記述 */ 3 property: value; 4}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません