CSS 3複数列

ブラウザのサポート
 
Internet Explorer 10およびOperaは、複数列のプロパティをサポートします.
Firefoxには接頭辞-moz-が必要です.
ChromeとSafariにはプレフィックス-webkit-が必要です.
注記:Internet Explorer 9以降のバージョンでは、マルチカラム属性はサポートされていません.
 
CSS 3複数列作成
column-countプロパティでは、要素が区切られるべき列の数を指定します.
≪インスタンス｜Instance｜emdw≫
div要素のテキストを3つの列に分割します.

div
{
-moz-column-count:3; 	/* Firefox */
-webkit-column-count:3; /* Safari   Chrome */
column-count:3;
}

みずからやってみる
 
CSS 3所定列間の間隔
column-gapプロパティは、カラム間の間隔を指定します.
≪インスタンス｜Instance｜emdw≫
列間の40ピクセルの間隔を指定します.

div
{
-moz-column-gap:40px;		/* Firefox */
-webkit-column-gap:40px;	/* Safari   Chrome */
column-gap:40px;
}

みずからやってみる
CSS 3列ルール
column-ruleプロパティは、カラム間の幅、スタイル、色ルールを設定します.
≪インスタンス｜Instance｜emdw≫
列の幅、スタイル、色のルールを指定します.

div
{
-moz-column-rule:3px outset #ff0000;	/* Firefox */
-webkit-column-rule:3px outset #ff0000;	/* Safari and Chrome */
column-rule:3px outset #ff0000;
}

みずからやってみる
新しいマルチカラム属性
次の表には、すべての変換プロパティが表示されます.
属性説明CSS
column-count
エレメントを区切る列の数を指定します.
3
column-fill
列の埋め方を指定します.
3
column-gap
列間の間隔を指定します.
3
column-rule
すべてのcolumn-rule-*プロパティの略記プロパティを設定します.
3
column-rule-color
カラム間のルールの色を指定します.
3
column-rule-style
列間の規則のスタイルを指定します.
3
column-rule-width
列間の規則の幅を指定します.
3
column-span
要素がまたがるべき列の数を指定します.
3
column-width
列の幅を指定します.
3
columns
column-widthとcolumn-countを設定する略記属性を指定します.
3