CSS 先頭の一文字を大きくするドロップキャップの実施方法 – How to markup the drop cap.

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

Good evening!今回のネタは【CSS 先頭の一文字を大きくするドロップキャップの実施方法】です。古い手ではありますが英語サイトなどでは比較的よく見かける手法かと思います。実施方法は非常に簡単ですので、ここに書いておきたいと思います。


<p>Drop cap demo.This is dammy tex……</p>


p:first-letter {
    margin: 0 10px 0 0;
    padding: 10px 0 0 0;
    line-height:100px;
    float: left;
    font-size: 130px;
}

あとはem指定にしたり、px指定にしたり、任意のサイズにしたり…等々、好みに合わせてカスタマイズを試してみていただければ幸いです。
以上になります。