CSSドロップキャップ

最初の一文字目を大きく表示することをドロップキャップといいます。マイクロソフトワードの場合ですとメニューバーの書式からドロップキャップを選択すれば可能です。

CSSでこれと同等のもを実現する為にはfirst-letter擬似要素を使用します。A要素のhoverなどと同じようにコロン（:）をつけて使用します。


		<p class="dc">CSSを利用すれば1文字目の文字を大きくすることが可能です。まるで印刷物のようなイメージを与えることが可能です。first-line擬似要素でA要素のhoverなどと同じようにコロン（:）をつけて使用します。</p>


		.dc:first-letter{font-size: 200%;}

dcクラスが設定された要素の1文字目を倍の大きさにします。このままでは1文字目が大きくなるだけで頭が飛び出してしまうのでfloat: left;を設定して後続要素を回り込ませます。回り込みにより後続要素と1文字目の上が揃います。
余白の調整のためmargin:0 10px 0 0;などのmarginを設定します。
これ以外にも文字色やスタイル（太字、斜体）フォントの種類などの指定も可能です。


		.dc:first-letter{
font-size:200%;
color:#ff0000;
float: left;
margin:0 10px 0 0;
}

CSSを利用すれば1文字目の文字を大きくすることが可能です。まるで印刷物のようなイメージを与えることが可能です。first-line擬似要素でA要素のhoverなどと同じようにコロン（:）をつけて使用します。