概要
CSS の column-width
プロパティは、最適な列幅を提案するものです。この値は絶対的ではなく、目安になるものです。ブラウザは、画面サイズに応じた拡縮可能なデザインをかなえるために、提案された値の周辺で列の幅を調整します。特に、優先度の高い column-count
プロパティが存在するときは、正確な列幅を設定するために、すべての長さが指定されている必要があります。すべての長さとは、横方向のテキストでは width
、column-width
、column-gap
、column-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;
}
仕様
ブラウザ実装状況
機能 |
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 |
未サポート |
未サポート |
未サポート |
未サポート |
未サポート |