Skip to main content

Visit Mozilla.org

CSS3 Columns

出典: MDC

目次

[編集] イントロダクション

文章を読むときに一行の長さが長すぎると読みにくい。もし一行の長さが長すぎると、行末から次の行の先頭に目を移すときに、どの行を読んでいたか分からなくなってしまう。したがって、大きなスクリーンを最も有効に活用するためには、新聞のように1行の長さを適当に区切り、それらを段組みにするのが望ましい。しかし、残念なことに、CSS と HTML を用いた場合、決まった長さで行を区切らなければならない、またはテキストのマークアップがひどく制限されてしまう、あるいは非常に大げさな記述をしなければならなかった。

CSS3 のドラフトでは、この状況を改善する新しい CSS のプロパティーを提案している。Firefox 1.5 以降においては、（以下で説明するが 1 つの例外を除き）このドラフトに記述してあるような動作をするようにいくつかのプロパティーのサブセットが実装されている。例えば Robert O'Callahan のブログではこの新しい CSS の段組みを用いているので、Firefox ビルド 1.5 でチェックして見るといい。

[編集] 段組みの使い方

[編集] 段組みの数と幅

次の二つの CSS プロパティーによって段組みの数と段の幅を制御している: -moz-column-count と -moz-column-width -moz-column-count は段組みの数を特定した値に指定する。例えば、以下のように記述すると、 

<div style="-moz-column-count:2">In preparation for the release of Mozilla
Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
Daylight Time (UTC -0700). After this point, no more checkins will be accepted
for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>

内容を2段組みで表示します。（Firefox 1.5 以降を用いた場合）

In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.

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

<div style="-moz-column-width:20em;">In preparation for the release of Mozilla
Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
Daylight Time (UTC -0700). After this point, no more checkins will be accepted
for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>

と記述した場合は

In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.

のように表示される。

より厳密な詳細について知りたい場合は、CSS3 ドラフトを参照。

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

[編集] 高さの調整

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

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

[編集] 段組みの間隔

デフォルトでは、段と段の間は自動的に調整される。これはたいていの場合あまり好ましくない。調整のために段組の間に意図的に空白の段を追加するように CSS を記述できるが、-moz-column-gap プロパティーを利用する方がより簡単になる場合が多い。 

<div style="-moz-column-width:20em; -moz-column-gap:2em;">In preparation for
the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight
at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins
will be accepted for Firefox 1.5 Beta 1, which is set for release on
Thursday.</div>
In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.

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

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

[編集] 結論

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

[編集] 参照

CSS3 Columns, -moz-column-width, -moz-column-count, -moz-column-gap, CSS Reference, CSS Reference:Mozilla Extensions

[編集] 追加の参考資料

"http://developer.mozilla.org/ja/docs/CSS3_Columns" より作成