CSS3 段組み

❮ 前章へ 次章へ ❯

CSS3 段組みのレイアウト

CSS3 段組みのレイアウトは、新聞のようなテキストの複数列の定義を簡単に可能にします：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

数字の後に続く -ms-、-webkit- または -moz- は、接頭辞付きで動作した最初のバージョンです。

プロパティ
column-count 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit-
11.1
column-gap 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit-
11.1
column-rule 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit-
11.1
column-rule-color 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit
11.1
column-rule-style 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit
11.1
column-rule-width 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit
11.1
column-width 50.0
4.0 -webkit-		 10.0 2.0 -moz- 9.0
3.1 -webkit-		 37.0
15.0 -webkit
11.1

CSS3 段組みのプロパティ

この章では、次の段組みのプロパティについて説明します：

CSS3 段組みの作成

column-count プロパティは、分割する要素の段数を指定します:

次の例は、<div> 要素内のテキストを 3段に分割します:

例

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
Try it Yourself ❯

CSS3 段と段の間隔指定

column-gap プロパティは、段と段の間の間隔を指定します。

次の例は、段と段の間の間隔を 40 ピクセルに指定します：

例

div {
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
Try it Yourself ❯

CSS3 段の間の罫線

column-rule-style プロパティは、段の間の罫線を指定します：

例

div {
    -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
    -moz-column-rule-style: solid; /* Firefox */
    column-rule-style: solid;
}
Try it Yourself ❯

column-rule-width プロパティは、段の間の罫線の幅を指定します：

例

div {
    -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
    -moz-column-rule-width: 1px; /* Firefox */
    column-rule-width: 1px;
}
Try it Yourself ❯

column-rule-color プロパティは、段の間の罫線の色を指定します：

例

div {
    -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule-color: lightblue; /* Firefox */
    column-rule-color: lightblue;
}
Try it Yourself ❯

column-rule プロパティは、上記 column-rule-* プロパティの全てを設定するためのショーハンドプロパティです。

次の例は、段と段の間の罫線の幅、スタイル、色を設定します：

例

div {
    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
}
Try it Yourself ❯

要素がまたがる段数を指定

column-span プロパティは、要素がまたがる段数を指定します。

次の例は、<h2> 要素が全ての段にまたがることを指定します：

例

h2 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}
Try it Yourself ❯

段の幅を指定

column-width プロパティは、段に提案された最適幅を指定します。
（訳注：指定した幅で表示すると表示領域が余る場合は各段を広げて表示し、表示領域が指定した幅に満たない場合は指定より狭い幅で 表示されます。）

次の例は、段に示す最適幅 100px を指定します：

例

div {
    -webkit-column-width: 100px; /* Chrome, Safari, Opera */
    column-width: 100px;
}
Try it Yourself ❯

CSS3 段組みのプロパティ

次の表は、段組みの全プロパティの一覧です：

プロパティ 説明
column-count 分割する要素の段数を指定する
column-fill 段をどのように埋めるかを指定する
column-gap 段の間の間隔を指定する
column-rule 全 column-rule-* プロパティを設定するためのショートハンド・プロパティ
column-rule-color 段の間の罫線の色を指定する
column-rule-style 段の間の罫線のスタイルを指定する
column-rule-width 段の間の罫線の幅を指定する
column-span 要素のまたがる段数を指定する
column-width 段に提案する最適幅を指定する。
columns column-width と column-count を設定するためのショートハンド・プロパティ

❮ 前章へ 次章へ ❯