column-count CSS プロパティとは
トピック：複数列の要素の中の列の数を指定する ことができる 列数を自動または特定の数値(たとえば、3列のレイアウトの場合は3)に指定できる
プロパティ column-count
基本 書式：セレクタ {column-count:値;}
情報：columnsプロパティを使用して、幅と列数を一度に設定することもできる
実例 コード 1
サンプル コードを試すdiv { -webkit-column-count: 3 ; -moz-column-count: 3 ; column-count: 3 ; }
プロパティ 定義と使用法
| デフォルト値・初期値 : | auto |
|---|
| 適用対象 : | テーブルラッパーボックス以外のコンテナをブロックする |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS3 |
|---|
| アニメーションの種類 : | integer （整数） |
|---|
| JavaScript 構文 | object.style.columnCount=3 |
|---|
| 正規順序 : | per grammar |
|---|
| CSSの構文 | column-count: number | auto | initial | inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
number | 複数列要素の列数を指定する正の整数値。 列幅も非自動値に設定されている場合は、column-width許容数を示すことがある。 |
auto | 列の数は、column-widthなどの他のCSSプロパティによって決まります。 これはデフォルト値です。 |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
unset | この値は、プロパティが継承されるかどうかに応じて、inheritまたはのいずれかinitialとして機能します。つまり、すべてのプロパティを継承可能な場合は親の値に設定し、継承できない場合は初期値に設定する |
CSS 実例 サンプル：column-count: 3;- CSS の段組みレイアウト (Multi-column Layout) は、ブロックレイアウトモードを拡張して、文章の段組みを定義しやすくするものです。行が長すぎると、文章が読みづらくなるものです。行末から次の行の先頭まで目を移動する距離が長すぎると、どの行を読んでいたか見失ってしまうことがある。 したがって、大きな画面を最大限に活用するためには、新聞のように幅が狭い段を並べた方が適切
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| column-count | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯50 | フルサポート◯12 | フルサポート◯52 | フルサポート◯10 | フルサポート◯11.1 | フルサポート◯3 |
|---|
display: table-caption | フルサポート◯あり | フルサポート◯あり | フルサポート◯37 | フルサポート◯あり | フルサポート◯あり | フルサポート◯あり |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| column-count | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯あり | フルサポート◯50 | フルサポート◯あり | フルサポート◯52 | フルサポート◯あり | フルサポート◯あり | フルサポート◯5.0 |
|---|
display: table-caption | フルサポート◯あり | 不明 | フルサポート◯あり | フルサポート◯37 | フルサポート◯あり | フルサポート◯あり | 不明 |
|---|
CSS column-count | CSS プロパティ 値| 意味 使い方 実例 – WebRef