CSS3 モジュール：マルチカラムレイアウト

2007-06-06 W3C 草案

原文: http://www.w3.org/TR/2007/WD-css3-multicol-20070606
原文の編集者: Håkon Wium Lie, Opera Software, howcome@opera.com
訳注: Jintrick.netによる意訳です。正確な情報と異なる可能性に留意してください。

概要

このモジュールは、CSSにおけるマルチカラムレイアウトを説明する。これはCSS3ボックスモデルモジュールに基づいており、要素の内容を複数行にする機能を追加する。

この文書の状態

このセクションはこの文書の公開時の状態を説明する。他の文書がこの文書に置き換わる可能性がある。現在のW3C公開文書のリストおよびこのテクニカルレポートの最新版は W3C technical reports index at http://www.w3.org/TR/.より閲覧可能である。

草案としての公開は、W3Cメンバーシップによる保障を意味するものではない。これは草稿なので、更新、置換、他の文書による風化の可能性が常にある。進行途上以外のものとしてこの文書への言及することは望ましくない。

(アーカイブされた)公開メーリングリストwww-style@w3.org (instructions参照)はこの仕様書の議論に向いている。電子メールを送る場合、なるべくなら “[css3-multicol] コメントの要約...”のように、件名に"css3-multicol"を含めてほしい。

この文書は、CSSワーキンググループ（ Style Activityの一部）によって作成された。

この文書は5 February 2004 W3C Patent Policyの下活動するグループによって作成された。W3Cはこのグループの提出書類に関連して作成された全特許権情報の開示リストを管理している。このページには特許権情報を開示する手順も記載されている。Essential Claim(s)に該当すると思われる特許の実知識をお持ちの方は、ぜひW3C特許ポリシー第6節に従って情報を開示して頂きたい。

この文書は数年CSSワーキンググループの草案のままである。マルチカラムレイアウトは伝統的に印刷に用いられる一方、スクリーンでは実験的であると考えれてきており、改良のためには実装と実験が必要であると思われる。いくつかの実装は過去何年かにわたって行われており、実装者のみならず作成者、利用者からの有用なフィードバックの結実がこの草案である。

1. 他のモジュールへの依存関係
2. 序論
3. マルチカラムモデル
4. カラムの数と幅
- 4.1. ‘column-width’
- 4.2. ‘column-count’
- 4.3. ‘columns’
- 4.4. 擬似アルゴリズム
- 4.5. スタッキングコンテクスト
5. カラムギャップと罫線
- 5.1. ‘column-gap’
- 5.2. ‘column-rule-color’
- 5.3. ‘column-rule-style’
- 5.4. ‘column-rule-width’
- 5.5. ‘column-rule’
6. カラム解除
- 6.1. ‘column-break-before’
- 6.2. ‘column-break-after’
7. カラムのスパニング
- 7.1. ‘column-span’
8. カラムの飽和
- 'column-fill'
9. オーバーフローとマルチカラム要素
10. Conformance
謝辞
参考文献
- 規範的参考文献
- その他の参考文献
索引
プロパティ索引

1. 他のモジュールへの依存関係

このCSS3モジュールは以下のCSS3モジュールに依存している：

CSS3 ボックスモデル [CSS3BOX]
CSS3 背景・ボーダーモジュール [[!CSS3BACKGROUND]]
CSS3 カラーモジュール [CSS3COLOR]
CSS3 ページメディア [CSS3PAGE]
CSS3 ページメディアの生成コンテンツ[CSS3GCPM]

規範的ではない他のCSS3モジュールへの参照もある：

[[!CSS3VALUES]]

2. 序論

（このセクションは非規範的であり標準を定めたものではない）

このモジュールはCSSにおけるマルチカラムレイアウトを説明する。この文書に説明される機能を使うと、スタイルシートはマルチカラムにレイアウトされた要素の内容を宣言できる。

ウェブでは、tableがマルチカラムレイアウトを描くためにも用いられてきた。CSSに基づくカラムの利点はその柔軟性である。つまり内容は1つのカラムから別のカラムへ流れ込み、そしてカラムの数は画面サイズに依存して変化可能なのである。プレゼンテーション目的のtableマークアップを文書から除くことにより、それらは様々な出力デバイスで、より容易に表現可能になる。

マルチカラムレイアウトはCSSで容易に記述可能である。シンプルな例を挙げよう：

