デザインサンプルで学ぶCSSによるスタイリング～「テキスト（マルチカラム）」編

CSSで作るWeb用パーツ（9）

マルチカラムレイアウトサンプル

　では、これまで見てきたマルチカラム機能を使ったデザインサンプルを作ってみましょう。完成形は図13のようになります。

図13　サンプル（sample07.html）上：上部、下：下部

見出しを別ボックスでマークアップ

　サンプルのマークアップは次のようになります。headerというID名のdivボックスを作り、見出しを含めました。続いてarticleというID名のdivボックスに本文を入れます。

リスト9　マルチカラムレイアウトサンプル（テキストは青空文庫「はだかの王さま」より）／HTML（sample07.html）

<div id="header">
<h1>はだかの王さま</h1>
<h2>ハンス・クリスチャン・アンデルセン（大久保ゆう訳）</h2>
</div>
<div id="article">
<p>むかしむかし、とある国のある城に王さまが住んでいました。王さまはぴっかぴかの新しい服が大好きで、服を買うことばかりにお金を使っていました。王さまののぞむことといったら、いつもきれいな服を着て、みんなにいいなぁと言われることでした。戦い
～略～

　見出しと本文を別のボックスにすることで、Firefoxでも段をまたいで見出しを表示できます。ここでは、ヘッダとフッタには、グレー（#ccc）の背景色を指定しました。

リスト10　見出しを#headerに含め、段をまたいで表示させる／CSS（sample07.html）

div#header, div#footer {
  min-width: 900px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ccc;
}

　また、本文の表示領域は「min-width: 900px;」とし、領域の最小幅を900pxで指定しました。これによりウィンドウサイズを900pxより狭めると横スクロールバーが表示され、900px以上はいくらでも広がる仕様になっています。これは後で指定する挿絵の表示領域を確保したいためです。

リスト11　見出しを#headerに含め、段をまたいで表示させる／CSS（sample07.html）

div#article {
  padding: 20px;
  min-width: 900px; /* 最小幅は900px */
}

　本文は、「columns: 2 400px;」を指定して最大で2段組み、段の最小幅400pxで指定しました。「column-gap: 40px;」で、段と段の間の幅は40pxに指定、「column-rule: 1px dotted #ccc;」で段の区切り線を1pxのグレーの点線で指定しました。

リスト12　マルチカラムの指定／CSS（sample07.html）

div#article {
  padding: 20px;
  min-width: 900px; /* 最小領域は900px */
  margin: 0 auto;
  -moz-columns: 2 400px; /* Firefox向け */
  -webkit-columns: 2 400px; /* Chrome, Safari向け */
  columns: 2 400px;
  -moz-column-gap: 40px;
  -webkit-column-gap: 40px;
  column-gap: 40px;
  -moz-column-rule: 1px dotted #ccc;
  -webkit-column-rule: 1px dotted #ccc;
  column-rule: 1px dotted #ccc;
  line-height: 1.5em;
}

　ここまでで図14のようになります。

図14　サンプル（sample07.html）

　このサンプルのコンテンツには、挿絵が含まれます。挿絵は次のように、figというクラス名のdivで囲みます。

リスト13　挿絵のマークアップ／HTML（sample07.html）

<div class="fig"><img src="fig46319_02.png" width="655" height="467" alt="挿絵2" /></div>

　この時、画像の幅は655pxあるので、ウィンドウ幅を広げて、1段の幅は655px以上あるときは、挿絵の画像は問題なく表示されます。

図15　1段の幅が655px以上ある時は画像も問題なく表示される（sample07.html）

　しかし、ウィンドウ幅を縮めてたて、段の幅が654px以下になってしまった時は、画像が途中までしか表示されません。

図16　1段の幅が654以下の時は画像が全て表示されない（sample07.html）

　1段の最小領域は400pxなので、挿絵画像に対し、「max-width: 400px;」を指定して、画像の最大幅を400pxで表示するようにしましょう。この時、「height: auto;」を指定しておくことで、画像の横の表示サイズが変わっても縦横比を保持したまま画像を表示できます。

リスト14　挿絵の幅を最大400pxに指定／CSS（sample07.html）

div.fig img {
  max-width: 400px;
  height: auto;
}

図17　左：「height: auto;」の指定がない時。右：「height:auto;」指定時（sample07.html）

まとめ

　最終回となる今回は、CSS3のマルチカラム機能を使ったスタイリングを紹介しました。コンテンツの分量が長くなっても均等に分割され、高さを意識することがないので、これまでのfloatによる段組みレイアウトと比べ、とても簡単に実装できます。段を増やしたり、減らしたりするのもcolumn-countプロパティの値を変えるだけなので、とっても便利です。ただしあまりに段数を増やしすぎると、逆に読みにくくなってしまうので注意しましょう。

参考資料

• CSS Multi-column Layout Module