CSS3のマルチカラムレイアウト
CSS3のマルチカラムのレイアウトは、テキストの複数の列を簡単に定義できます - ちょうど新聞のように：
毎日Ping
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.
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
数字は続い-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のマルチカラムのプロパティ
この章では、次の複数列のプロパティについて説明します：
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3は、複数の列を作成します。
column-countプロパティは、列に分割されるべき要素の数を指定します。
次の例では、内のテキスト分割する<div> 3列に要素を：
例
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
»それを自分で試してみてください CSS3は、列の間のギャップを指定します
column-gap宿泊施設には、列の間のギャップを指定します。
次の例では、列の間に40ピクセルの間隔を指定します。
例
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
»それを自分で試してみてください CSS3カラムのルール
column-rule-styleプロパティは、カラム間のルールのスタイルを指定します。
例
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
»それを自分で試してみてください column-rule-widthプロパティは、カラム間のルールの幅を指定します。
例
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
»それを自分で試してみてください column-rule-colorプロパティは、カラム間のルールの色を指定します。
例
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
»それを自分で試してみてください column-ruleプロパティは、上記のすべての列-rule- *プロパティを設定するための簡略記述特性です。
次の例では、列間のルールの幅、スタイル、色を設定します。
例
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
»それを自分で試してみてください どのように多くの列要素万一スパンを指定します。
column-spanプロパティは、要素は全体またがる列の数を指定します。
次の例では、あることを指定<h2>要素は、すべての列にまたがって必要があります。
列幅を指定します
column-widthプロパティは列に対して提案し、最適な幅を指定します。
次の例では、列の提案し、最適な幅は100pxにすべきであることを指定します。
例
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
»それを自分で試してみてください CSS3のマルチカラムのプロパティ
次の表は、すべてのマルチカラムのプロパティを示しています：
| プロパティ | 説明 |
|---|---|
| column-count | 要素がに分割されるべき列の数を指定します。 |
| column-fill | 列を埋める方法を指定します |
| column-gap | 列の間のギャップを指定します。 |
| column-rule | すべての列-rule- *プロパティを設定するための簡略記述特性 |
| column-rule-color | 列間のルールの色を指定します |
| column-rule-style | 列間のルールのスタイルを指定します。 |
| column-rule-width | 列間のルールの幅を指定します |
| column-span | 要素は全体またがる列数を指定します |
| column-width | 列の提案し、最適な幅を指定します |
| columns | 列幅と列数を設定するための簡略記述特性 |