2008.05.22

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

イメージ：CSS 3の段組みと、その使いどころ

一歩先のWeb標準 ♯13
ゆう（我的春秋）

バックナンバー

こんにちは！　最近、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-after	auto \| always \| avoid	段区切り。ページ区切りの page-break-after プロパティ（もしくは、いわゆる clearfix）と似たようなイメージ
column-break-before	auto \| always \| avoid	段区切り。ページ区切りの page-break-before プロパティ（もしくは、いわゆる clearfix）と似たようなイメージ
column-span	1 \| all	カラム跨ぎ。all なら全てのカラムを跨いで表示し、1 なら跨がずに表示する
column-fill	auto \| balance	すべてのカラムのコンテンツが均等になるようにするか否か

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

次ページでは、実際の使いかたについて説明します。