column-gap CSS プロパティとは
トピック：マルチカラムレイアウトのカラム間のギャップのサイズを指定する、事ができる 列の間隔を標準または特定のサイズに指定できる たとえば、30ピクセルの値では30ピクセルの列間隔が作成する
プロパティ column-gap
基本 書式：セレクタ {column-gap:値;}
実例 コード 1
サンプル コードを試す.multicol { background: beige ; padding: 10px; width: 360px; -webkit-column-count: 3 ; -webkit-column-gap: 50px; -moz-column-count: 3 ; -moz-column-gap: 50px; column-count: 3 ; column-gap: 50px; }
プロパティ 定義と使用法
| デフォルト値・初期値 : | normal |
|---|
| 適用対象 : | マルチカラム要素、フレックスコンテナ、グリッドコンテナ |
|---|
| 継承 : | なし |
|---|
| パーセンテージ : | コンテンツ領域の対応 |
|---|
| メディア : | visual |
|---|
CSS Version | CSS3 |
|---|
| 計算値 : | 指定されたとおり<length>が絶対値になり、通常の計算は複数の列の要素を除いて0になります |
|---|
| JavaScript 構文 | object.style.columnGap="funWebref" |
|---|
| アニメーションの種類 : | length または percentage, calc(); |
|---|
| 正規順序 : | per grammar |
|---|
| CSSの構文 | column-gap: length | normal | initial | inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
length(長さ) | 列間のギャップのサイズを定義する長さの値。負であってはいけませんが、0に等しくてもかまいません。 |
normal | 列間のブラウザ定義のデフォルト間隔を使用することを示する ほとんどのブラウザでデフォルト値は1emです。 |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
unset | この値は、プロパティが継承されるかどうかに応じて、inheritまたはのいずれかinitialとして機能します。つまり、すべてのプロパティを継承可能な場合は親の値に設定し、継承できない場合は初期値に設定する |
CSS 実例 サンプル：column-gap: 12%; columns: 2;CSS グリッドレイアウトは当初、 grid-column-gap プロパティを定義していました。この接頭辞付きのプロパティは column-gap で置き換えられました。しかし、グリッドで grid-column-gap を実装しており column-gap を実装していないブラウザーに対応するため、上記の第二の対話型サンプルのように、接頭辞付きのプロパティを使用する必要があるでしょう。
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| column-gap | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯66 | フルサポート◯16 | フルサポート◯61 | サポートなし✖ | 不明 | サポートなし✖ |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| column-gap | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯66 | フルサポート◯66 | フルサポート◯16 | フルサポート◯61 | 不明 | サポートなし✖ | 不明 |
|---|
CSS column-gap | CSS プロパティ 値| 意味 使い方 実例 – WebRef