CSS 3 の段組みとその使いどころ

こんにちは！最近、iPod Touch を入手するも、なかなか遊べてない（hack できてない？）ゆうです。

さて、WithD をご覧になられる方には、DTP を兼務（もしくは専業と）されている方も少なくないはず！と…そこで、今月は CSS で段組みを行うために策定中の規格について取り上げてみることにしました。

DTP専用アプリケーションや TeX（組版マークアップ言語処理系。テフ、テック、テッヒなどと読みます）などに比べればまだまだ劣るとはいえ、CSS でも着々と DTP 的なスタイルが扱えるようになりつつあります。

今回紹介する段組の規格（例によって草稿段階）を、先月紹介した Web Fonts Module（Web Fonts、CSS 3までの流れと適用方法） と併用すると、かなり紙媒体書籍の版面イメージに近づけることが実感していただけるかと思います。

CSS 3 Multi-column module

段組みのスタイルについては、CSS3 Multi-column layout module で定義されています。

ちなみに、ここでいう "Multi-column" とは、いわゆるナビゲーション部とコンテンツ部を分けて配置する２カラム・３カラムレイアウトのことではなく、組版でいうところの「段組み」に相当するものです。

定義されているプロパティは次のとおり。

プロパティ名値の書式説明
column-width<長さ> | autoカラム幅
column-count<整数> | auto段組のカラム数
columns[ [ <整数> | auto] || [ <長さ> | auto] ]column-count, column-width のショートハンド
column-gap<長さ> | normalカラム間の余白の幅
column-rule-color<color> | transparentカラム間の境界線の色
column-rule-style<border-style>カラム間の境界線の線種
column-rule-width<border-width>カラム間の境界線の太さ
column-rule<border-width> || <border-style> || [ <color> | transparent ]column-rule-color, column-rule-style, column-rule-width のショートハンド
column-break-afterauto | always | avoid段区切り。ページ区切りの page-break-after プロパティ（もしくは、いわゆる clearfix）と似たようなイメージ
column-break-beforeauto | always | avoid段区切り。ページ区切りの page-break-before プロパティ（もしくは、いわゆる clearfix）と似たようなイメージ
column-span1 | allカラム跨ぎ。all なら全てのカラムを跨いで表示し、1 なら跨がずに表示する
column-fillauto | balanceすべてのカラムのコンテンツが均等になるようにするか否か

なお、この multi-column layout module と非常に関連の深い、注目の規格として、CSS 3 Grid Positioning Module と CSS 3 Advanced Layout Module があります。本来、セットで紹介したかったところなんですが、紙幅の都合でこれらの紹介は、また別の機会ということにします。

使いかたは？

適用のしかたは簡単。たとえば body 直下の内容を３段組にして、各カラムの間に 20px分の余白を空けたい場合なら、次のように記述します。column-gap の代わりに column-width でカラム幅（段幅）を指定しても良いでしょう。

body {
	column-count: 3;
	column-gap: 20px;
}

このほか、必要に応じて段区切りを設定します。セクション構造をマークアップしている場合は column-break-after か column-break-before を使い、body 直下にフラットに見出し（h1-h6）や段落（p）などを配しているなら column-span を利用することになります。

新聞のように、カラムとカラムの間に仕切り線を入れたい場合は、column-rule で指定します。これは border とまったく同じで、色・太さ・線種を指定するだけなので説明は不要でしょう。

試用できる UA は？

先行実装している UA については、2008年5月時点では、Firefox 1.5以降 と Safari 3以降が部分対応しています。関心のある方は、是非試してみてください。特に Safari 3 をお持ちの方向けに、前回紹介した Web Fonts も適用したサンプルも用意しましてみました。

（-moz- という prefix がついているものが Firefox をはじめとする Gecko 系ブラウザで対応しているもの、-webkit- という prefix のものが Safari など Webkit 系ブラウザで対応しているプロパティになります。）

閲覧メディアの違いに注意

この CSS 3 Multi-column と Grid Positioning、特に DTP も手掛けているデザイナーさんには、かなり魅力的な選択肢に映るのではないでしょうか？

でもちょっと待ってください。

DTP の場合、出力先である紙メディアのサイズは原則として固定です。しかし、ウェブの場合、スクリーンメディア…つまりディスプレイモニタのサイズや、ブラウザのウィンドウサイズは人によってまちまちですよね。

このメディア（媒体）の特性の違いはとても重要です。

スクリーンメディアではカラム高がネック

スクリーンメディアで段組みを適用する場合、特に問題となるのはカラム高です。

ディスプレイやウィンドウの横幅が、ページ幅を越えてしまうだけなら、最悪、ページを横に横にスクロールさせていくだけですみます。（もちろん、これも回避したいことは言うまでもないでしょう。）

ですが、横組みが基本のウェブの場合、カラムの高さがディスプレイやウィンドウの高さよりも大きくなってしまうと、たとえページ幅が有効画面幅内におさまっていたとしても、カラムの数だけ、上下に往復スクロールさせなくてはならなくなります。

さきほどのサンプルページがそう。（それと実感してもらえるように意図的に縦に長く組んでいます。）一段目の下まで読んだ後に、またページ先頭までスクロールさせて戻らないと続きが読めません。これではかえって不便ですよね。

Firefox 3 でのスクリーンショット: 小さいディスプレイでの段組表示は、縦横両方のスクロールを頻繁に行う。

また似たようなシーンとして、たとえば iPod Touch（もしくは iPhone）の Safari は、PC用にデザインされたウェブページでも、マルチタッチズームやスクロールがサクサク動いて、一見 とても心地よく閲覧できます。

でも利用する時間や頻度が増えてくると、次第に縦横両方のスクロール頻度の多さに辟易してきて、一回の縦スクロールですむ Mobile Opera のスモールスクリーンモードの方が快適に感じてこられる方も少なくないのではないでしょうか？

スクリーンメディア用の対策は？

上のような理由で multi-column module は、どうしても印刷用スタイル向けになってしまうと思いますが、必ずしもスクリーンメディアでの採用が絶望的というわけではありません。

一定の制約はありますが、一応、JavaScript や（将来的には）以前にも紹介したCSS Media Types（→ 小型携帯端末向けスタイルの分岐方法 - CSS 3 Media Queries）を利用して、有効画面サイズに応じたレイアウトを返す手段はいくつかあります。（ただし、工数は確実に、かつ大抵の場合は大幅に増えます。）

いずれにしても重要なのは、閲覧メディアの特性に合わせてレイアウトをデザイン（設計）することです。

段組みを採用する場合、紙メディアなら紙に、スクリーンメディアなら画面…つまりディスプレイやウィンドウサイズを基準に最適化することになります。後者の場合、大きさや縦横比は無限に近いバリエーションがあるので、紙メディアよりはるかに柔軟な設計が求められるのは自明でしょう。

本来 段組みは、一行あたりの文字数を読みやすい長さに調整するためのデザインです。一行あたりの文字数は、少なすぎても多すぎても可読性を損なってしまいます。そのあたりの意義を踏まえて、最適な採用シーン、採用しないシーンを的確に選択できるようになりたいですね。