CSS column-width| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル

column-width CSS プロパティとは

トピック：マルチカラム要素の列の最適な幅を指定する 事ができる これは絶対値ではありません。 ブラウザは他のプロパティの値、特に列数に応じて列の幅を調整することがある

プロパティ column-width

    基本 書式：セレクタ {column-width:値;}
    使用上の注意：
  • 列の数は、要素全体のすべてのコンテンツを表示するために必要な列の最小数になるcolumn-widthはフレキシブルなプロパティ です 。 column-widthをブラウザの最小幅の候補と考えてください。 ブラウザーが指定された 、幅で少なくとも2つの列に収まらないと、列は停止して1つの列にドロップする

実例 コード 1

サンプル コードを試す
  • p {
  • -webkit-column-width: 150px; /* Chrome, Safari, Opera */
  • -moz-column-width: 150px; /* Firefox */
  • column-width: 150px; /* Standard syntax */
  • }

プロパティ 定義と使用法

デフォルト値・初期値 :auto
適用対象 :テーブルラッパーボックス以外のコンテナをブロックする
継承 :不可
メディア :visual
計算値 :ゼロ以上の絶対的な長さ
CSS Version CSS3
アニメーションの種類 :length
JavaScript 構文 object.style.columnWidth="funWebref"
正規順序 :per grammar
CSSの構文column-width: auto | length | initial | inherit;

プロパティ値

値説明
length(長さ)列の幅を指定する絶対単位または相対単位の長さ。
auto列幅は、複数の列要素の他のプロパティ値（column-Countなど）によって決まります。これはデフォルト値です。
inheritこのプロパティをデフォルト値に設定する
inherit親要素からこのプロパティを継承する
unsetこの値は、プロパティが継承されるかどうかに応じて、inheritまたはのいずれかinitialとして機能します。つまり、すべてのプロパティを継承可能な場合は親の値に設定し、継承できない場合は初期値に設定する

サポートするデスクトップ ブラウザ対応・互換性

PropertyDesktop 互換性
column-widthChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯50フルサポート◯12フルサポート◯50フルサポート◯10フルサポート◯11.1フルサポート◯3
Intrinsic sizes サポートなし✖ 不明サポートなし✖サポートなし✖サポートなし✖サポートなし✖
display: table-captionフルサポート◯ありフルサポート◯ありフルサポート◯37フルサポート◯ありフルサポート◯ありフルサポート◯あり

サポートするモバイル ブラウザ対応・互換性

PropertyMobile 互換性
column-widthAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートフルサポート◯ありフルサポート◯50フルサポート◯ありフルサポート◯50フルサポート◯ありフルサポート◯ありフルサポート◯5.0
Intrinsic sizes サポートなし✖ 不明 不明サポートなし✖サポートなし✖サポートなし✖ 不明
display: table-captionフルサポート◯ありフルサポート◯50フルサポート◯ありフルサポート◯37フルサポート◯ありフルサポート◯ありフルサポート◯5.0
：column-width 関連記事
CSS column-width| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS column-width | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS