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 を設定する短縮属性