Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

CSS の column-width プロパティは、最適な列幅を提案するものです。この値は絶対的ではなく、目安になるものです。ブラウザは、画面サイズに応じた拡縮可能なデザインをかなえるために、提案された値の周辺で列の幅を調整します。特に、優先度の高い column-count プロパティが存在するときは、正確な列幅を設定するために、すべての長さが指定されている必要があります。すべての長さとは、横方向のテキストでは widthcolumn-widthcolumn-gapcolumn-rule-width です。

初期値auto
適用対象非置換ブロック要素(テーブル要素を除く)、テーブルセル、インラインブロック要素
継承不可
メディアvisual
計算値ゼロ以上の絶対的な長さ
アニメーションの可否可。 の値として補完しますlength
正規順序形式文法で定義される一意のあいまいでない順序

構文

形式文法: <length> | auto
column-width: auto
column-width: 6px     /* 様々な <length> 値 */
column-width: 25em
column-width: 0.3vw

column-width: inherit

<length>
列の最適な幅の目安になる <length> 値です。実際の列の幅はそれより広くなるか(利用可能なスペースを埋めるため)、狭くなるか(指定した列幅よりも利用可能なスペースが小さいとき)します。この長さは厳密には正の値でなければならず、そうでなければ宣言は無効になります。</length>
auto
column-count のような、他の CSS プロパティによって列の幅が決められることを示すキーワードです。

.content-box {
  border: 10px solid #000000;
  column-width: 300px;
}

仕様

仕様書 策定状況 コメント
CSS Writing Modes Module Level 3
column-width の定義
勧告候補 キーワード min-contentmax-contentfill-availablefit-content による intrinsic size を追加
CSS Multi-column Layout Module
column-width の定義
勧告候補  

ブラウザ実装状況

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

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

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