DropCapsを使ったレイアウト

雑誌などによくある文字の先頭を大きく表現する方法をDropCapsといいます。WebでもCSSを利用して同じような雑誌風の表現をすることができます。コラムなどテキストベースで段落が続くようなサイトの場合にはちょっとしたインパクトを与えたいときに使えそうな表現かもしれません。

先頭文字にDropCapsを適用

各段落の1文字目を大きく見せるためのスタイルを記述します。
「first-letter」という擬似要素を使うことで最初の文字に対してスタイルを適用させることができます。

p:first-letter {
  float: left;
  padding: 12px;
  margin-right: 10px;
  font-size: 4em;
  line-height: 1;
}

1文字目を4倍の文字サイズで左に回り込ませるように指定をしています。
font-sizeの単位はパーセントでも構いませんが、emの方が何文字分の大きさで表示するか設定できるので、単純でわかりやすいかと思います。

• DEMO

文字サイズを大きくするだけでなく、背景などをつけて装飾するとより印象的な表現になります。

p:first-letter {
  float: left;
  padding: 12px;
  margin-right: 10px;
  font-size: 4em;
  line-height: 1;
  background: #008DCB;
  color: #fff;
}

上記では、全段落に同じ背景色がつきますが、デモでは、段落ごとにclassをつけて色を変えてあります。サイトのテイストに合わせていろいろ作ってみるとよいと思います。

• DEMO