CSS3の新機能に触れる - モジュール化とマルチカラムレイアウト

ベンダープレフィックス

CSS3の機能の中にはまだ正式な仕様となっていないものも多くありますが、いくつかのWebブラウザで先行実装されている場合があります。逆に、Webブラウザが拡張した独自の仕様が、結果的に正式な仕様にまとめられることもあります。

いずれの場合でも、正式な仕様となる前の機能については、CSSのプロパティ名の先頭に以下のようなベンダープレフィックスと呼ばれる文字列を付加して指定します。主なWebブラウザのベンダープレフィックスは以下の通りです。

表2：ベンダープレフィックス

例えばマルチカラムレイアウトに使うcolumn-widthプロパティであれば、以下のように、ベンダープレフィックス付きのプロパティを指定します。

ベンダープレフィックス付きのプロパティ指定

  column-width: 400px; ←標準のプロパティ
  -moz-column-width: 400px;  ←Firefox用のプロパティ
  -webkit-column-width: 400px; ←WebKitブラウザ用のプロパティ
  -ms-column-width: 400px;  ←Internet Explorer用のプロパティ
  -o-column-width: 400px;  ←Opera用のプロパティ

なお、今後正式な仕様になった場合はベンダープレフィックスは不要となりますので、上記のコードのように、本来の（ベンダープレフィックス無しの）プロパティも併記することをお勧めします。

マルチカラムレイアウト

表3：マルチカラムレイアウトをサポートするWebブラウザとバージョン

マルチカラムレイアウトとは、ページ内の特定の部分を段組表示することです。一般に、段組無しでWebブラウザの画面の幅いっぱいを使ったレイアウトを組むと、目の移動距離が大きくなり、読みづらいページとなってしまいます。Webサイトではありませんが、段組表示の良い例は新聞や雑誌などで、たいていの場合は一定の幅や高さで段組に分割することによって、読みやすいページ構成を実現しています。

CSS3以前でも、HTMLのテーブル機能を用いたり、CSSの回り込み指定（floatプロパティ）や位置指定（positionプロパティ）などを用いることで、マルチカラムレイアウトを実現できましたが、CSS3ではMulti-column Layoutモジュールとして段組表示が正式にサポートされるようになり、手軽に段組表示を行うことができます。

CSS3ではマルチカラムレイアウトを扱うためのcolumns-width、columns-countプロパティが新設されています。

表4：マルチカラムレイアウトを扱うためのプロパティ