最初の1文字に魂を宿す：`::first-letter` 擬似要素とドロップキャップの深淵

Webのタイポグラフィにおいて、段落の先頭文字を大きく沈み込ませて配置する「ドロップキャップ（初期装飾文字）」は、雑誌や書籍の美学をデジタル空間に持ち込むための伝統的かつ強力な手法だ。CSSでこれを実装する際、私たちは長らく無駄なHTMLのラップ要素（`A`）を量産し、マークダウンのパーサやCMSのエディタ出力を汚染してきた。

だが、モダンなCSSアーキテクチャにおいて、そのアプローチはもはや「アンチパターン」と言わざるを得ない。

ブラウザのレンダリングエンジンに直接テキストの最初の文字を認識させ、動的にスタイルをフックする `::first-letter` 擬似要素。この小さく見える擬似要素の裏側には、ブラウザのレイアウトツリー構築、文字のグリフ計算、そして非同期フォントローディングにおける知られざるドラマが隠されている。

今回は、単なる「文字を大きくする小技」の枠を超え、エンタープライズ規模のWebアプリケーションやメディアプラットフォームにおいて、堅牢かつハイパフォーマンスにドロップキャップを実装するための極限の知見を紐解いていこう。

—

1. `::first-letter` の内部挙動：ブラウザはどこを「最初」と見なすか？

まず、BlinkやGeckoといった現代のレンダリングエンジンが、どのようにして `::first-letter` の対象を特定しているのか、その裏側の仕様を正確に理解しておく必要がある。

`::first-letter` は、ブロックレベル要素（あるいはそれに準ずる要素）の最初の子孫であるテキストノードの、最初の文字に対してスタイルを適用する。ここで重要なのは、「常にタグの先頭の文字とは限らない」という点だ。

例えば、以下のようなマークアップを考えてみてほしい。

「本日は晴天なり」と彼は言った。

もし、この段落の先頭に全角の開き括弧（「）が含まれている場合、ブラウザの実装やバージョン、あるいは言語設定（`lang` 属性）によっては、括弧そのものが最初の文字として扱われるか、あるいは括弧をスキップして次の文字（本）がターゲットになるかという挙動の揺らぎが生じ得る。

堅牢なアーキテクチャを目指す上級エンジニアであれば、この「句読点や引用符の巻き込み問題」をコントロール下におかなければならない。

制御のためのCSSアプローチ

特定の記号を無視させたい、あるいは確実に文字本体にスタイルをあてたい場合、擬似クラスや構造的セレクタとの組み合わせだけでは限界がある。そのため、CMS側でのサニタイズ処理や、以下のような堅牢なCSS設計が求められる。

/ 記事本文の最初の文字をターゲットにする基本形 /
.article-body > p:first-of-type::first-letter {
font-size: 3.5em;
line-height: 0.8;
float: left;
margin-right: 0.15em;
font-family: var(–font-serif);
/ その他の装飾 /
}

一見、何の問題もないコードに見える。しかし、ここに実務の罠が潜んでいる。

—

2. 非同期フォントローディング（FOUT/FOIT）とレンダリングの競合

Webフォント（Google Fontsや自社ホストのWOFF2など）を非同期で読み込んでいるモダンなWebアプリケーションにおいて、`::first-letter` はしばしば厄介なレイアウトシフト（CLS: Cumulative Layout Shift）を引き起こす主犯となる。

ブラウザがDOMを構築し、`::first-letter` に適用された `font-size: 3.5em` やカスタムフォントのレイアウト計算を終えた瞬間、後からフォントファイル（WOFF2）のダウンロードが完了してフォントが切り替わると何が起きるか？

文字のグリフ（文字グリフの形状とメトリクス）が変化した瞬間、フロートされた巨大な文字の占有領域が再計算され、周囲のテキストがガクッと押し出される現象が発生する。これはCore Web Vitalsのスコアを容赦なく削り取る致命傷になり得る。

対策：`font-display` と `initial-letter` への布石

この競合を防ぐためには、フォントの読み込み戦略とCSSプロパティの選定に細心の注意を払う必要がある。

@font-face {
font-family: ‘Cinzel Decorative’;
src: url(‘/fonts/cinzel-decorative.woff2’) format(‘woff2’);
font-display: swap; / フォールバックフォントを即座に描画し、CLSを最小化する /
}

さらに、将来的にはすべてのブラウザで標準化が進む `initial-letter` プロパティへの移行も見据えつつ、現在の `::first-letter` によるフロートレイアウトは、以下のように厳密にメトリクスを固定して構築するのがプロの技だ。

.article-body > p:first-of-type::first-letter {
font-size: 3.2rem;
line-height: 1;
float: left;
padding-top: 4px; / フォントのベースライン補正 /
padding-right: 8px;
padding-bottom: 0;
padding-left: 0;
margin-bottom: -4px; / 行ボックスの崩れを防ぐためのネガティブマージン /
font-family: ‘Cinzel Decorative’, serif;
color: var(–color-primary);

/ レンダリングの最適化をブラウザに促す /
will-change: transform;
}

—

3. 複合的なセレクタとメモリ効率・パフォーマンス

「CSSセレクタは右から左へ評価される」という基本原則を思い出してほしい。`::first-letter` を含むセレクタを書くとき、私たちはブラウザのスタイル計算エンジンの負荷を意識しているだろうか？

例えば、次のような深すぎる子孫セレクタはどうだろう。

/ 悪例：パフォーマンスと保守性の両面で地雷 /
article.post-container > div.content-wrapper > section.body-copy > p:first-of-type::first-letter {
/ … /
}

DOMツリーが深く、動的に要素が再描画されるシングルページアプリケーション（SPA）環境において、このような冗長なセレクタは、スタイル再計算（Recalculate Style）のコストを無駄に増大させる。CSSのメモリ効率を極限まで高めるには、セレクタのスコープを適切に絞りつつ、フラットな構造を保つことが鉄則だ。

スケーラブルな実用コード例

ここでは、BEMやUtility-firstの思想を取り入れつつ、バグの温床になりやすいエッジケース（空の要素やインライン要素が先頭にある場合など）をスマートにいなす実用的な実装例を示す。

/ プロフェッショナル・スタイリングシート /
.prose {
–drop-cap-size: 3.8rem;
–drop-cap-font: ‘Playfair Display’, Georgia, serif;
}

/
最初の段落、かつ最初のテキストノードにのみ確実に適用する。
インライン要素（やなど）が先頭にある場合の予期せぬバグを防ぐため、
直接のテキストノードを持つ段落をターゲットにする。
/
.prose > p:first-of-type::first-letter {
font-size: var(–drop-cap-size);
font-family: var(–drop-cap-font);
font-weight: 700;
line-height: 0.75;
float: left;