CSS入門 | CSS3拡張 | マルチカラムレイアウト

Tags:

マルチカラム(multi-column)レイアウト

CSSでは、新聞のように複数のカラム(column)で構成される構造を、columnプロパティを使って簡単に作成できる。

マルチカラム(multi-column)のために提供されるプロパティは次のとおりである。

プロパティ 説明
columns すべてのcolumnsプロパティを使ったスタイルを1行で設定できる。
column-count その要素を何個のカラム(column)に分けるかを設定する。
column-gap カラム間の間隔を設定する。
column-width カラムの幅を設定する。
column-span その要素が何個のカラム(column)を結合して表示されるかを設定する。
column-fill カラムをどのように埋めるかを設定する。
column-rule すべてのcolumn-ruleプロパティを使ったスタイルを1行で設定できる。
column-rule-style カラム間に入る線のスタイルを設定する。
column-rule-width カラム間に入る線の太さを設定する。
column-rule-color カラム間に入る線の色を設定する。

CSS3マルチカラム(multi-column)の対応バージョン

CSS3マルチカラム(multi-column)に対応している主要Webブラウザーのバージョンは次のとおりである。ブラウザー別にベンダープレフィックス(vendor prefix)を使ってこの機能に最初に対応したバージョンも併記している。

プロパティ ie chrome firefox safari opera
column-count / column-gap / column-rule/ column-rule-color / column-rule-style / column-rule-width / column-width 10.0 50.0 / 4.0 -webkit- 2.0 -moz- 9.0 / 3.1 -webkit- 37.0 / 15.0 -webkit- / 11.1
column-span 10.0 50.0 / 4.0 -webkit- サポートされない 9.0 / 3.1 -webkit- 37.0 /15.0 -webkit-/ 11.1

column-countプロパティ

column-countプロパティは、その要素を何個のカラム(column)に分けるかを設定する。

<style>
    #origin { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
</style>

column-gapプロパティ

column-gapプロパティは、カラム(column)間の間隔を設定する。

<style>
    #gap { -webkit-column-gap: 70px; -moz-column-gap: 70px; column-gap: 70px; }
</style>

column-widthプロパティ

column-widthプロパティは、カラムの幅を設定する。Webブラウザーは設定した幅のカラムを作成した後、残りの領域を均等に分けてカラム間の間隔として自動設定する。

<style>
    #gap { -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; }
</style>

column-spanプロパティ

column-spanプロパティは、その要素が何個のカラムを結合して表示されるかを設定する。

<style>
    #merge { -webkit-column-span: all; column-span: all; }
</style>

column-countプロパティはFirefoxとInternet Explorer 9以前ではサポートされない。

column-rule-styleプロパティ

column-rule-styleプロパティは、カラム間に入る線のスタイルを設定する。

<style>
    #line { -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; }
</style>

column-rule-widthプロパティ

column-rule-widthプロパティは、カラム間に入る線の太さを設定する。

<style>
    #line {
        -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid;
        -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px;
    }
</style>

column-rule-colorプロパティ

column-rule-colorプロパティは、カラム間に入る線の色を設定する。

<style>
    #line {
        -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid;
        -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px;
        -webkit-column-rule-color: #6495ED; -moz-column-rule-color: #6495ED; column-rule-color: #6495ED;
    }
</style>

column-ruleプロパティ

すべてのcolumn-ruleプロパティを使ったスタイルを1行で設定できる。

<style>
    #line {
        -webkit-column-rule: 5px solid #6495ED;
        -moz-column-rule: 5px solid #6495ED;
        column-rule: 5px solid #6495ED;
    }
</style>