【:first-letter】最初の文字だけ大きくするCSS

「サイト内の最初の文字だけを大きくしたい」

まれにそんな場面に遭遇する。
よく英字の新聞やチラシなんかで見かけるこんなやつである。

Web野郎のWeb野郎による
Web野郎のためのブログ。
憤怒のWEBクリエイターの憂鬱。
不定期更新。

そんなときは最初の文字に<span>タグを入れて、別個にCSSでフォントサイズを指定すればOK!!

それでいいのか？
それではさびしくないか？
もっとスマートな方法はないのか？

結局感覚の話になってまうねんけど、コーディングの良し悪しの基準は最終的にはスマートか、いけてるかダサいかになってしまう。
そんなWEB野郎が、スマートな方法を調べてみた。

擬似要素「:first-letter」を使用

「:first-letter」はブロック要素の最初の文字にCSSを指定できる。
よって<p>だけでなく<h1>〜<h6>などでも使用可能。

例えばこんな感じ

Web野郎

これだけ‼︎
わざわざ<span>タグをつけるよりもはるかにスマートすぎるわ。

もちろんfon-sizeだけでなく、その他のプロパティも指定できる。

Web野郎

さらにCSSを細かく設定することで様々なアイキャッチ効果が！

上述では先頭文字を大きくしただけだが、さらに細かくCSSを設定することで、よりアイキャッチ効果を高めることができる。
ちなみに前項の手法は「レイズドキャップ」と呼ばれる。

ドロップキャップ

続いて冒頭で紹介した「ドロップキャップ」と呼ばれる手法。
最初の一文字を大きくし、余白を持たせた上で後続の文字が回りこむ。

Web野郎のWeb野郎によるWeb野郎のためのブログ。憤怒のWEBクリエイターの憂鬱。不定期更新。Web野郎のWeb野郎によるWeb野郎のためのブログ。憤怒のWEBクリエイターの憂鬱。不定期更新。Web野郎のWeb野郎によるWeb野郎のためのブログ。憤怒のWEBクリエイターの憂鬱。不定期更新。

ハンギングキャップ

今度は「ハンギングキャップ」と呼ばれる手法。
先頭文字の下部が空白とし際立たせる。

Web野郎のWeb野郎によるWeb野郎のためのブログ。憤怒のWEBクリエイターの憂鬱。不定期更新。Web野郎のWeb野郎によるWeb野郎のためのブログ。憤怒のWEBクリエイターの憂鬱。不定期更新。Web野郎のWeb野郎によるWeb野郎のためのブログ。憤怒のWEBクリエイターの憂鬱。不定期更新。

よかったこと

• 記述が一気にスマートに。特に特定の文字にタグを打たずに済むのがイケてる。
• なんかこれだけで、スタイリッシュになった気がする。

懸念点

• デバイスによる対応が難しそう。特にレスポンシブデザイン。
• 文字サイズや余白をリキッドな形に持っていくには試行錯誤が必要か。

 - CSS野郎