スタイルシートでドロップキャップを作る [ホームページ作成] All Aboutスタイルシートでドロップキャップを作る雑誌などでよく使われる「先頭の1文字を大きくして下の数行に食い込ませる」装飾(ドロップキャップ)を作ってみましょう。スタイルシートを使えば簡単です。first-letter疑似要素・first-child疑似クラスを使います。 雑誌などでよく使われるドロップキャップを実現 雑誌などでよく使われている「ドロップキャップ」を作ってみましょう。段落の最初の1文字を大きく表示させ、下の数行に食い込ませる装飾のことを「ドロップキャップ」と呼びます。 この「ドロップキャップ」は、スタイルシートを使えば、HTMLに手を加えることなく簡単に作れます。 作ってみた例は、以下の通りです。 先頭の1文字だけ、大きな赤色の反転表示になって、下の数行に食い込んでいます。 CSSのfirst-letter疑似要素を使うと、ボックスの最初の1文字にだけ装飾を施すことができます。 こ
![スタイルシートでドロップキャップを作る [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f530daf3cb408d6b6a0ba6f38ed7ccece36cffc/height=288;version=1;width=512/https%3A%2F%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
