ドロップキャップをCSSで実現する方法

2016-02-12

段落の文字の1つ目を大きくして目立たせる手法です。正式名称を「ドロップキャップ」というそうです。英字新聞などではよく見る文章の書き出しですね。

日本ではあまり使われる書き方ではありませんが、CSS だけで実現可能なののでやってみたいと思います。

drop-cap

Drop Cap

CSS

.dropcap:first-letter {
    font-size: 60px;/*文字の大きさ*/
    margin-right: 6px;
    margin-top: 6px;
    float: left;
    line-height: 1;/*必要*/
}

HTML

<p class="dropcap">ドロップキャップは英字新聞などで・・・</p>

例

ドロップキャップは英字新聞などでは、よく見る手法ですが日本語で使われることはほとんどありません。CSS だけで1文字目だけ選択することが出来、それを使うことでブログの文章などでもドロップキャップを実現することが可能です。ワンポイントのように使ったり、記事の1文字目を必ず大きくしたりとそれなりに使えるかもしれません。

className で dropcap を付けた段落の1文字目を大きくします。セレクタ内の1文字目を指定する擬似要素 :first-letter と float を利用することで実現します。color や text-shadow、font-weight なども指定可能なので追加、変更してみても面白そうです。

コード内の font-size は元々の font-size と line-height の兼ね合いがあるので、em など相対値ではなかなか上手くいきません。2em などでいけそうなのですがズレてしまいます。どのぐらいの大きさにしたいか考えて各自調整してください。

line-height: 1 に関しては chrome 系の表示誤差吸収のため必要な記述です。margin-top、left は文字の位置の微調整に使います。こちらも各自で設定が必要な値となります。