CSS列幅プロパティ
例
列幅を100pxにするように指定します。
div
{
column-width: 100px;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
プロパティはcolumn-width
列幅を指定します。
列の数は、要素全体のすべてのコンテンツを表示するために必要な最小の列数になります。
column-width
柔軟なプロパティです。ブラウザcolumn-width
の最小幅の提案と考え
てください。ブラウザが指定された幅に少なくとも2つの列を収めることができなくなると、列は停止し、1つの列にドロップします。
デフォルト値: | 自動 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | object .style.columnWidth = "100px" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-または-moz-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
CSS構文
column-width: auto|length|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
auto | Default value. The column width will be determined by the browser | |
length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
<div>要素のテキストを3つの列に分割します。
div
{
column-count: 3;
}
例
列間に40ピクセルのギャップを指定します。
div
{
column-gap: 40px;
}
例
列間のルールの幅、スタイル、および色を指定します。
div
{
column-rule: 4px double #ff00ff;
}
関連ページ
CSSチュートリアル:CSS複数列
HTML DOMリファレンス:columnWidthプロパティ