CSSでドロップキャップを作成する方法｜タイポグラフィの基本と実装テクニック

ドロップキャップ（Drop Cap）とは、文章ブロックの先頭にある一文字を大きく装飾するタイポグラフィ技法のことです。主に文書のリード段落（冒頭の段落）で使われ、この記事の最初の段落のように、本文の他の部分とは異なるスタイルが適用されます。ドロップキャップは、読者の視線を狙った場所へ誘導するための強力な視覚的マーカーであり、タイポグラファーやビジュアルデザイナーに古くから愛用されてきました。

ドロップキャップの基本的なデザイン手法

ドロップキャップのデザインに唯一の正解はありません。もっとも一般的なのは、本文と同じフォント（書体）を使い、先頭の一文字だけフォントサイズを大きくする方法です。場合によっては太字にして、さらに存在感を高めることもあります。

この記事のリード段落で使っているドロップキャップは、次のCSSで実装しています。

.dropcap {
  float: left;
  font-size: 6em;
  line-height: 0.60;
  margin: 0;
  margin-left: -0.04em;
  padding: .09em .04em 0em 0em;
}

段落で使うには、最初の単語の頭文字を <span> 要素で囲み、dropcap クラスを指定するだけです。

<p><span class="dropcap">D</span>rop cap is the first letter in a text block...
</p>

フォントや行間に合わせた微調整が重要

注意すべき点として、自分の文書に合ったドロップキャップのスタイリングは、選んだ書体の構造、フォントサイズ、行間（レディング）などの要素によって大きく変わります。あらゆるケースに対応できる万能なCSSルールセットは存在しないため、値を少しずつ動かしながら、理想の仕上がりに近づけていく作業が必要です。

上記のCSSはテンプレート（出発点）として活用できます。まずは font-size の値を増減させ、段落にぴったり収まるサイズを探りましょう。それでも位置がうまく揃わない場合は、line-height の値を少し上下してみてください。最後に、margin-top を調整すれば、ドロップキャップを上下方向に細かく動かせます。

ドロップキャップのさまざまなスタイル

ここで紹介しているスタイルは、数ある選択肢の中の一例にすぎません。ドロップキャップが段落のテキストと上下で揃っていなければならない、といったルールは存在しません。デザイナーによっては、1行目のアセンダー（字母の上端）より少し上に出す人もいれば、大きく 持ち上げてアクセントにする人もいます。逆に、テキストブロックの奥深くに沈めて配置し、上部と左側に余白をたっぷり空けるスタイルを選ぶケースもあります。

また、文字色や背景色を変えて表現することもあります。以下に具体例を示します。

文字色を変えたドロップキャップ

Lorem ipsum（ロレム・イプサム）は、lipsum とも呼ばれるダミーテキストで、印刷物・グラフィック・Webデザインのレイアウト作成などに広く使われています。15世紀の無名の植字工が、キケロの『善と悪の究極について』（De Finibus Bonorum et Malorum）の一部をつなぎ合わせ、活字見本帳向けに加工したのが起源とされています。

背景色を変えたドロップキャップ

Lorem ipsum（ロレム・イプサム）は、lipsum とも呼ばれるダミーテキストで、印刷物・グラフィック・Webデザインのレイアウト作成などに広く使われています。15世紀の無名の植字工が、キケロの『善と悪の究極について』（De Finibus Bonorum et Malorum）の一部をつなぎ合わせ、活字見本帳向けに加工したのが起源とされています。

上の2つの例は、先ほど紹介した dropcap クラスと同じCSSを使用しており、違いは color や background-color の指定だけです。2つ目の例では、位置を整えるために padding-bottom と margin-right を少し追加しています。

補足：::first-letter 疑似要素を使う方法

HTMLを変更せずにドロップキャップを実装したい場合は、CSSの ::first-letter 疑似要素を利用する方法もあります。

p::first-letter {
  float: left;
  font-size: 6em;
  line-height: 0.6;
}

この方法ならマークアップをシンプルに保てますが、ブラウザによる解釈の違いや、float との組み合わせ時の細かい挙動に注意が必要です。確実にデザインをコントロールしたい場合は、<span> 要素で囲む方法がおすすめです。

まとめ

ドロップキャップは数多くあるタイポグラフィの強調手法のひとつですが、その中でも特に注目を集める力を持っています。だからこそ、乱用せず適度に取り入れることが大切です。記事の冒頭や重要なセクションの始まりなど、読者の目を引きたい場面で効果的に活用しましょう。