ベンダープレフィックス
ベンダープレフィックス
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 | カラムの数を指定 |
- この記事のキーワード
バックナンバー
この記事の筆者
筆者の人気記事
Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。
