こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。
皆さんは、海外の古い物語やおしゃれな雑誌の冒頭で、最初の1文字だけがグーンと大きく強調されているデザインを見たことはありませんか？「ドロップキャップ」と呼ばれるこの表現、実はCSSの`::first-letter`という擬似要素を使うだけで、驚くほど簡単に実装できちゃうんです。
今日は、この「最初の1文字」を魔法のように変身させるテクニックと、現場で意外とハマりやすい「ここが落とし穴！」というポイントを、優しく紐解いていきましょう。
—
そもそも「::first-letter」って何者？
`::first-letter`は、その名の通り「要素内の最初の1文字」にだけスタイルを当てることができるCSSの擬似要素です。
たとえば、Webサイトのブログ記事で、段落（`
`）の最初の一文字を大きくして、まるで絵本のような雰囲気にしたいとき。これまではわざわざ文字を``タグで囲んでクラスを割り当てて……なんて面倒なことをしていましたが、もうその必要はありません。
CSSだけで完結するので、HTMLがスッキリと綺麗なまま保てるのが一番の魅力ですね！
早速書いてみよう！ドロップキャップの実装
まずは、一番オーソドックスな書き方を見てみましょう。
/ pタグの最初の1文字をターゲットにする /
p::first-letter {
font-size: 3em; / 文字を大きくする /
font-weight: bold; / 太字にする /
color: #ff6b6b; / おしゃれな赤色に /
float: left; / 左側に浮かせて、周りの文字を回り込ませる /
margin-right: 8px; / 文字と文章の間に少し余白を作る /
line-height: 1; / 行間を詰めてきれいに収める /
}
たったこれだけで、あなたのブログ記事が一気に洗練された印象に変わります。`float`を使うのがポイントで、これによって「大きな文字の横に、残りの文章が流れる」というレイアウトが作れるようになるんですよ。
—
ここで注意！現場でつまずきやすい「計算のルール」
さて、ここからが少しだけ技術的な深掘りです。この`::first-letter`ですが、実はどんな要素にも使えるわけではないんです。
1. 「ブロックレベル」の要素でしか効かない？
実は、`p`や`div`といった、枠組みがしっかりしている「ブロックレベル要素」の中身に対して効力を発揮します。逆に、``のようなインライン要素に対して直接`::first-letter`を指定しても、残念ながら何も起きません。
もしインライン要素でやりたい場合は、その親要素に`display: block;`や`display: inline-block;`を当てて、「あなた、今はブロックの仲間ですよ！」と教えてあげる必要があるんです。
2. 「最初の文字」の定義がちょっと厳しい
これ、初心者の頃に一番悩むポイントなのですが、`::first-letter`が反応するのは「純粋な文字」だけです。
- もし文章が `(「こんにちは」)` という風に括弧から始まっていたら？
- ブラウザは「`(` も `「` も文字じゃないよ」と判断して、その次の「こ」を最初の文字として認識してしまうことがあります。
意外と気難しい性格ですよね。でも大丈夫、そんな時は落ち着いて「あ、今は記号が邪魔しているんだな」と気づいてあげてください。
—
最後に：デザインのさじ加減は「余白」が命
ドロップキャップを実装するとき、最後に一つだけアドバイスさせてください。
大きな文字を作ると、どうしても周りの文章との距離感が難しくなります。そんな時は、`margin`や`padding`で微調整することを忘れないでくださいね。少しの余白があるだけで、デザインのクオリティはグッとプロっぽくなります。
最初はうまくいかなくても大丈夫。CSSは「あれ？なんで動かないの？」と試行錯誤する時間が、一番あなたを成長させてくれますから。
ぜひ、自分のポートフォリオサイトやブログで試してみてください。最初の1文字が変わるだけで、Webサイトを見る人のワクワク感もきっと変わるはずですよ！
それでは、また次回の記事でお会いしましょう！Happy Coding!
コメント