CSS3 マルチカラム

CSS3 では、テキストコンテンツを新聞のようなマルチカラムレイアウトにデザインできます。次の例をご覧ください:

サンプル - 学ぶのは技術だけでなく、夢でもあります！サンプル(www.example.com)は、最も充実したプログラミング技術基礎チュートリアルを提供し、HTML、CSS、Javascript、Python、Java、Ruby、C、PHP、MySQLなど様々なプログラミング言語の基礎知識を紹介しています。また、当サイトには数多くのオンライン例も用意されており、例を通してプログラミングをより良く学ぶことができます。

ブラウザのサポート

表内の数字は、そのプロパティをサポートする最初のブラウザのバージョン番号を示します。

数字の直後の -webkit- または -moz- は、特定のブラウザのプレフィックスを示します。

プロパティ
column-count	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-gap	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-rule	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit- 11.1
column-rule-color	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1
column-rule-style	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1
column-rule-width	4.0 -webkit-	10.0	2.0 -moz-	3.1 -webkit-	15.0 -webkit 11.1
column-width	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列に分割します:

例

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プロパティは column-rule-* 全プロパティのショートハンドです。

次の例では、列間のボーダーの太さ、スタイル、色を設定します:

例

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

試してみる »

要素がまたがる列数を指定する

次の例では、<h2> 要素がすべての列にまたがるように指定します:

例

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

試してみる »

列の幅を指定する

column-widthプロパティは列の幅を指定します。

例

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

試してみる »

CSS3 マルチカラムのプロパティ

以下の表に、すべてのCSS3マルチカラムプロパティを示します:

プロパティ	説明
column-count	要素を分割する列数を指定します。
column-fill	列の埋め方を指定します。
column-gap	列間の間隔を指定します。
column-rule	column-rule-* 全プロパティのショートハンド
column-rule-color	2つの列の間のボーダーの色を指定します。
column-rule-style	2つの列の間のボーダーのスタイルを指定します。
column-rule-width	2つの列の間のボーダーの太さを指定します。
column-span	要素がまたがる列数を指定します。
column-width	列の幅を指定します。
columns	column-width と column-count のショートハンドプロパティです。

その他の拡張