CSSでドロップキャップを作成する方法（タイポグラフィ）

ドロップキャップは、テキストブロックの最初の文字です。ドロップキャップは通常、現在読んでいるこの段落のように、ドキュメントの先頭の段落で使用されます。ドロップキャップは、他のテキストとはスタイルが異なり、目立つようになっています。ドロップキャップは、タイポグラファーやビジュアルデザイナーが、人々の注意を必要な場所に正確に引き付けるために使用する強力なビジュアルマーカーです。

ドロップキャップをデザインする方法は1つではありません。ドロップキャップを使用する最も一般的なアプローチは、本文の残りの部分と同じフォント/書体を使用することですが、最初の文字のフォントサイズを大幅に大きくし、場合によっては太字にします。

次のコードを使用して、この記事の最初の段落で使用されているドロップキャップに特定のスタイルを設定しました。

.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ルールセットは1つではないため、良い結果を得るには少しずつ努力する必要があります。

上記のCSSをテンプレート/開始点として使用してから、font-sizeの増減を試してみることができます。 あなたの段落にぴったり合うようにするためのあなたのドロップキャップの特性。それでもドロップキャップを希望どおりに調整できない場合は、line-heightを調整してみてください プロパティ値がわずかに上下します。最後に、margin-topで遊ぶ必要があるかもしれません プロパティ、ドロップキャップをわずかに上下に移動します。

ドロップキャップスタイル

ドロップキャップに選んだ特定のスタイリングは、数あるものの1つにすぎません。ドロップキャップを段落の残りのテキストと同じように上下に揃える必要があるという規則はありません。ドロップキャップを最初の行のアセンダーより少し上に上げるデザイナーもいれば、大幅に上げるデザイナーもいます。 反対のことをして、ドロップキャップをテキストブロックの奥深くに押し込み、その上部と左側に十分な空白を作成するものもあります。

ドロップキャップは、異なるテキストや背景色を使用する場合があります。

異なるテキストの色のドロップキャップ

Lorem ipsum、または時々知られているlipsumは、印刷、グラフィック、またはWebデザインのレイアウトに使用されるダミーテキストです。この一節は、タイプ標本本で使用するためにシセロのデフィニバスボノラムエマロラムの一部をスクランブルしたと考えられている15世紀の未知のタイプセッターに起因しています。

背景色が異なるドロップキャップ

Lorem ipsum、または時々知られているlipsumは、印刷、グラフィック、またはWebデザインのレイアウトに使用されるダミーテキストです。この一節は、タイプ標本本で使用するためにシセロのデフィニバスボノラムエマロラムの一部をスクランブルしたと考えられている15世紀の未知のタイプセッターに起因しています。

上記の2つの例では、前に提供したドロップキャップクラスと同じCSSを使用していますが、異なる色/背景色を使用している点が異なります。また、2番目の例に少しパディング（下とマージン）を追加して、ナッジしました。 所定の位置にあります。

-

ドロップキャップは多くの活版印刷の強調ツールの1つですが、最も注目を集めるツールの1つなので、適度に使用してください。