body { column-width: 12em }

この例では、body要素は少なくとも12emの幅にセットされている。実際のカラム数は許されるスペースに依存する。

カラムの数はスタイルシートで明示的にセットすることもできる：

body { column-count: 2 }

省略記法 ’columns’ プロパティで両方のプロパティを1つの宣言でセットすることが出来る。下の例は上の2つの例のプロパティ/値と同じものをセットしている。

body{ columns: 2 12em }

このモジュールの別のグループのプロパティは、カラム間の間隔と罫線を記述する。シンプルな例はこのようになる：

body{
    column-gap: 1em;
    column-rule: thin solid black;
}

上の例の最初の宣言は、2つの隣接するカラムのギャップを1emにセットしている。カラムのギャップはpadding領域に似ている。ギャップの中央では、'column-rule'プロパティで記述されるルールが適用されるであろう。'column-rule'プロパティの値はCSS borderプロパティのそれに似ている。'border'のように'column-rule'も混成プロパティなので、上の例はこれと同じである：

body{
    column-gap: 1em;
    column-rule-width: thin;
    column-rule-style: solid;
    column-rule-color: black;
}

プロパティ群の三番目のグループは、カラム解除がどこで起こるかを指定する：

h1 { column-break-before: always }
h2{ column-break-after: avoid }

最後に、'column-fill'及び'column-span'はマルチカラムレイアウトにおいてビジュアルな表現のより広い範囲をスタイルシートに与える。

div{ column-fill: balance }
h2{ column-span: all }

この仕様書は12の新しいプロパティを導入しており、それらは全て上述の例で使用されている。

全てのカラム関係のプロパティがそれぞれ初期値もっているとすれば、その要素のレイアウトは1カラムのマルチカラムレイアウトと全く同じになるであろう。

3. マルチカラムモデル

伝統的なCSSボックスモデルにおいて、要素の内容はその要素に対応したコンテントボックスに流し込まれる。マルチカラムレイアウトは、コンテントボックスとコンテントの間の新しいタイプのコンテナを導入する。すなわちカラムボックスである。1カラム以上の要素の内容は、カラムボックス内にブロック方向に流し込まれる。カラムボックス（カラムと呼ぶことにする）はインライン方向のマルチカラム要素のコンテントボックスに流し込まれる。

1カラム以上を持つ（あるいは持つことのできる）要素をマルチカラム要素（または単にmulticol）と呼ぶ。すなわち、マルチカラム要素は'auto'以外の'column-count'または'column-width'を持った要素である。マルチカラム要素の全てのカラムは、同じカラム幅、同じカラム高、同じギャップ幅となる。マルチカラム要素はCSS 2.1 セクション9.4.1のとおり、新しいフォーマッティングコンテクストを確立する。

カラム幅はカラムボックスのインライン方向の長さである。カラム高はカラムボックスのブロック方向の長さである。

カラムボックスにプロパティ/値をセットすることはできない。例えば、特定のカラムボックスの背景はセットできない。カラムボックスにはパディング、マージン、ボーダーの概念がない。（将来の仕様書が追加的な機能を加える可能性もある。例えば異なる幅のカラムとか異なる背景のカラムとかをサポートするかもしれない。）

同一要素内の隣接するカラム間には、カラムギャップとカラム罫線が存在しうる。

パディング（青）を持つマルチカラム要素のサンプルにカラムギャップ（黄色）とカラム罫線（緑）が示されている。青と黄は図解目的で示してあるだけである。実際の実装ではこれらは背景によって解決される。

この仕様書で説明される様々なプロパティの効果を説明するため、サンプル文書の複数のバージョンが使用される。これはサンプル文書のソースコードである。

<html>
<style>

div {
  column-width: 15em;
  column-gap: 2em;   /* shown in yellow */            
  column-rule: 4px solid green;
  padding: 5px;      /* shown in blue */
}
img { display: none }
</style>
<body>
<div>
Ab cde fgh i jkl. Mno
pqr stu vw xyz. A bc
<img src=...>
def g hij
...
</div>
</body>
</html>

この無意味に見えるテキストは、1つのカラムから別のカラムへと、どのように流れ込むのかを示すためのアルファベットである。単純化のため、別のサンプル内では原文を僅かに変えてある。

マルチカラムレイアウト内に登場するフロートは、そのフロートが登場するカラムボックスによって配置される。

