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

CSSの:first-letter擬似要素でテキストの最初の1文字に特別なスタイルを適用する方法

CSSの :first-letter 擬似要素を使用すると、段落などのHTML要素の最初の1文字に対して、特別なスタイルや装飾効果を簡単に追加できます。例えば、記事の冒頭の文字を大きく表示する「ドロップキャップ」のようなデザインも実現可能です。

以下のコードを実行すると、テキストの最初の文字に特別なスタイルが適用されることを確認できます。

サンプルコード

<html>
   <head>
      <style>
         p:first-letter {
            font-size: 5em;
         }
         p.normal:first-letter {
            font-size: 10px;
         }
      </style>
   </head>
   <body>
      <p class="normal"> この段落の最初の文字は通常どおり表示され、フォントサイズは10pxになります。</p>
      <p>この段落の最初の文字は、上記のCSSルールで定義されたとおり5emの大きさで表示されます。それ以外の文字は通常のサイズのままです。この例では、:first-letter擬似要素を使って、任意のHTML要素の最初の文字に効果を与える方法を示しています。</p>
   </body>
</html>

コードの解説

  • p:first-letter：すべてのp要素の最初の1文字に適用され、フォントサイズが5em（通常の5倍）に拡大されます。
  • p.normal:first-letter：クラス「normal」が指定されたp要素のみ、最初の文字のサイズを10pxに上書きします。

このように :first-letter 擬似要素を活用すれば、マガジンやブログ記事などでよく見られる、先頭文字を大きく飾るタイポグラフィ表現をCSSだけで手軽に実装できます。なお、:first-letter はブロックレベル要素にのみ適用可能である点に注意してください。

  1. CSSでテキストボタンのスタイルを設定する方法をわかりやすく解説

    テキストボタンとは、背景色を持たずに文字色だけで視覚的な印象を与えるボタンのスタイルです。Google マテリアルデザインなどでも採用されている洗練されたデザインで、CSSを使えば簡単に実装できます。テキストボタンのスタイリングのポイントテキストボタンを作る基本は、border: none; でボタンの枠線とデフォルトの背景を消し、color プロパティで文字色を指定することです。さらに :hover 疑似クラスを組み合わせると、マウスオーバー時に薄いグレーの背景を表示でき、クリックできる要素であることが直感的に伝わります。以下のコードでは、Success・Info・Warning・Dange

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

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