CSS マルチカラム

CSSの多列レイアウト

CSSの多列レイアウトは、新聞のように簡単に多列のテキストを定義することができます：

三国演義

第一回
宴会で桃源の豪杰が三結義をした
黄巾の英雄を斬り、初めて功を立てた
世間の大勢は、分かれれば合い、合われれば分かれるものである：周の末、七国が争い合い、秦に統一された。秦が滅亡した後、楚と漢が争い合い、漢に統一された。漢朝は高祖が白蛇を斬り、天下を一統した後、光武帝が中兴し、献帝に伝わると三国に分裂した。その混乱の原因は、桓帝と靈帝の時代から始まったのである。桓帝は善人を抑圧し、宦官を崇拝した。桓帝が崩御すると、靈帝が即位し、大將軍の孫堅と太傅の陳蕃が共に補佐した。その時、宦官の曹節らが権力を握り、孫堅と陳蕃が彼らを殺そうと画策したが、機密が漏れ、逆に殺害された。以降、宦官は益々横行した。建寧二年四月の望日、帝は温徳殿に御座した。座を昇る直前、殿の角から激しい風が吹き荒れ、梁から一条の大青蛇が飛び降り、椅子に巻きついた。帝は驚いて転び、周りの人々が急いで宮中に救い入れた。百官は皆逃げ出した。その後、蛇は姿を消した。突然、大雷大雨と雹が降り始め、夜中まで続いた。無数の家屋が壊された。建寧四年二月、洛陽で地震が起こり、また海が溢れ出し、沿岸の住民は大波にさらわれた。光和元年、雌の鶏が雄の鶏に化けた。六月の朔日、十数丈の黒い雲が温徳殿に飛び込んだ。秋七月、虹が玉堂に現れ、五原山の岸が崩れた。これらの不吉な現象は、一つではない。帝は群臣に災異の原因を尋ねた。議郎の蔡邕は上疏し、虹が落ち、鶏が化けたのは、女官が政治に関与したためであると述べた。その言葉は切れ直だった。帝は上奏を見て嘆き、更衣した。曹節は後ろから見守り、左右に宣言した。それから、他のことで蔡邕を罪に落とし、田里に送還した。後に張讓、趙忠、封谞、段珪、曹節、侯覧、蹇硕、程旷、夏恽、郭勝の十人が共謀し、十常侍と呼ばれた。帝は張讓を信頼し、アフファと呼んだ。朝政は日々悪化し、天下の人々の心は乱れ、盗賊が蜂起した。

...... ......

CSS 多列属性

この章では、以下の多列属性について学びます：

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザバージョンを示しています。

属性 Chrome IE Firefox Safari Opera
column-count 50.0 10.0 52.0 9.0 37.0
column-gap 50.0 10.0 52.0 9.0 37.0
column-rule 50.0 10.0 52.0 9.0 37.0
column-rule-color 50.0 10.0 52.0 9.0 37.0
column-rule-style 50.0 10.0 52.0 9.0 37.0
column-rule-width 50.0 10.0 52.0 9.0 37.0
column-span 50.0 10.0 71.0 9.0 37.0
column-width 50.0 10.0 52.0 9.0 37.0

CSS 多列の作成

column-count 属性は、要素が分割されるべき列数を定義します。

以下の例では、<div>要素内のテキストを 3 列に分割しています：

例

div {
  column-count: 3;
}

実際に試してみてください

CSS 列間隔の指定

column-gap 属性は、列間の間隔を定義します。

以下の例では、列間の間隔を 40 ピクセルに指定しています：

例

div {
  column-gap: 40px;
}

実際に試してみてください

CSS 列ルール

column-rule-style 属性は、列間のルールのスタイルを定義します：

例

div {
  column-rule-style: solid;
}

実際に試してみてください

column-rule-width 属性は、列間のルールの幅を定義します：

例

div {
  column-rule-width: 1px;
}

実際に試してみてください

column-rule-color 属性は、列間のルールの色を定義します：

例

div {
  column-rule-color: lightblue;
}

実際に試してみてください

column-rule 属性は、上記のすべての column-rule-* 属性を設定するショートカット属性です。

以下は、列間のルールの幅、スタイル、色を設定しています：

例

div {
  column-rule: 1px solid lightblue;
}

実際に試してみてください

要素が横跨すべき列数を指定します

column-span 属性は、要素が跨ぐべき列数を定義します。

以下は、<h2>要素がすべての列を跨ぐことを定義しています：

例

h2 {
  column-span: all;
}

実際に試してみてください

列幅の指定

column-width 属性は、列に推奨最適幅を指定します。

以下は、列の推奨最適幅が 100px であることを定義しています：

例

div {
  column-width: 100px;
}

実際に試してみてください

CSS 多列属性

以下の表にすべての多列属性が示されています：

属性 説明
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 を設定するためのショートカット属性