CSS3のマルチカラム
CSS3テキスト内容は以下の実施例は、新聞、マルチコラムレイアウトのように設計することができます。
このチュートリアル - 科学技術だけでなく、夢だけではありません！ このチュートリアルでは、（www.w3big.com）最も完全なプログラミング技術ベースのチュートリアルでは、HTML、CSS、Javascriptを、PythonやJavaの、ルビー、C、PHP、MySQLの、および他のプログラミング言語の基本を紹介しています。 しかし、サイトでは、一例として、あなたがより良いプログラミングを学ぶことができ、オンラインで多くの例を提供します。
ブラウザのサポート
表中の数字は、メソッドのバージョン番号をサポートする最初のブラウザを表します。
すぐに数-webkit-ブラウザまたは-moz-指定された接頭辞の後に。
| プロパティ | |||||
|---|---|---|---|---|---|
| 列カウント | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| カラムギャップ | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| 列のルール | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit- 11.1 |
| コラムルール色 | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| コラム・ルールスタイル | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| コラムルール幅 | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
| 列幅 | 4.0 -webkit- | 10.0 | 2.0 -moz- | 3.1 -webkit- | 15.0 -webkit 11.1 |
CSS3のマルチカラムのプロパティ
この章では、我々は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つに分割されています：
列と列の間CSS3のマルチカラムのギャップ
column-gap宿泊施設には、列と列の間のギャップを指定します。
次の例では、列と列の間のギャップを指定する40ピクセルです。
例
-webkit-列ギャップ：40ピクセル; / *クロム、サファリ、オペラ* /
-moz-列ギャップ：40ピクセル; / * Firefoxの* /
カラムギャップ：40ピクセル;
}
»をお試しください
CSS3カラムの境界線
column-rule-styleプロパティは、列の間の境界線スタイルの列を指定します。
例
-webkit-列ルールスタイル：固体; / *クロム、サファリ、オペラ* /
-moz-列ルールスタイル：固体; / * Firefoxの* /
コラム・ルールスタイル：固体;
}
»をお試しください
column-rule-width属性が2の境界線の太さを指定します。
例
-webkit-列ルール幅： 1pxの; / *クロム、サファリ、オペラ* /
-moz-列ルール幅： 1pxの; / * Firefoxの* /
コラムルール幅：1ピクセル。
}
»をお試しください
column-rule-color属性が2の境界線の色を指定します。
例
-webkit-列ルール色：水色; / *クロム、サファリ、オペラ* /
-moz-列ルール色：水色; / * Firefoxの* /
コラムルール色：水色。
}
»をお試しください
column-ruleプロパティは、すべての列rule- *プロパティの省略形です。
次の例では、境界線の太さ、色とスタイルのために直接列を設定します。
例
-webkit-列ルール：1pxの固体水色; / *クロム、サファリ、オペラ* /
-moz-列ルール：1pxの固体水色; / * Firefoxの* /
コラム・ルール：1pxの固体水色。
}
»をお試しください
どのように多くの列指定された素子の両端
次の例では、すべての列全体で<H2>要素を指定します。
列の幅を指定します。
column-width属性は、列の幅を指定します。
CSS3のマルチカラムのプロパティ
次の表は、CSS3のマルチカラムのすべての属性をリストします。
| プロパティ | 説明 |
|---|---|
| 列カウント | 要素を指定した列の数が分割されるべきです。 |
| カラムフィル | 列を埋める方法を指定します |
| カラムギャップ | 列と列の間のギャップを指定します。 |
| 列のルール | すべての列rule- *簡略記述特性 |
| コラムルール色 | 2間の境界線の色を指定します。 |
| コラム・ルールスタイル | 2間の境界線のスタイルを指定します |
| コラムルール幅 | 2間の境界線の太さを指定します。 |
| 列スパン | 要素を横断する列数を指定します |
| 列幅 | 列の幅を指定します。 |
| コラム | 設定列幅と列数の速記 |