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

CSSの:first-line疑似要素を使ってテキストの最初の行に特別なスタイルを適用する方法

CSSの :first-line 疑似要素を使用すると、ドキュメント内の要素の最初の行にだけ特別なスタイルや装飾効果を追加できます。段落の冒頭を目立たせたい場合などに便利なセレクターです。

基本的な使い方

:first-line は、指定した要素の実際に表示されている最初の行にのみスタイルが適用される疑似要素です。ブラウザのウィンドウ幅によって行の折り返し位置が変わっても、常に「表示上の1行目」に対してスタイルが反映されます。

サンプルコード

以下のコードを実行すると、テキストの最初の行に特別なスタイル（下線）を適用する動作を確認できます。

<html>
   <head>
      <style>
         p:first-line {
            text-decoration: underline;
         }
         p.noline:first-line {
            text-decoration: none;
         }
      </style>
   </head>
   <body>
      <p class = "noline"> この行には下線が付きません。nolineクラスに属しているためです。</p>
      <p>この段落の最初の行には、上記のCSSルールで定義されたとおり下線が引かれます。
      残りの行は通常どおり表示されます。この例は、:first-line 疑似要素を使って、
      任意のHTML要素の最初の行に効果を与える方法を示しています。</p>
   </body>
</html>

コードの解説

  • p:first-line — すべての p 要素の最初の行に下線（text-decoration: underline）を適用します。
  • p.noline:first-line — noline クラスを持つ p 要素については、下線を無効化（text-decoration: none）します。

このように、クラスセレクターと組み合わせることで、特定の要素だけ :first-line の効果を除外することも可能です。

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

:first-line 疑似要素には、すべてのCSSプロパティを指定できるわけではなく、以下のようなインラインレベルの装飾に関わるプロパティのみ有効です。

  • font 関連プロパティ（font-size、font-weight など）
  • color、background プロパティ
  • text-decoration、text-transform、letter-spacing、word-spacing
  • line-height など

段落の導入部分を強調したい場面でぜひ活用してみてください。

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

    CSSの::first-line疑似要素は、要素内のコンテンツの「最初の1行」だけにスタイルを適用するためのセレクターです。段落の冒頭部分を目立たせたい場合などに活用できます。ただし注意点として、テキストを含む要素の幅が固定されていない場合、最初の行の長さはウィンドウサイズによって変化します。そのため、::first-lineで装飾される範囲も画面幅に応じて変わるという点を理解しておく必要があります。それでは、CSSの::first-line疑似要素の具体的な使い方を、サンプルコードとともに見ていきましょう。例1：最初の行に背景色と文字色を適用する<!DOCTYPE html> &

  2. CSSのcolorプロパティを使って要素の文字色を設定する方法

    CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector {     color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用