ドロップキャップを表現する
雑誌などでもよく見る「ドロップキャップ」をCSSで表現する方法。
<div class="entry"> <p class="dr">ドロップキャップを実現するにはCSSの擬似要素でfirst-letterというものを使用します。なお、IE6で実現するにはp要素にも指定します。</p> </div>
div.entry p.dr:first-letter {
font-size: 200%;
float: left;
line-height: 1;
background-color:#0000FF;
color: white;
padding: 5px;
margin-right: 5px;
}
IE6に適用させるためにp要素にも指定します。
またMac版のIEには適用していないのでその点はご注意を。