この例では、このCSS断片が画像の表示方法を記述している。

img{ display: block; float: right }

黒いボックスは画像を表している。

カラムボックスはCSS 2.1 セクション10.1、item2に従い、ブロックレベル、テーブルセル、インラインブロックボックスのように振舞う。結果としてフロートはカラムボックスにしたがって配置される。しかしながら、カラムボックスは'position: fixed'、または'position: absolute'の要素の包含ブロックは確立しない。

次の例では、画像の幅がこのようにセットされている：

img { display: block; width: 100% }

この幅がカラムボックスに対し相対的に計算されているとすれば、画像はカラムボックスと同じ幅になる。

最初の要素の上部マージンと、最後の要素の下部マージンは通常の相殺のルールにしたがって、マルチカラム要素のマージンに相殺されている。マルチカラム要素をネストすることもできるが、実装依存の限界があると思われる。

4. カラムの数と幅

カラムの数と幅を判定するのは、マルチカラムな内容をレイアウトする際の基本である。ブロック方向が強要されず、スタイルシートを通じてカラム解除が追加されていないとき、これらの2つのプロパティが結果を決定する。

'column-count'
'column-width'

三番目のプロパティ、'column'は'clumn-count'と'column-width'双方をセットする簡略プロパティである。

'column-width'

名前	column-width
値	`<length>`\|auto
初期値	auto
適用対象	ブロックレベル要素
継承	no
パーセント値	N/A
媒体	視覚
算出値	the absolute length

'column-width'プロパティは適切なカラムの幅を記述する。実際のカラム幅はもっと広く（利用可能なスペースをフルに活用するため）、あるいは狭く（利用可能なスペースが示されたカラム幅よりも小さかった場合のみ）なり得る。

例えば、このようなスタイルシートでは：

div {
  width: 100px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}

100px幅の要素の内側に45px幅の空きが2つできるが、利用可能なスペースを満たすために、実際のカラム幅は50pxまで増えることになる。

同様に、このスタイルシートでは：

div {
  width: 40px;
  column-width: 45px;
  column-gap: 0;
  column-rule: none;
}

利用可能なスペースは明示されたカラム幅よりも小さく、そのため実際のカラム幅は縮小する。

'column-width'が縦書きテキストにも利用可能であることを保障するため、カラム幅はカラムの内側のラインボックスの長さとなっている。（'column-width'を多少フレキシブルにしたのは、多くのスクリーンサイズにフィット可能なscalable？デザインを達成するためである。）

'column-count'

名前	column-count
値	`<length>`\|auto
初期値	auto
適用対象	ブロックレベル要素
継承	no
パーセント値	N/A
媒体	視覚
算出値	specified value

'column-count'プロパティは、要素の内容が流れ込むカラムの理想的な正数を記述する。

body{ column-count: 3 }

'columns'

名前	columns
値	[ [ `<integer>` \| auto] \|\| [ `<length>` \| auto] ]
初期値	個々のプロパティ参照
適用対象	ブロックレベル要素
継承	no
パーセント値	N/A
媒体	視覚
算出値	個々のプロパティ参照

これは'column-width'と'column-count'をスタイルシートの同位置で設定するための省略記法プロパティである。2つの正しい値が明示されたとき、双方のプロパティはそれぞれ明示された値にセットされる。1つの値だけが明示されたときには、次のルールが適用される：

length値あるいは'auto'なら、'column-width'に明示された値がセットされ、'column-count'には初期値がセットされる。
正数値なら、'column-count'に明示された値がセットされ、'column-width'には初期値がセットされる。

擬似アルゴリズム

以下の擬似アルゴリズムは'column-count'（N）と’column-width’（W）に使用される値を決定する。擬似アルゴリズムには2つの異なる変数がある：

available-width: 'column-count'と'column-width'が決定されなければならないとき、マルチカラム要素の内容の幅が決定されていないならば、この変数はunknownとなり、さもなくばマルチカラム要素の内容幅と同じになる。
shrink-to-fit: この変数はshrink-to-fit計算の結果を表す。CSSは実際のアルゴリズムを定義しない。

この擬似アルゴリズムによって2つの仮定が設けられている。

ブロック方向は強制されていない
スタイルシートを通じてカラム解除の追加がない

floor()関数は数値を次の小さな正数に四捨五入する。

if ((column-width = auto) and (column-count = auto)) or
   ((available-width = unknown) and (column-count = auto)) then
  exit; /* no columns */
