cman.jp > WEBページ作成TOP > CSSリファレンス > 「マルチカラムのカラムのバランス、間隔」
WEBページ作成
広告
column-fill,column-gap,column-span 「マルチカラムのカラムのバランス、間隔」
マルチカラムのカラムのバランス、間隔、カラムをまたぐかを指定します。
- 「column-fill」は、マルチカラムのカラムのバランス（高さ）を揃えるか指定します。
- 「column-gap」は、マルチカラムのカラムとカラムの間隔を指定します。
- 「column-span」は、マルチカラムのカラムをまたいで表示するかを指定します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | マルチカラム指定の 要素 | しない |
広告
column-fill,column-gap,column-span の指定方法
| 構文 | |
|---|---|
|
column-fill : balance ｜ auto; column-gap : normal ｜ 値; column-span : none ｜ all; |
|
| プロパティ/設定値 | 意味 |
| column-fill: balance; | 高さを揃えて表示。 |
| column-fill: auto; |
前づめで表示。 ※高さが確定している場合のみ機能するので、高さ指定か、映像を表示する場合に有効となる。 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
| column-gap: normal; | ブラウザの標準の間隔。推奨値は1emです。 |
|
column-gap: 10px; column-gap: 2em; |
カラムの間隔を値で指定 「長さ・大きさの単位」参照 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
| column-span: none; | カラムをまたがない。1カラム内に表示。 |
| column-span: all; | カラムをまたいで表示。 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
※ 未対応のブラウザの場合、ベンダープレフィックスが必要です。
column-fill,column-gap,column-span のサンプル
<style type="text/css">
.css-column-init{
columns : 4;
column-fill : auto;
column-gap : normal;
height: 100px;
}
.css-column-init h4{column-span : none;}
.css-fill-gap-span{
columns : 4;
column-fill : balance;
column-gap : 2em;
height: 100px;
}
.css-fill-gap-span h4{column-span : all;}
</style>
<!-- html -->
<div class="css-column-init"><h4>◆column-fill: auto; ◆column-gap: normal; ◆column-span: none;</h4>
<div>column-fill、column-gap、column-spanを初期値で指定。column-fill、column-gap、column-spanを初期値で指定。column-fill、column-gap、column-spanを初期値で指定。column-fill、column-gap、column-spanを初期値で指定。</div>
</div>
<div class="css-fill-gap-span"><h4>◆column-fill: balance; ◆column-gap: 2em; ◆column-span: all;</h4>
<div>column-fill、column-gap、column-spanをそれぞれ指定。column-fill、column-gap、column-spanをそれぞれ指定。column-fill、column-gap、column-spanをそれぞれ指定。column-fill、column-gap、column-spanをそれぞれ指定。</div>
</div>
◆column-fill: auto; ◆column-gap: normal; ◆column-span: none;
column-fill、column-gap、column-spanを初期値で指定。column-fill、column-gap、column-spanを初期値で指定。column-fill、column-gap、column-spanを初期値で指定。
◆column-fill: balance; ◆column-gap: 2em; ◆column-span: all;
column-fill、column-gap、column-spanをそれぞれ指定。column-fill、column-gap、column-spanをそれぞれ指定。column-fill、column-gap、column-spanをそれぞれ指定。
| 関連するCSS(STYLE) | |
|---|---|
| column-count | マルチカラムのカラムの数 |
| column-gap | マルチカラムのカラムの間隔 |
| column-rule | マルチカラムの区切り線 |
| columns | マルチカラムのカラムの数と横幅 |
| column-rule-color | マルチカラムの区切り線の色 |
| column-rule-style | マルチカラムの区切り線のスタイル |
| column-rule-width | マルチカラムの区切り線の太さ |
| column-span | マルチカラムのカラムをまたがって表示 |
| column-width | マルチカラムのカラムの横幅 |
広告