先頭の1文字を大きくして、以降に続くテキストを回り込ませて表示させるドロップキャップは、雑誌などのデザインで広く使われている手法です。Webデザインの現場でも、さまざまな方法で表現されています。
ここでは、スタイルシートを使ったふたつの方法を紹介します。
first-Ietter疑似要素は、ブロック要素の1文字目に対して各種プロパティを適用する役割をもっていて、テキストのサイズをfont-sizeプロパティで指定しておけば、先頭の1文字だけが大きく表示されます。手軽に適用できるだけでなく、font-sizeやpaddingなどのプロパティを使えば自由度も高いため覚えておくとよいでしょう。
デザイン性をアップさせたいときは、先頭の1文字目をspan要素で囲んでclassを適用し、指定したセレクタに対してスタイルシート側でfloat・font-size・margin-right・margin-bottomなどのプ口パティを組み合わせて、ドロップキャップのデザインをつくる方法もあります。XHTMLソース側で先頭の1文字だけを指定する手間があるものの、プロパティを追加して罫線で囲むといった装飾が可能です。