fi

if (available-width = unknown) and (column-count != auto) and (column-width != auto) then
  N := column-count;
  W := column-width;
  exit;
fi

if (available-width = unknown) then
  available-width := shrink-to-fit;
fi

if (column-width = auto) then
  if ((column-count - 1) * column-gap < available-width) then
    N := column-count;
    W := (available-width - ((N - 1) * column-gap))/N;
  elsif (column-gap >= available-width) then
    N := 1;
    W := available-width;
  else
    N := floor(available-width/column-gap);
    W := (available-width - ((N - 1) * column-gap))/N;
  fi
elsif (column-count = auto) then
  if (column-width >= available-width) then
    N := 1
    W := column-width;
  else
    N := floor((available-width + column-gap) / (column-width + column-gap));
    W := ((available-width + column-gap) / N) - column-gap;
  fi
elsif ((column-count * column-width) + ((column-count - 1 ) * column-gap) <= available-width) then
  N := column-count;
  W := column-width;
elsif (column-width >= available-width) then
  N := 1
  W := column-width;
else
  N := floor((available-width + column-gap) / (column-width + column-gap));
  W := ((available-width + column-gap) / N) - column-gap;
fi

（注意：殆どのケースにおいて'column-width'と'column-count'のどちらか一方のみがレイアウトに影響する。'column-width'が'auto'なら、'column-count'は無視される。'column-width'と'column-count'の両方がレイアウトに影響を与えるケースは、その要素の幅が決定されていないときである。これは、すなわち、テーブルセルとフロートのケースで起こりうる。）

スタッキングコンテクスト

マルチカラム要素内の全てのカラムボックスは、同一のスタッキングコンテクスト内にある。2つのカラムから内容がオーバーラップしているなら、同一のz-順にてそれらはツリー順に描画される。CSS 2.1 付録Eを超えて導入される新しい振る舞いはない。

5. カラムギャップと罫線

カラムギャップと罫線は、同一のマルチカラム要素のカラム間に位置する。カラムギャップとカラム罫線の数は、カラムの数に等しい。カラムギャップはスペースを消費する。つまり、カラムギャップは（同一マルチカラム要素内の）隣接するカラムの内容を押し離すのである。カラム罫線はカラムギャップの中央に位置する。カラム罫線はスペースを消費しない。つまり、カラム罫線の存在と太さは他のどの要素の位置も変化させない。カラム罫線はそのギャップよりも太い場合、隣接するカラムボックスにオーバーラップする。

カラム罫線は、通常フローの内容をもつカラム間にのみ描画される。

'column-gap'

名前	column-color
値	`<length>` \| normal
初期値	normal
適用対象	マルチカラム要素
継承	no
パーセント値	N/A
媒体	視覚
算出値	明示された値

'column-gap'プロパティはカラム間のギャップをセットする。カラム罫線がある場合、罫線はそのギャップの中央に現れる。

'normal'値はUA依存であるが、'1em'の値が提案されている。

カラムギャップは負の値を取れない。

'column-rule-color'

名前	column-rule-color
値	`<color>`
初期値	currentColor
適用対象	マルチカラム要素
継承	no
パーセント値	N/A
媒体	視覚
算出値	計算された'color'プロパティと同じ[CSS3COLOR]

このプロパティはカラム罫線の色をセットする。<color>値は[CSS3COLOR]に定義されている。

適合ユーザーエージェントには、[CSS21]に定義される色値のサブセットのサポートのみが要求される。

'column-rule-style'

名前	column-rule-style
値	`<'border-style'>`
初期値	none
適用対象	マルチカラム要素
継承	no
パーセント値	N/A
媒体	視覚
算出値	明示された値

'column-rule-style'プロパティは要素のカラム間のルールのスタイルをセットする。<'border-style'>値は[CSS21]に定義されている。

'inset'キーワード値は'ridge'値のように表示される。'outset'値は'groove'のように表示される。

'none'値は'column-rule-width'を'0'に強制する点に注意。

'column-rule-width'

名前	column-rule-width
値	`<‘border-width’>`
初期値	medium
適用対象	マルチカラム要素
継承	no
パーセント値	N/A
媒体	視覚
算出値	絶対値; カラム罫線のスタイルが'none'の時'0'、さもなくば'hidden'

このプロパティはカラム間の罫線の幅をセットする。負の値は許されない。

