CSS マルチカラムレイアウトの利用

CSS の多段レイアウト (multi-column layout) はブロックレイアウトモードを拡張して、多段のテキストを定義しやすくする。文章を読むときに一行の長さが長すぎると読みにくい。もし一行の長さが長すぎると、行末から次の行の先頭に目を移すときに、どの行を読んでいたか分からなくなってしまう。したがって、大きなスクリーンを最も有効に活用するためには、新聞のように一行の長さを適当に区切り、それらを段組みにするのが望ましい。

しかし、残念なことに、CSS と HTML を用いた場合、決まった長さで行を区切らなければならない、またはテキストのマークアップがひどく制限されてしまう、あるいは非常に大げさな記述をしなければならなかった。新しい CSS プロパティを追加してブロックレイアウトモードを拡張すれば、この制限を解くことができる。

段組みの使い方

段組みの数と幅

次の 2 つの CSS プロパティによって段組みの数と段の幅を制御している: column-count と column-width

column-count は段組みの数を特定した値に指定する。例えば、以下のように記述すると、

<div style="column-count:2;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum</div>

内容を 2 段組みで表示する（多段対応のブラウザを用いた場合）。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

column-width は段の幅の最小値を設定する。もし、column-count の値を設定しなかった場合には、ブラウザによりできるだけ多くの段が納まるように自動調整される。

<div style="column-width:20em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum</div>

これは次のようになる。

より厳密な詳細について知りたい場合は、CSS3 仕様書を参照。

段組みをした場合、文章が長くなると自動的に段から次の段へと続く。段の中では、すべての HTML 、 CSS 、 DOM の機能がサポートされている。

`columns` ショートハンド

たいていの場合、ウェブデザイナーは column-count と column-width という 2 つの CSS プロパティを使うことになる。この2つのプロパティの値は重ならないので、ショートハンド columns を使うのが便利である。例えば...

CSS 宣言 column-width:12em は次のように書き換えられる。

<div style="columns:12em">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum</div>

CSS 宣言 column-count:4 は次のように書き換えられる。

<div style="columns:4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum</div>

2 つの CSS 宣言 column-width:8em と column-count:12 は次のように書き換えられる。

<div style="columns:12 8em">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum</div>

高さの調整

CSS3 のドラフトには、段の高さは揃っていなければならないと規定されている。つまり、ブラウザはそれぞれの段の高さが揃うように、段の高さの最大値を自動的に設定する必要があるが、Firefox はこれに対応している。

しかし、段の高さの最大値を明確に設定することは役に立つこともある。何段かに段組みをおこなっておき、文章が最初の段から表示されるようにレイアウトしておくと、その段に文章が収まりきらない場合は、右の段、その右の段へと収める事ができる。そこで CSS の height プロパティが段組みのブロックに設定されている場合に各段はその指定した高さまで大きくなり、その高さまで達した場合は次の新しい段を作成する。このモードにより、レイアウトの効率も高まる。

段組みの間隔

段と段の間はデフォルトで 1em 幅になる (以前は段と段の間が自動的に調整された)。このデフォルト値は、column-gap プロパティを段組みに適用すれば簡単に変更できる。

<div style="column-width:20em; column-gap:2em;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum</div>

段組に対応していないブラウザへのスマートな対応

column プロパティは段組みをサポートしていないブラウザでは単に無視される。したがって、このようなブラウザに対しては単一の段で表示し、サポートしているブラウザにおいて段組みを行うということが比較的簡単にできる。

プレフィックス無しのプロパティは非対応のブラウザがある点に注意してほしい。この機能を最新のブラウザで使うには、各プロパティを 3 度ずつ書く必要がある。-moz- プレフィックスをつけて 1 回、 -webkit- プレフィックスをつけて 1 回、プレフィックス無しで 1 回だ。

結論

CSS 3 の段組みは Web 開発者がスクリーンのリソースを最大限に活用するのをサポートする新しいレイアウト方法である。この方法の中で特に高さの自動調整機能は非常にすばらしい機能であるが、非常に想像力豊かな開発者は、これらの幾通りもの使い方を見つけることができるだろう。

CSS マルチカラムレイアウトの利用

段組みの使い方

段組みの数と幅

`columns` ショートハンド

高さの調整

段組みの間隔

段組に対応していないブラウザへのスマートな対応

結論

関連情報

ドキュメントのタグと貢献者

CSS マルチカラムレイアウトの利用

段組みの使い方

段組みの数と幅

columns ショートハンド

高さの調整

段組みの間隔

段組に対応していないブラウザへのスマートな対応

結論

関連情報

ドキュメントのタグと貢献者

`columns` ショートハンド