スタイルシートでドロップキャップを作る(2ページ目)

first-letter（ファーストレター）疑似要素を使うには

先頭の1文字にだけスタイルを適用させる「first-letter疑似要素」は、以下のようにして使います。

例えば、段落（p要素）の先頭1文字だけを赤色にしたい場合は、以下のように記述します。

これを使って、ドロップキャップを作ります。

first-letter疑似要素でドロップキャップを作る

ドロップキャップを作る最小限のスタイルシートソースは、次のようになります。

font-sizeプロパティで文字サイズを大きくし（ここでは2.7倍）、floatプロパティで左端に寄せています。 floatプロパティを使って左端に寄せると、続く内容は右側に回り込むようになります。 3行目のline-heightプロパティは、この段落自体にline-heightプロパティを使って行間が指定されているとき、ドロップキャップ部分の行間がそれに影響されるのを防ぐために必要です。

表示例は以下の通りです。

floatプロパティで左端に寄せ、font-sizeプロパティで大きめに表示させれば、それだけでドロップキャップになります。 ただ、色を加えた方がより目立つようになるでしょう。

さらに色や余白などの装飾を加えると、以下のようなソースになります。

このソースを使って表示すると、以下のような感じになります。

background-colorプロパティで背景色を赤色にし、colorプロパティで文字色を白色にしています。 さらに、内側の余白を3px設けて反転表示を読みやすくし、外側の右側に3pxの余白を設けて、隣接する文字と少し間隔を取っています。

このままだと、すべての段落で先頭文字がドロップキャップになってしまいます。 ある範囲の「先頭の段落」にのみ適用されるようにしてみましょう。

「最初の段落」にだけ適用させる方法は… >>