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

CSSの:first-letter擬似要素とは？最初の文字に特殊なスタイルを適用する方法

CSSの :first-letter 擬似要素を使うと、セレクターで指定した要素内のテキストの「最初の一文字」だけに、特別なスタイルを適用できます。段落の頭文字を大きく装飾するドロップキャップ（イニシャル）表現などによく使われ、記事やブログのデザインにアクセントを加えたい場合に便利です。

:first-letterの基本的な使い方

次の例では、p 要素の最初の文字に対して :first-letter を適用し、通常の段落とスタイルを変えています。

<html>
   <head>
      <style>
         p:first-letter {
            font-size: 5em;
         }
         p.normal:first-letter {
            font-size: 10px;
         }
      </style>
   </head>
   <body>
      <p class="normal"> First character of this paragraph will be normal and will
         have font size 10 px;
      </p>
      <p>The first character of this paragraph will be 5em big as defined
         in the CSS rule above. Rest of the characters in this paragraph
         will remain normal. This example shows how to use :first-letter pseduo
         element to give effect to the first characters of any HTML element.
       </p>
   </body>
</html>

コードの解説

p:first-letter { font-size: 5em; } というルールにより、class 属性を持たないすべての p 要素の最初の文字が、親要素のフォントサイズの5倍（5em）で表示されます。

一方、p.normal:first-letter { font-size: 10px; } のルールは、class="normal" が指定された段落にのみ適用され、最初の文字も通常どおり10pxで表示されます。このように、特定のクラスを持つ要素だけに擬似要素を組み合わせて上書きすることで、柔軟なスタイル制御が可能になります。

この例からわかるように、:first-letter 擬似要素は任意のHTML要素の先頭文字に効果を与えることができ、残りの文字には影響しません。

:first-letterで指定できる主なプロパティ

:first-letter に適用できるのは一部のプロパティに限られます。代表的なものは以下のとおりです。

  • フォント関連：font-size、font-weight、font-family など
  • 色・背景：color、background-color、background-image
  • 余白・境界線：margin、padding、border
  • その他：text-decoration、text-transform、float（ドロップキャップ作成時など）

これらを組み合わせることで、雑誌のような印象的な頭文字デザインを簡単に実現できます。

  1. CSSのpositionプロパティ徹底解説！static・relative・absolute・fixedの使い分け

    CSSのpositionプロパティとは CSSのpositionプロパティは、要素の配置方法（ポジショニング）を指定するために使用されます。このプロパティを使いこなすことで、通常の文書フローに従った配置はもちろん、要素を好きな位置に重ねて表示することも可能になります。 positionプロパティに指定できる主な値は以下の4つです。 static（静的配置） デフォルト値です。要素は通常の文書フローの一部として、直前の要素に続いて配置され、後続の要素も通常どおり流れます。topやleftなどのオフセット指定は無効になる点に注意しましょう。 relative（相対配置） 要素は通常の文書フロー内に

  2. CSSでhr要素（水平線）のスタイルを設定する方法をわかりやすく解説

    CSSを使ってhr要素（水平線）のスタイルを設定するには、borderプロパティを活用します。hr要素はデフォルトではシンプルな1本の線として表示されますが、border-topやborder-radiusなどを組み合わせることで、実線・破線・二重線・点線・角丸など、さまざまなデザインに自由にカスタマイズできます。以下に、代表的な5種類の水平線スタイルを実装したサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html> <meta name="viewport" content="width=device-