第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の使い方を実用サンプルで学ぶ
-
XHTMLとCSSの基礎から学び、Web標準のホームページを作成。正しいマークアップや効率的な運用方法も。
- XHTML & CSS 実践講座
ドロップキャップは古くからあるテクニックで、イメージとしては英語の書籍や新聞という感じでしょうか？なのでフォントはセリフ体がつかわれることが多いような気がします。
では次回もお楽しみに。
（こう
）
お問い合わせ
メルマガ