概要
CSS の columns
プロパティは column-width
と column-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;
}
仕様
ブラウザ実装状況
機能 |
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 |
基本サポート |
? |
(有) |
? |
? |
? |
関連情報