CSS3 段組み

CSS3 段組み

CSS3 により、新聞のようにテキストをレイアウトするための段組みが作成できます !

この章では、次の段組みのプロパティについて学習します:

• column-count
• column-gap
• column-rule

ブラウザ・サポート

Internet Explorer は、まだ段組み・プロパティをサポートしていません。

Firefox は、接頭辞 -moz- が必要です。

Chrome 及び Safari は、接頭辞 -webkit- が必要です。

CSS3 段組みの作成

column-count プロパティは、要素を分割するカラムを指定します:

例

div 要素内のテキストを 3カラムに分割します:

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

Try it yourself »

CSS3 カラム間のギャップ指定

column-gap プロパティは、カラム間のギャップを指定します:

例

カラム間のギャップを 40 ピクセルに指定します:

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

Try it yourself »

CSS3 カラム罫線

column-rule プロパティは、カラム間の罫線の幅、スタイル、および色を設定します。

例

カラム間の罫線の幅、スタイル、および色を指定します:

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

Try it yourself »

新 Multiple Columns プロパティ