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

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

CSSの::first-letter疑似要素は、要素内のコンテンツの最初の一文字だけを選択し、そこにのみスタイルを適用できるセレクターです。雑誌や新聞でよく見かける「ドロップキャップ（先頭文字を大きく装飾する表現）」を、Webページでも手軽に実現できます。

ただし注意点として、この疑似要素はインラインレベルの要素には適用できません。スタイルを反映させるには、対象となる要素がブロックレベルである必要があります。

主な特徴

  • ブロックレベル要素の最初の一文字にのみスタイルが適用される
  • font-size、color、background-color、padding などのプロパティが自由に組み合わせられる
  • インライン要素には効果がないため、必要に応じて display プロパティで block などに変更して使う

サンプルコード1：段落の先頭文字を大きく装飾する

まずは、::first-letter 疑似要素を使った基本的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
div{
   background-color: #32485d;
   border: 5px solid black;
   color: #959799;
}
p::first-letter {
   font-size: 1.5em;
   color: #f9f9f9;
   padding: 2px;
}
</style>
</head>
<body>
<div>
<h2>Eclipse IDE</h2>
<p>"Eclipse is an integrated development environment (IDE) for Java and other programming languages 
like C, C++, PHP, and Ruby etc. Development environment provided by Eclipse includes the Eclipse Java 
development tools (JDT) for Java, Eclipse CDT for C/C++, and Eclipse PDT for PHP, among others."</p>
</div>
</body>
</html>

表示結果

上記のコードを実行すると、次のように表示されます。

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

段落の先頭にある「E」という文字だけが1.5倍のサイズになり、明るい色で強調されているのが確認できます。本文全体のスタイルはそのままに、最初の一文字だけを目立たせられるのがポイントです。

サンプルコード2：背景色と文字色を組み合わせる

続いて、背景色と文字色を組み合わせて、先頭文字により強いアクセントをつける例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
   font-size: 1.5em;
   background-color: black;
   color: #dc3545;
   padding: 2px;
}
</style>
</head>
<body>
<div>
<h2>Machine Learning Tutorials</h2>
<p>TensorFlow</p><p>Machine Learning with Python</p><p>Time Series</p><p>PyTorch</p>
</div>
</body>
</html>

表示結果

上記のコードを実行すると、次のように表示されます。

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

各段落の先頭文字に黒い背景色と赤系の文字色が適用され、項目名のような視覚的なアクセントになっていることがわかります。複数の段落がある場合でも、それぞれの最初の一文字に自動的にスタイルが反映されます。

まとめ

::first-letter 疑似要素を使えば、JavaScriptなどを一切使わず、CSSだけで段落の先頭文字を簡単に装飾できます。ドロップキャップ風のデザインは記事の読みやすさや見栄えを高めるのに効果的なので、ブログやニュースサイト、ランディングページなどでぜひ活用してみてください。なお、インライン要素には効かない点だけ覚えておきましょう。

  1. CSSの:nth-child()疑似クラスの使い方と実例まとめ

    CSSの:nth-child()疑似クラスは、親要素の中でn番目に位置する子要素を選択するためのセレクタです。リストやカード型レイアウトなど、繰り返し表示される要素のうち特定の位置だけにスタイルを適用したい場合に非常に便利です。 構文 :nth-child()疑似クラスの基本構文は以下のとおりです。 :nth-child(n){     /*スタイル宣言*/ } 引数には単純な数値のほか、「odd（奇数番目）」「even（偶数番目）」といったキーワードや、「2n+1」のような数式も指定できるため、柔軟なスタイリングが可能です。 例1：複数のボックスに個別の背景色を適用する

  2. CSSのborder-colorプロパティの使い方を徹底解説

    CSSのborder-colorプロパティとはCSSのborder-colorプロパティは、要素の境界線（ボーダー）の色を指定するために使用します。4つの値をスペースで区切って記述することで、上・右・下・左の各辺に異なる色を一度に設定することも可能です。また、border-top-color（上）、border-right-color（右）、border-bottom-color（下）、border-left-color（左）といった個別のプロパティを使えば、特定の一辺だけ色を変更することもできます。基本構文border-colorプロパティの基本的な書式は以下のとおりです。セレクター { &