CSS
列

構文

• 列カウント：auto | number |継承| initial | unset;
• 列幅：自動|長さ;
• 列：[列幅] | [列数]。
• 列スパン：なし|すべて|継承|初期|未設定。
• 列ギャップ：normal | length |継承| initial | unset;
• 列塗りつぶし：auto | balance |継承| intial | unset;
• column-rule-color：color | inherit | initial | unset;
• column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset |継承| initial | unset;
• 列ルール幅：薄|中|厚|長|継承|初期|未設定;
• 列ルール：[列ルール幅] | [列ルールスタイル] | [列ルール色]。
• break-after：auto | always | left | right | recto | verso | page | column | region |回避|回避|回避|列|回避領域;
• break-before：auto | always | left | right | recto | verso | page | column | region |回避|回避 - ページ|回避 - 列|回避領域;
• break-inside：auto | avoid |回避 - ページ|回避 - 列|回避領域;

簡単な例（列カウント）

CSSの複数列のレイアウトにより、複数のテキスト列を簡単に作成できます。

コード

<div id="multi-columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

.multi-columns {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

結果

列幅

column-widthプロパティは、最小の列幅を設定します。 column-countが定義されていない場合、ブラウザは利用可能な幅に収まる数の列を作成します。

コード：

<div id="multi-columns">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>

.multi-columns {
  -moz-column-width: 100px;
  -webkit-column-width: 100px;
  column-width: 100px;
}

結果