スタイルシートでドロップキャップを作る - ［ホームページ作成］All About雑誌などでよく使われるドロップキャップを実現 雑誌などでよく使われている「ドロップキャップ」を作ってみましょう。段落の最初の1文字を大きく表示させ、下の数行に食い込ませる装飾のことを「ドロップキャップ」と呼びます。 この「ドロップキャップ」は、スタイルシートを使えば、HTMLに手を加えることなく簡単に作れます。 作ってみた例は、以下の通りです。 先頭の1文字だけ、大きな赤色の反転表示になって、下の数行に食い込んでいます。 CSSのfirst-letter疑似要素を使うと、ボックスの最初の1文字にだけ装飾を施すことができます。 この疑似要素を使うと、雑誌などでよく見かける装飾「ドロップキャップ」を作ることができます。 スタイルシートだけで簡単にできますので、ぜひ試してみて下さい。 ドロップキャップを活用する上で必要になるのは、次の3点です。 first-letter疑似要素
