::first-letterで魅せるCSS装飾術｜冒頭の「一文字」ドロップキャップで段落の印象を変える

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

デザインの世界では、第一印象がすべて。

それは文章にも言えることで、
冒頭の「一文字」にデザインを加えるだけで、ページ全体の雰囲気がぐっと引き締まります。

この記事では、CSSの::first-letter疑似要素を使って
雑誌のような装飾的な段落演出を実装する方法をご紹介します。

シンプルながら効果的。
そんなテキストデザインの“魔法”を、ぜひ体験してください。

::first-letterとは？

新聞や雑誌などの「ドロップキャップ（大文字装飾）」表現をWeb上でも再現可能にしてくれます。

例えば、こんな使い方ができます!

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

 .article p::first-letter { 
 font-size: 200%; 
 float: left; 
 font-weight: bold; 
 color: #3366cc; 
 padding-right: 0.1em; 
} 

こうすると、文章の先頭の一文字が大きく装飾されて、まるで雑誌のリード文のような雰囲気に。

装飾バリエーション：3つのアイデア

注意点と制限

::first-letter には、以下のような制限があります。

特に日本語コンテンツでは、装飾が効きすぎて読みにくくなることもあるため、
使いどころにはバランス感覚が求められます。

モダンな応用：アニメーションと組み合わせる

CSSアニメーションと組み合わせれば、装飾に動きも加えられます。

 .article p::first-letter { 
  animation: pop-in 0.5s ease; 
} 
@keyframes pop-in {
 from { 
transform: scale(0); opacity: 0; 
} to {
 transform: scale(1); opacity: 1; 
} 
} 

このように、目を引く「動きのある最初の一文字」で、記事の冒頭にドラマを演出できます。

事例：英語ブログのリード文

まとめ

satokotadesignキャンペーン実施中！