第5回
CSSでドロップキャップ(先頭文字を大きくする)テーブルレイアウトを卒業しよう

CSSでドロップキャップ(先頭文字を大きくする)

今回は、CSSでドロップキャップを実現する方法がテーマです。 ドロップキャップとは、段落の先頭文字を大きく数行分にわたって表示し、アイキャッチ効果をねらうレイアウト手法のことをいいます。

ドロップキャップ

こういうやつですね。

この先頭文字のみ、というのがポイントです。CSSではこの先頭の文字を非常に簡単に指定することができます。疑似要素first-letterを使います。これはブロック要素と併用することで、そのブロック要素の先頭の1文字目を指定することができます。 たとえば、

p:first-letter{
    font-size: 3em;
}

こうすると、p要素の先頭の文字が3em、つまり3文字文のサイズになります。

あとは、先頭の文字以降が回り込んでくれればドロップキャップ完成です。回り込み、ということは、floatです。

そして行の高さや2文字目との間隔、下段との間隔を微調整します。

<p> Lorem ipsum dolor sit amet, consectetur adipisicing...</p>
p{
    width: 500px;
    font-family: Georgia, "Times New Roman", Times, serif;
}

p:first-letter {
    font-size: 3em;
    line-height: 1;
    float: left;
    margin: 0 .2em 0 0;
    padding: .1em 0;
}

するとこのような表示になります。

ドロップキャップ

ドロップキャップは古くからあるテクニックで、イメージとしては英語の書籍や新聞という感じでしょうか?なのでフォントはセリフ体がつかわれることが多いような気がします。

では次回もお楽しみに。

(こう鈴木 航 (すずきこう)

次のページは…
CSSでリストをパンくずリストにする【1】
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読