段落先頭の大文字（ドロップキャップ）
段落の最初の 1 文字だけを大きく装飾する、雑誌のリード文でおなじみのドロップキャップです。 ::first-letter 疑似要素で先頭文字を選び、 float:left で本文を回り込ませ、 font-size:68px と差し色（ color ）で目立たせています。
解説
段落の最初の 1 文字だけを大きく装飾する、雑誌のリード文でおなじみのドロップキャップです。::first-letter 疑似要素で先頭文字を選び、float:left で本文を回り込ませ、font-size:68px と差し色（color）で目立たせています。本文は Noto Serif JP の明朝系・広めの line-height で読み物らしい落ち着きを出し、頭文字だけセリフ体（Georgia 系）に切り替えて品の良さを加えています。CSS のみで JS は不要です。
使いどころ
- 記事やコラムのリードパラグラフ
- ブランドストーリーや会社紹介の導入文
- インタビュー記事の冒頭
頭文字の大きさは font-size で、回り込む行数は文字サイズと line-height のバランスで決まります。色やフォントを本文トーンに合わせると統一感が出ます。注意点として、日本語の文頭が記号（「」など）だと装飾が記号に当たり不自然になることがあるため、文頭は本文の漢字や仮名から始めるのが無難です。装飾は冒頭 1 段落のみに留めると上品にまとまります。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
頭文字の大きさや色は変えられますか
::first-letter の font-size で大きさを、color で色を変更できます。本文の回り込み行数は文字サイズと行間のバランスで決まります。
日本語でも使えますか
使えます。ただし文頭がカギカッコなどの記号だと装飾が記号に当たって不自然になりやすいため、文頭は通常の文字から始めるのがおすすめです。