columnで雑誌のようなテキストレイアウト

CSS3のプロパティcolumnに関するメモです。
CSS3なんでまだまだ先の話だと思っていましたが、FirefoxやSafariでcolumnプロパティに関しては先行実装されているようなので。

まずはじめに、CSS3について。
CSS3とは、現在用いられているCSSの最新バージョンです。
まだ勧告段階にもなっていないので、普通のWeb制作で使用できるレベルではないです。

次、columnプロパティの概要。
columnはCSS3で実装予定のプロパティで、新聞のような段組をひとつのボックスで作ることができるプロパティです。

現在のWebでは、ボックスをフロートもしくは、絶対配置してレイアウトをします。
２つのボックスに分けて文章を表示したければ、たとえ文章がつながっていたとしても、二つのブロックに区切り、配置する必要がありました。
columnは、ボックスに記述すると自動的に段組をつくってくれるスグレモノ。
文字サイズの変更にも対応できるし、可変レイアウトを実現できます。

columnは2009年1月10日現在、Firefox、Netscape（Gecko系）とSafari、GoogleChrome（webkit系）でのみ、先行的に実装されています。IE6、7（8未確認）やOperaでは実装されていません。
そのため、以下の説明ではプロパティに-moz-や-webkit-という接頭語をつけていますが、これはそれぞれGecko系ブラウザ、webkit系ブラウザのみに適用される、という意味です。

現時点で発表されているcolumnプロパティは以下。

• column-count（カラム数の指定）
• column-width（カラム幅の指定）
• columns（カラム幅・カラム数を同時に指定するショートハンド）
• column-gap（カラム間の余白を指定）
• column-rule-color（カラム区切り線の色を指定）
• column-rule-style（カラム区切り線のスタイル（破線、点線など）を指定）
• column-rule-width（カラム区切り線の太さを指定）
• column-rule（カラム区切り線に関する指定のショートハンド）
• column-break-before（この要素の前で、カラムを区切るかどうかの指定）
• column-break-after（この要素の後で、カラムを区切るかどうかの指定）
• column-span（カラムをまたいで文字を入れることができます。）
• column-fill（カラムコンテンツの調整？）

以下、詳細を説明していますが、全ては
本家サイト（W3CのCSS3 module: Multi-column layout )を見て意訳したものですので、表現するところが違う場合があります。
あくまでもW3Cのテキストが公式版であり、この文章は私が意訳したものに過ぎません。
以上、ご了承お願い致します。

では、さっそくcolumnプロパティの説明メモ書きに入ります。

column-count

カラム数を指定します。

実装例：

たとえば、この場合mcolクラスに対して、column-count: 2;を指定するわけです。すると、この文章自体は１つのdiv、１つのpタグの中に納まっているにもかかわらず、２カラムで表示されます。ちなみに、冒頭でも説明しましたがFirefox、Safari、GoogleChrome、Netscapeでしか２カラムで表示されません。IEでは何の変哲もない文章として表示されているはずです。ご了承ください。

HTML
<div class="mcol">
<p>たとえば、この場合mcolクラスに対して、column-count: 2;を指定するわけです。すると、この文章自体は１つのdiv、１つのpタグの中に納まっているにもかかわらず、２カラムで表示されます。ちなみに、冒頭でも説明しましたがFirefox、Safari、GoogleChrome、Netscapeでしか２カラムで表示されません。IEでは何の変哲もない文章として表示されているはずです。ご了承ください。</p>
</div>


CSS
div.mcol {
  width: 400px;
  -moz-column-count: 2
  -webkit-column-count: 2
}


上記のようにして、後述する他のプロパティも指定することが可能です。

column-width

カラムの幅を指定します。基本的にカラムの幅は統一されます。

columns

カラム幅・カラム数を同時に指定する際に使えるショートハンドです。
2009年1月10日現在、webkitのみ対応。

使用例：3カラム、幅が20emの場合
div {
  columns: 3 20em;
}

column-gap

カラム間の余白を指定します。
あくまでカラム間の余白なので、右端、左端には余白はつきません。
つけたい場合はボックスのpaddingで指定します。

column-rule-color

カラム区切り線の色を指定します。
column-rule系のプロパティに関しては、2009年1月10日現在、対応ブラウザはありません。

column-rule-style

カラム区切り線のスタイルを指定します。

column-rule-width

カラム区切り線の太さを指定します。

column-rule

カラム区切り線に全般に関する指定のショートハンドです。
borderプロパティと同様の使い方をするのだと思います。

column-break-before

この要素の前で、カラムを区切るかどうかの指定ができます。
これを入れた要素が次カラムの先頭になります。
値としてauto（自動）、always（常にこの要素の前でカラムを区切る）、avoid（区切らない）をとります。
使用方法はpage-break-beforeと同様だと思います。
2009年1月10日現在、対応ブラウザはありません。

使用例
div p {
  column-break-before: always;
}
とすると、pタグで常にカラムが分かれることになるので、pタグ１つにあたり１カラムということになります。

column-break-after

この要素の後で、カラムを区切るかどうかの指定ができます。
これを入れた要素がカラムの一番最後になります。
前述のcolumn-break-beforeとほぼ同じく、
値としてauto（自動）、always（常にこの要素の前でカラムを区切る）、avoid（区切らない）をとります。
使用方法はpage-break-afterと同様だと思います。
2009年1月10日現在、対応ブラウザはありません。

column-span

カラムをまたいで文字を入れることができます。

使用例
div h1 {
  column-span: all;
}
たとえば、一番上に大見出しを入れて、その下から3カラムに分けたい場合は、大見出しに対してcolumn-span: all;と指定をすると、その部分だけはカラムを突っ切って表示されるようになります。
値としては、1かallしか指定できないようなので、最初の2カラムだけまたいで表示したい、というのは無理かもしれません。
2009年1月10日現在、対応ブラウザはありません。

column-fill

カラムコンテンツ量の調整をするプロパティだと思います。
これに関してはあまりよく分からなかったので、名前だけ載せておきます。

カラム幅を調整するプロパティだろうか、とも思ったのですが、
個人的にカラムに文章を入れる際に、内容量のバランスをとるプロパティかなと予測。
これも2009年1月10日現在、対応ブラウザなし。

ちなみに、文章量が多すぎてカラムからはみ出てしまうときは、
column系のプロパティを指定しているブロックに、overflowプロパティを追記すると、
はみ出した部分を隠したり、表示したり、あるいはスクロールしたり出来るのではないかと予測しています。

以上、columsメモ終わり。

個人的に、Webでこんなレイアウトする必要があるのか？とも感じていたりしますが、
レイアウトを重視するあまり、divタグで文章を途中でぶった切ってfloatさせるよりは、
HTMLはノーマルのまま、このプロパティを使ってカラム分けしたほうがHTML的にはいいのかなと感じます。

なお、このページは、columnの利用を推奨しているのではなく、プロパティを自分専用にメモっておきたかっただけです。使用は自己責任でお願い致します。