'column-rule'

名前	column-rule
値	`<‘border-width’>`\|\|`<'border-style'>`\|\|`<color>`\|transparent
初期値	個々のプロパティ参照
適用対象	マルチカラム要素
継承	no
パーセント値	N/A
媒体	視覚
算出値	個々のプロパティ参照

このプロパティは、'column-rule-width'、'column-rule-style'、'column-rule-color'をスタイルシートの同じ場所でセットするための省略記法である。

6. カラム解除

内容がマルチカラムにレイアウトされる時、ユーザーエージェントはどこでカラムを終了するかを決定しなければならない。内容をカラムに分割する際に起こる問題は、ページに内容を分割する場合のそれと似ている。CSS3ページメディア[CSS3PAGE]では内容をページ間に分割するための規則が述べられている。この仕様書ではカラム解除に関して同じ規則を規定するが、次の違いがある：

カラム解除を示すプロパティは（'page-break-before'、'page-break-after'ではなく）'column-break-before'および'column-break-after'である。'page-break-inside'プロパティは、要素内部においてカラム解除が回避されるべきであることを示すのに使用することができる。
改ページは常にカラム解除を発生させるが、その逆は起こらない。したがって当然、改ページとカラム解除が共に明示された時には改ページが起こる。

（改ページとカラム解除の規則は似ているので、カラム解除の発生する箇所ではマージンがゼロにセットされる。）

'column-break-before'

名前	column-break-before
値	auto \| always \| avoid
初期値	auto
適用対象	ブロックレベル要素
継承	no
パーセント値	N/A
媒体	視覚
算出値	明示された値

'column-break-after'

名前	column-break-after
値	auto \| always \| avoid
初期値	auto
適用対象	ブロックレベル要素
継承	no
パーセント値	N/A
媒体	視覚
算出値	明示された値

7. カラムのスパニング

'column-span'プロパティは、要素がいくつかのカラムをまたぐことを可能にする。

'column-span'

名前	column-span
値	1 \| all
初期値	1
適用対象	静的な、浮動していない要素
継承	no
パーセント値	N/A
媒体	視覚
算出値	明示された値

このプロパティは要素がどれだけのカラムをまたぐかを指定する。

1: 複数のカラムをまたがない
all: 要素は全てのカラムをまたぐ。その要素の前に現れる通常フローの内容は自動的にその要素の登場以前の全てのカラムを通じてバランスがとられる。

1つ以上のカラムをまたぐ要素を「スパニング要素」と呼ぶ。

この例では、サンプル文書の4番目のアルファベットの最初のセンテンス（即ち"jkl"の次）の後に、h2要素が追加されている。このスタイルは：

h2 { column-span: all; background: silver }
img { display: none }

'column-span'を'all'とすることにより、h2要素の前に登場する全ての内容はh2要素よりも先に表示される。

8. 3カラムの飽和

カラムを飽和させる戦略は2つある。カラムが平均化されるか、されないかだ。カラムが平均化されると、UAは異なるカラム間で内容が平均化されるように努める。さもなくば、カラムは順番に満たされていく。どのケースにおいても、UAは'windows'と'orphan'プロパティを与えるよう努めるべきである。

'column-fill'

名前	column-fill
値	auto \| balance
初期値	balance
適用対象	マルチカラム要素
継承	no
パーセント値	N/A
媒体	ページ
算出値	明示された値

各値は：

balance: カラム間の内容を可能な限り等しく平均化する
auto: カラムを順番に埋めていく

連続的なメディアでは、このプロパティはカラムの数が指定された時にのみ考慮される。さもなくば、カラムは自動で平均化される。

9. 3オーバーフローとマルチカラム要素

カラムギャップにはみ出した内容（即ちカラムボックスよりも幅and/or高さのある長い単語やフロート）は、カラムギャップの中央で切り取られる。マルチカラム要素の端に位置するカラムボックスの外側にはみ出した内容は、'overflow'プロパティに基づいて切り取られる。（しかしながら、ある内容（例えばフロート）は他のカラムに割り込み得る）

マルチカラム要素は持っている余裕よりも多くのカラムを持つことができるが、それは次に起因する：

制限されたカラム高。高さは、マルチカラム要素に適用するルール、あるいは、ページメディアではそのページのサイズによって制限され得る。

