CSS3 Columns

目次

  1. 1. 段組みの使い方
    1. 1.1. 段組みの数と幅
    2. 1.2. 高さの調整
    3. 1.3. 段組みの間隔
    4. 1.4. 段組に対応していないブラウザへのスマートな対応
  2. 2. 結論
  3. 3. 参照
  4. 4. 追加の参考資料
ページ通知 オフ

文章を読むときに一行の長さが長すぎると読みにくい。もし一行の長さが長すぎると、行末から次の行の先頭に目を移すときに、どの行を読んでいたか分からなくなってしまう。したがって、大きなスクリーンを最も有効に活用するためには、新聞のように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 プロパティが段組みのブロックに設定されている場合に各段はその指定した高さまで大きくなり、その高さまで達した場合は次の新しい段を作成するというようにドラフトを拡張した。このモードにより、レイアウトの効率も高まる。

段組みの間隔

Firefox 3 から、段と段の間はデフォルトで 1em 幅になる (以前は段と段の間が自動的に調整された)。このデフォルト値は、 -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 開発者がスクリーンのリソースを最大限に活用するのをサポートする新しいレイアウト方法である。この方法の中で特に高さの自動調整機能は非常にすばらしい機能であるが、非常に想像力豊かな開発者は、これらの幾通りもの使い方を見つけることができるだろう。

Tags (3)

タグを編集

Attachments (0)

 

添付ファイル