マルチカラムレイアウトサンプル
では、これまで見てきたマルチカラム機能を使ったデザインサンプルを作ってみましょう。完成形は図13のようになります。
見出しを別ボックスでマークアップ
サンプルのマークアップは次のようになります。headerというID名のdivボックスを作り、見出しを含めました。続いてarticleというID名のdivボックスに本文を入れます。
<div id="header"> <h1>はだかの王さま</h1> <h2>ハンス・クリスチャン・アンデルセン（大久保ゆう訳）</h2> </div> <div id="article"> <p>むかしむかし、とある国のある城に王さまが住んでいました。王さまはぴっかぴかの新しい服が大好きで、服を買うことばかりにお金を使っていました。王さまののぞむことといったら、いつもきれいな服を着て、みんなにいいなぁと言われることでした。戦い ～略～
見出しと本文を別のボックスにすることで、Firefoxでも段をまたいで見出しを表示できます。ここでは、ヘッダとフッタには、グレー（#ccc）の背景色を指定しました。
div#header, div#footer {
min-width: 900px;
margin: 0 auto;
padding: 20px;
background-color: #ccc;
}
また、本文の表示領域は「min-width: 900px;」とし、領域の最小幅を900pxで指定しました。これによりウィンドウサイズを900pxより狭めると横スクロールバーが表示され、900px以上はいくらでも広がる仕様になっています。これは後で指定する挿絵の表示領域を確保したいためです。
div#article {
padding: 20px;
min-width: 900px; /* 最小幅は900px */
}
本文は、「columns: 2 400px;」を指定して最大で2段組み、段の最小幅400pxで指定しました。「column-gap: 40px;」で、段と段の間の幅は40pxに指定、「column-rule: 1px dotted #ccc;」で段の区切り線を1pxのグレーの点線で指定しました。
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のようになります。
このサンプルのコンテンツには、挿絵が含まれます。挿絵は次のように、figというクラス名のdivで囲みます。
<div class="fig"><img src="fig46319_02.png" width="655" height="467" alt="挿絵2" /></div>
この時、画像の幅は655pxあるので、ウィンドウ幅を広げて、1段の幅は655px以上あるときは、挿絵の画像は問題なく表示されます。
しかし、ウィンドウ幅を縮めてたて、段の幅が654px以下になってしまった時は、画像が途中までしか表示されません。
1段の最小領域は400pxなので、挿絵画像に対し、「max-width: 400px;」を指定して、画像の最大幅を400pxで表示するようにしましょう。この時、「height: auto;」を指定しておくことで、画像の横の表示サイズが変わっても縦横比を保持したまま画像を表示できます。
div.fig img {
max-width: 400px;
height: auto;
}
まとめ
最終回となる今回は、CSS3のマルチカラム機能を使ったスタイリングを紹介しました。コンテンツの分量が長くなっても均等に分割され、高さを意識することがないので、これまでのfloatによる段組みレイアウトと比べ、とても簡単に実装できます。段を増やしたり、減らしたりするのもcolumn-countプロパティの値を変えるだけなので、とっても便利です。ただしあまりに段数を増やしすぎると、逆に読みにくくなってしまうので注意しましょう。
