ドロップキャップを表現する


雑誌などでもよく見る「ドロップキャップ」を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には適用していないのでその点はご注意を。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る