【ホームページ作成】スタイルシートでドロップキャップを作る

雑誌などでよく使われるドロップキャップを実現

雑誌などでよく使われている「ドロップキャップ」を作ってみましょう。段落の最初の1文字を大きく表示させ、下の数行に食い込ませる装飾のことを「ドロップキャップ」と呼びます。

この「ドロップキャップ」は、スタイルシートを使えば、HTMLに手を加えることなく簡単に作れます。 作ってみた例は、以下の通りです。 先頭の1文字だけ、大きな赤色の反転表示になって、下の数行に食い込んでいます。

CSSのfirst-letter疑似要素を使うと、ボックスの最初の1文字にだけ装飾を施すことができます。 この疑似要素を使うと、雑誌などでよく見かける装飾「ドロップキャップ」を作ることができます。 スタイルシートだけで簡単にできますので、ぜひ試してみて下さい。

ドロップキャップを活用する上で必要になるのは、次の3点です。

1. first-letter疑似要素
2. first-child疑似クラス
3. Mac版IEの対策

ドロップキャップを作るだけなら、最初の「first-letter疑似要素」を活用するだけで十分です。 しかし、実際に使うには、first-child疑似クラスやMac版IEへの対応がある方が望ましいでしょう。

この記事では、この3点について順番に解説していきます。
まずは、この3点の役割について簡単に紹介しましょう。

first-letter疑似要素

スタイルシートには、先頭の1文字にだけスタイルを適用させる「first-letter疑似要素」があります。 これを使うことで、HTML側に何も手を加えることなく、段落の先頭1文字だけに装飾を加えることができます。

この「first-letter疑似要素」を使って、段落の先頭1文字に「大きく表示・下の行に埋め込むよう配置・色を反転」などの装飾を施せば、ドロップキャップが実現できます。

first-child疑似クラス

すべての段落でドロップキャップを使いたいわけではないでしょう。 雑誌などでも、ドロップキャップが使われるのは「先頭の段落」だけです。

スタイルシートには、ある範囲に含まれる最初の要素だけにスタイルを適用させる「first-child疑似クラス」があります。 最初の「子要素」なので「first-child」です。

この疑似クラスを使うと、ある範囲のうち「先頭の段落」のみにスタイルを適用することができます。 これを活用すれば、ドロップキャップを先頭の段落にのみ適用させることも簡単です。

※first-child疑似クラスは、IE6まではサポートされていませんでしたが、IE7からサポートされました。（この記事では、IE6以下への対策も紹介しています。）

MacIEの対策

この記事の冒頭に掲載したドロップキャップのサンプルは、Mac版IEでも問題なく見えているはずです。 それは、ドロップキャップの対象になっている先頭の文字が半角文字だからです。 これが日本語などの全角文字（2バイト文字）になっていると、Mac版IEでは文字化けしてしまいます。

その対策として、Mac版IEにだけはドロップキャップの装飾が無視されるようにスタイルシートを書く方が良いでしょう。

【目次】

• 1. first-letter疑似要素でドロップキャップを作る >>
• 2. first-child疑似クラスで「最初の段落」にだけ適用 >>
• 3. Mac版IEでの文字化けを避ける >>