【レビュー】文字を回り込ませるCSSテクニック | エンタープライズ

【レビュー】

文字を回り込ませるCSSテクニック

後藤大地　 [2010/06/09]

SitePoint: New Articles, Fresh Thinking for Web Developers and Designers

日本語の文章ではあまりみかけないデザインだが、英語の文章では最初の文字だけ大きくして、以降の文字は通常の文字サイズで表記するというデザインを使うことがある。大きな文字の部分を四角にみたてて周り込ませることもあれば、その文字の形に合わせて回り込ませることもある。

これは文字にかぎらず、画像を配置する場合のテクニックとしても利用できる。文章のはじまりに画像やイラストを配置しておき、その画像を回り込むようにテキストを流し込む方法だ。このデザインをCSSで実現するテクニックがDrop Cap: The Next GenerationにおいてJames Edwards氏から紹介されている。James Edwards氏がサンプルとして掲載しているものをベースに、日本語の文章に適用したものを次に掲載しておく。p要素の中のspan要素の使い方に注目してみてほしい。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Drop Cap Demo</title>
<style type="text/css">
p
{
  font-size: 0.73em;
  position: relative;
  float: left;
  clear: none;
  font-family: tahoma,sans-serif;
  color: #224;
  margin: 10px 0 0 10px;
  width: 50%;
  line-height: 1.3;
}
p > strong.first-letter
{
  position:absolute;
  left:0;
  top:0;
  font-family:garamond,times,serif;
  color:#004;
  font-size:12.5em;
  line-height:0.72;
  text-shadow:0.01em 0.01em 0.02em rgba(0,0,50,0.5);
}
p > .slice
{
  float:left;
  clear:left;
  display:block;
  background:transparent;
  height:1.2em;
  line-height:1;
  margin:0 8px 0 0;
}
p > .s1 { width:10.0em; }
p > .s2 { width:10.5em; }
p > .s3 { width:11.0em; }
p > .s4 { width:11.5em; }
p > .s5 { width:11.2em; }
p > .s6 { width:11.0em; }
p > .s7 { width:10.2em; }
p > .s8 { width: 8.8em; }
</style>
</head>
<body>
<p>
 <span class="slice s1"></span>
 <span class="slice s2"></span>
 <span class="slice s3"></span>
 <span class="slice s4"></span>
 <span class="slice s5"></span>
 <span class="slice s6"></span>
 <span class="slice s7"></span>
 <span class="slice s8"></span>
 <strong class="first-letter">O</strong>peraの最新開発版となるOpera 10.60 Alphaが公開された。Windows版、Mac OS X版、FreeBSD版、Linux版が提供されている。10.60 Alphaは特にスピードの高速化に主眼をおいたバージョンと説明されており、グラフィックライブラリVegaとJavaScriptエンジン Carakanにチューニングが実施されているという。明によれば、Peacekeeperのベンチマーク結果で、10.50と比較して76%の高速化、10.10 と比較して265%の高速化が計測されたという。Sunspiderでも高速化が確認されたと説明されており、 10.50では429msかかった結果が、10.60では394.6msまで短縮されたと報告されている。
</p>
</body>
</html>

サンプルの閲覧例 Firefox 3.6.3

このテクニックのアイディアは、回り込ませたい領域をspan要素を積み重ねて確保するというものだ。span要素を積み重ねて領域を確保し、その個々のspan要素の箱の幅と高さをCSSで指定している。横長の長方形領域が文字を回り込ませたい部分に配置されることになり、これを避けるようにそのあとに記述した文字列が回り込んでいくという仕組みになっている。span要素が煩雑さを生むという懸念があるほか、幅や高さはフォントや図に合わせて手動で調整する必要がある。しかし、既存の文章にCSSとspan要素を追加するだけでよく、細かい調整も手動で作業しやすい。

Drop Cap: The Next Generationにはテキストのみならず、先頭に画像を配置した場合のサンプルも紹介されている。p要素にbackground: url()で画像を指定し、これに対して回り込みがおこるように設定している。