この例では、マルチカラム要素の高さが上限の高さに制限されており、スタイルシートはオーバーフロー内容が可視であるべきことを明示している。

div {
    max-height: 5em;
    overflow: visible;
}

結果としてカラムの数が増えている。

明示的なカラム解除

この例では、明示的なカラム解除が段落の後に生成されている：

p { 
  column-break-after: always;
}

結果としてカラムの数が増えている。

ページメディアでは、ページ内に隙間のないとき、カラムは次のページに移動する。

この例では、段落の後に明示的なカラム解除が生成されている。

p { 
  column-break-after: always;
}

結果として、カラムの数は増加し、別のページが生成されている。これは最初のページに現れる：

これは次のページに現れる：

10. 適合性

適合ユーザーエージェントは、この仕様書に従って要素の内容をいくつかのカラムに流し込まなければならない。

CSS3背景と枠線 [[!CSS3BACKGROUND]]をサポートするユーザーエージェントは、'column-gap-image'をサポートしなければならない。さもなくばこのプロパティのサポートは任意である。

'column-rule-color'プロパティが適合ユーザーエージェントに要求するのは、[CSS21]に定義されるcolor値のサブセットのサポートだけである。

謝辞

この文書は次の貢献者によるいくつかの過去の提案とそれらに寄せられたコメントに基づいて作成されている。

Peter-Paul Koch
Till Halbach
Cédric Savarese
Andy Clarke
Robert O'Callahan
Markus Mielke
Alex Mogilevsky
Sergey Genkin
Michael Day
Melinda Grant
Kevin Lawver
David Baron
Bert Bos
Dave Raggett
Chris Wilson
Robert Stevahn
Peter Linss
Chris Lilley
Steve Zilles
Tantek Çelik
Daniel Glazman
Ian Hickson

参考文献

規範的参考文献

[CSS21]: Bert Bos; et al. Cascading Style Sheets, level 2 revision 1. 11 April 2006. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2006/WD-CSS21-20060411
[CSS3BOX]: Bert Bos. CSS3 module: The box model. 24 October 2002. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2002/WD-css3-box-20021024
[CSS3COLOR]: Tantek Çelik; Chris Lilley. CSS3 Color Module. 14 May 2003. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2003/CR-css3-color-20030514
[CSS3GCPM]: Håkon Wium Lie. CSS Generated Content for Paged Media Module. 19 September 2006. W3C Working Draft. (Work in progress) URL: http://www.w3.org/TR/2006/WD-css3-gcpm-20060919
[CSS3PAGE]: Håkon Wium Lie; Melinda Grant. CSS3 Paged Media Module. 25 February 2004. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2004/CR-css3-page-20040225

他の参考文献

索引

カラムボックス
column-break-after
column-break-before
column-count
column-fill
column-gap
カラムギャップ
カラム高
column-rule
column-rule-color
カラム罫線
column-rule-style
column-rule-width
columns
column-span
column-width
カラム幅
multicol
マルチカラム要素
スパニング要素

プロパティ索引

プロパティ	値	初期値	適用対象	継承	%値	媒体
column-break-after	auto \| always \| avoid	auto	ブロックレベル要素	no	N/A	視覚
column-break-before	auto \| always \| avoid	auto	ブロックレベル要素	no	N/A	視覚
column-count	`<integer>` \| auto	auto	ブロックレベル要素	no	N/A	視覚
column-fill	auto \| balance	balance	マルチカラム要素	no	N/A	ページ
column-gap	`<length>` \| normal	normal	マルチカラム要素	no	N/A	視覚
column-rule	`<‘border-width’>` \|\| `<'border-style'>` \|\| [ `<color>` \| transparent ]	個々のプロパティ参照	マルチカラム要素	no	N/A	視覚
column-rule-color	`<color>`	currentColor	マルチカラム要素	no	N/A	視覚
column-rule-style	`<'border-style'>`	none	マルチカラム要素	no	N/A	視覚
column-rule-width	`<‘border-width’>`	medium	マルチカラム要素	no	N/A	視覚
columns	[ [ `<integer>` \| auto] \|\| [ `<length>` \| auto] ]	see individual properties	ブロックレベル要素	no	N/A	視覚
column-span	1 \| all	1	スタティック, 非フローティング要素	no	N/A	視覚
column-width	`<length>` \| auto	auto	ブロックレベル要素	no	N/A	視覚

CSS3 モジュール： マルチカラムレイアウト