概要

CSScolumns プロパティは column-widthcolumn-count の両方のプロパティを同時に設定できるショートハンドプロパティです。

初期値以下の各プロパティのショートハンドとして補完します:
適用対象非置換ブロック要素(テーブル要素を除く)、テーブルセル、インラインブロック要素
継承不可
メディアvisual
計算値以下の各プロパティのショートハンドとして補完します:
アニメーションの可否以下の各プロパティのショートハンドとして補完します:
正規順序order of appearance in the formal grammar of the values

構文

形式文法: <'column-width'> || <'column-count'>

<'column-width'>
カラム幅の最適化のヒントになる <length> 値です。実際のカラム幅は、これより広くなるか(利用可能なスペースを埋める場合)、狭くなります(指定したカラム幅よりも利用可能な幅が狭い場合のみ)。length は正の値である必要があり、そうでなければ無効になります。
<'column-count'>
正の <integer> で、要素のコンテンツが流れこむカラム数の理想値を記述します。column-width がすでに auto 以外の値にセットされていれば、単に列数の最大許容値を示します。

.content-box {
  border: 10px solid #000000;
  columns:3;
}

仕様

仕様書 策定状況 コメント
CSS Multi-column Layout Module
columns の定義
勧告候補  

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有)-webkit 9 (9)-moz 10 11.1 3.0 (522)-webkit
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? (有) ? ? ?

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: Sebastianz, Prinz_Rana, fscholz, ethertank, sosleepy
 最終更新者: Sebastianz,