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

CSSの::first-line疑似要素で段落の最初の行をおしゃれに装飾する方法

CSSの::first-line疑似要素を使用すると、ブロックレベル要素の「最初の行」だけにスタイルを適用できます。雑誌や新聞の記事のように段落の冒頭を目立たせたい場合に便利なセレクターで、フォントサイズ・色・影などの装飾を簡単に加えられます。

ここでは、::first-line疑似要素の具体的な使用例を2つ紹介します。

例1：文字サイズ・色・影を変更する

<!DOCTYPE html>
<html>
<head>
<style>
body {
    text-align: center;
    background-color: darkorchid;
}
::first-line {
    font-size: 2em;
    color: black;
    font-weight: bold;
    text-shadow: 0 -10px grey;
}
</style>
</head>
<body>
<article>
<p>Donec rutrum a erat vitae interdum. </p>
<p>Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec semper ligula ac consequat scelerisque.</p>
</article>
</body>
</html>

出力結果

上記のコードを実行すると、各段落の最初の行だけが大きく太字で表示され、グレーの影がついた状態になります。

CSSの::first-line疑似要素で段落の最初の行をおしゃれに装飾する方法

例2：box-shadowで内側に光るような効果を加える

<!DOCTYPE html>
<html>
<head>
<style>
article {
    text-align: center;
}
::first-line {
    box-shadow: inset 0 0 13px orchid;
}
</style>
</head>
<body>
<article>
<h2>Donec rutrum a erat vitae interdum.</h2>
<p>Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec semper ligula ac consequat scelerisque.</p>
<p>Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo.</p>
</article>
</body>
</html>

出力結果

このコードでは、最初の行の背景領域に対してオーキッド色の内側の影（inset box-shadow）が適用され、ハイライトされたような演出になります。

CSSの::first-line疑似要素で段落の最初の行をおしゃれに装飾する方法

::first-lineを使う際のポイント

  • 最初の行の範囲は画面幅やフォントサイズによって変化するため、レスポンシブデザインでも自然に機能します。
  • 適用できるプロパティには制限があり、主にfont関連、color、background関連、text-decoration、text-shadow、letter-spacingなどが対象です。
  • 特定の要素だけに適用したい場合は、p::first-line のようにセレクターを組み合わせて指定します。
  1. CSS Flexboxで無限ループするスライダー／カルーセルを実装する方法

    CSSのFlexboxとJavaScriptを組み合わせることで、無限にスクロールし続けるスライダー（カルーセル）を簡単に実装できます。本記事では、前後ボタンで切り替えるカルーセルと、CSSアニメーションだけで自動的に流れ続けるスライダーの2つのサンプルを紹介します。 例1：JavaScriptを使ったカルーセル 以下の例では、左右の矢印ボタンをクリックすると画像が切り替わり、最後のスライドからは最初に戻る（逆も同様）無限ループ型のカルーセルを実装しています。 <!DOCTYPE html> <html>    <head>  

  2. CSSの::first-line疑似要素で段落の最初の行をおしゃれに装飾する方法

    CSSの::first-line疑似要素を使用すると、ブロックレベル要素の「最初の行」だけにスタイルを適用できます。雑誌や新聞の記事のように段落の冒頭を目立たせたい場合に便利なセレクターで、フォントサイズ・色・影などの装飾を簡単に加えられます。ここでは、::first-line疑似要素の具体的な使用例を2つ紹介します。例1：文字サイズ・色・影を変更する<!DOCTYPE html> <html> <head> <style> body {     text-align: center;  &nbs