column-span CSS プロパティとは
トピック：要素が複数列のレイアウトにまたがる列の数を指定する、ことができる 複数の列にまたがる要素は、スパニング要素と呼ばれる
プロパティ column-span
基本 書式：セレクタ {column-span:値;}
情報：- このプロパティは、すべての列にまたがる必要がある、複数のレイアウト内に見出しやその他の要素がある場合に便利 。
実例 コード 1
サンプル コードを試すh1 {-webkit-column-span: all; column-span: all; }
プロパティ 定義と使用法
| デフォルト値・初期値 : | none |
|---|
| 適用対象 : | フロート内に配置された、フローティングや絶対配置がなされていない全てのブロックレベル要素 |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS3 |
|---|
| アニメーションの種類 : | 個別 アニメーション可能なプロパティ 一覧 |
|---|
| JavaScript 構文 | object.style.columnSpan="funWebref" |
|---|
| 正規順序 : | per grammar |
|---|
| CSSの構文 | column-span: 1 | all | initial | inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
none | 要素が複数の列にまたがっていないことを指定。これはデフォルト値です。 |
all | 要素がすべての列にまたがるように指定。 |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
unset | この値は、プロパティが継承されるかどうかに応じて、inheritまたはのいずれかinitialとして機能します。つまり、すべてのプロパティを継承可能な場合は親の値に設定し、継承できない場合は初期値に設定する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| column-span | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯50 | フルサポート◯12 | サポートなし✖ | フルサポート◯10 | フルサポート◯11.1 | フルサポート◯あり |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| column-span | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯50 | フルサポート◯50 | フルサポート◯あり | サポートなし✖ | 不明 | フルサポート◯あり | フルサポート◯5.0 |
|---|
CSS column-span | CSS プロパティ 値| 意味 使い方 実例 – WebRef