ウェブデザインでは、テキストの一部を目立たせたい場合があります。この記事では、CSSの擬似要素「::first-letter」を使って、テキストの最初の文字だけに特別なスタイルを適用する方法を解説します。
1. 1文字目だけスタイルを調整する基本
CSSには「::first-letter」という擬似要素があります。これを使用すると、テキストの最初の文字にだけ特別なスタイルを適用することができます。これは、例えば段落の最初の文字を大きくしたり、色を変えたりするのに便利です。
スタイル適用例:
p::first-letter {
color: red;
font-size: 200%;
}2. ブロックレベル要素でのスタイル適用
::first-letter擬似要素は、ブロックレベルの要素（例えば<p>や<li>）に対して使用可能です。これを用いることで、リストの各項目の最初の文字にスタイルを適用することもできます。
スタイル適用例:
li::first-letter {
color: blue;
font-size: 150%;
}3. インライン要素へのスタイル適用
インライン要素（例えば<span>）は通常、::first-letterを直接適用できません。しかし、display: inline-blockやdisplay: blockを使用して要素をブロックレベルに変更することで、この擬似要素を適用することが可能になります。
スタイル適用例:
span::first-letter {
display: inline-block;
color: green;
font-size: 175%;
}4. まとめと応用
CSSの::first-letter擬似要素は、ウェブページ上でテキストの最初の文字を目立たせるのに非常に有効です。ブロックレベル要素だけでなく、インライン要素に対しても適用可能です。これにより、デザインの幅が広がります。
また、::first-letterに加えて、テキストの最初の行にスタイルを適用する::first-line擬似要素も存在します。これらを組み合わせることで、より魅力的なテキストデザインが可能になります。詳しくは「テキストの1行目だけCSSを適用する」をご覧ください。
