::first-line

ファーストライン（セレクタ）

意味最初の行を指定

::first-lineとは？

::first-lineは疑似要素の一つで、要素の最初の行に特別なスタイルを適用するために使用します。これにより、段落の最初の行だけを装飾するなど、テキストの一部に対して目立たせたい効果を簡単に加えることができます。

::first-lineの具体的な使い方

段落の最初の行をスタイリングする例

<style>
    p::first-line {
        font-weight: bold;
    }
</style>

<p>この段落の最初の行が目立ちます。</p>

p要素の最初の行のテキストを太字にしています。

::first-lineに関するよくある質問

Q. ::first-lineの対象は？

A. ::first-lineは、ブロックレベル要素の最初の行にのみ適用されます。インライン要素には適用されません。

Q. 動的な変更に対応する？

A. はい、ウィンドウサイズの変更やテキストの追加・削除に応じて、::first-lineの対象となる行は動的に変化します。

Q. 適用できるプロパティは？

A. ::first-lineに適用できるCSSプロパティは限られており、主にフォントやテキストに関連するプロパティのみが使用可能です。

::first-lineが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSの::first-lineや:visited、:hover、:has()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。