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

2012年4月12日(木)
土井 毅(著)山田祥寛(監修)

ベンダープレフィックス

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

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

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

Webブラウザ ベンダープレフィックス
Internet Explorer -ms-
Firefox -moz-
Google Chrome、Safari、Android -webkit-
Opera -o-

例えばマルチカラムレイアウトに使う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ブラウザ 対応するバージョン
Internet Explorer 10(予定)
Firefox 2.0以上
Chrome 4.0以上
Mac OS X Safari 5.0以上
Opera 11.1以上
iOS Safari 3.2以上
Androidブラウザー 2.1以上

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

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

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

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

プロパティ名 意味
columns-width カラムの幅を指定
columns-count カラムの数を指定
  • 「CSS3によるマルチカラムレイアウト」サンプルプログラム

著者
土井 毅(著)山田祥寛(監修)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています