CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの::first-line疑似要素とは？使い方とサンプルコードをわかりやすく解説

CSSの::first-line疑似要素は、要素内のコンテンツの「最初の1行」だけにスタイルを適用するためのセレクターです。段落の冒頭部分を目立たせたい場合などに活用できます。

ただし注意点として、テキストを含む要素の幅が固定されていない場合、最初の行の長さはウィンドウサイズによって変化します。そのため、::first-lineで装飾される範囲も画面幅に応じて変わるという点を理解しておく必要があります。

それでは、CSSの::first-line疑似要素の具体的な使い方を、サンプルコードとともに見ていきましょう。

例1：最初の行に背景色と文字色を適用する

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
    background-color: lightgreen;
    color: white;
}
</style>
</head>
<body>
<h2>Lorem Ipsum</h2>
<p>Phasellus id ante turpis.Vestibulum luctus justo id odio iaculis condimentum. Vestibulum sapien mauris, feugiat id posuere vitae, condimentum blandit sapien.</p>
<div id="divDisplay"></div>
<script>
divDisplay.textContent = 'Current window width: '+window.innerWidth+'px';
window.addEventListener('resize', function() {
    divDisplay.textContent = 'Current window width: '+window.innerWidth+'px';
})
</script>
</body>
</html>

出力結果

初期状態（ウィンドウ幅が「606px」の場合）：

CSSの::first-line疑似要素とは？使い方とサンプルコードをわかりやすく解説

ウィンドウ幅を広げた場合：

CSSの::first-line疑似要素とは？使い方とサンプルコードをわかりやすく解説

テキストを含む要素の幅を固定したうえでウィンドウをリサイズした場合：

CSSの::first-line疑似要素とは？使い方とサンプルコードをわかりやすく解説

このように、要素の幅が可変の場合はウィンドウサイズに応じて最初の行の長さが変わり、::first-lineの適用範囲も連動して変化します。一方、要素の幅を固定すれば、ウィンドウをリサイズしても適用範囲は一定に保たれます。

例2：固定幅のコンテナ内で::first-lineを使用する

次に、div要素の幅を420pxに固定し、複数の段落の最初の行にオレンジ色の背景を適用する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
    background-color: #FF8A00;
    color: white;
}
div{
    width: 420px;
}
</style>
</head>
<body>
<div>
<h2>Demo Heading</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</div>
</body>
</html>

出力結果

CSSの::first-line疑似要素とは？使い方とサンプルコードをわかりやすく解説

この例では、各段落（<p>）の最初の行のみにオレンジ色の背景と白い文字色が適用されていることが確認できます。コンテナの幅が固定されているため、ウィンドウサイズを変更しても装飾される範囲は変わりません。

::first-lineで使用できる主なプロパティ

::first-line疑似要素には、すべてのCSSプロパティを指定できるわけではありません。主に以下のようなプロパティが利用可能です。

  • フォント関連プロパティ（font-family、font-size、font-weightなど）
  • color（文字色）
  • background関連プロパティ（background-colorなど）
  • text-decoration、text-transform
  • letter-spacing、word-spacing
  • line-height

まとめ

::first-line疑似要素を使えば、要素の最初の1行だけに手軽にスタイルを適用できます。記事やブログのリード文を目立たせる演出などに役立つ一方、要素の幅が可変だと適用範囲がウィンドウサイズによって変わる点には注意しましょう。実務では、レイアウトの意図に合わせて幅を固定するかどうかを判断することが大切です。

  1. CSSの@mediaルールとは？メディアクエリの基本と使い方を実例付きで解説

    CSSの@mediaルールは、1つのスタイルシート内で、印刷・画面・すべてなど、異なるメディアタイプに応じて異なるスタイルを指定するために使用されます。通常はカンマ区切りのメディアタイプのリストと、対象メディア用のスタイルルールを含むCSS宣言ブロックが続きます。構文（Syntax）@mediaルールの基本的な構文は以下の通りです。@media not | only mediatype and (expressions) { CSS-Code; }「not」や「only」は省略可能なキーワードで、「expressions」には画面幅などの条件（メディア特性）を指定します。これにより、デ

  2. CSSの::first-letter疑似要素とは？使い方とサンプルコードを解説

    CSSの::first-letter疑似要素は、要素内のコンテンツの最初の一文字だけを選択し、そこにのみスタイルを適用できるセレクターです。雑誌や新聞でよく見かける「ドロップキャップ（先頭文字を大きく装飾する表現）」を、Webページでも手軽に実現できます。ただし注意点として、この疑似要素はインラインレベルの要素には適用できません。スタイルを反映させるには、対象となる要素がブロックレベルである必要があります。主な特徴ブロックレベル要素の最初の一文字にのみスタイルが適用されるfont-size、color、background-color、padding などのプロパティが自由に組み合わせられるイ