column-gapプロパティは、アイテム同士の縦方向の間隔を指定する際に使用します。
column-gapプロパティの実際の挙動は、
グリッドレイアウト・
フレキシブルレイアウト・
マルチカラムレイアウトなど、
column-gapプロパティを適用するレイアウトコンテナの種類によって異なります。
初期値の normal は、マルチカラムレイアウトでは 1em と算出されますが、それ以外のレイアウトでは 0px となります。
column-gapプロパティはマルチカラムレイアウトに適用されますが、
現在のところrow-gapプロパティはマルチカラムレイアウトには適用されません。
マルチカラムレイアウトにおいてカラム同士の区切り線が存在する場合には、カラムの間隔の中央に表示されます。
column-gapプロパティは、テーブルのセル同士の間隔を制御する目的では使用しません。
そのような目的にはborder-spacingプロパティを使用してください。
column-gapプロパティに負の値を指定することはできません。
■値
- normal
- マルチカラムレイアウトでは1em、それ以外のレイアウトでは0px(初期値)
- 長さ
- 数値や%値でアイテム同士の縦方向の間隔を指定
■初期値・適用対象・値の継承
- 初期値
- normal
- 適用対象
- マルチカラム要素、フレックスコンテナ、グリッドコンテナ
- 値の継承
- しない
■マルチカラムレイアウトでの使用例
CSSソースは外部ファイル(sample.css)に記述
div.sample1 {
width: 100%;
column-count: 3;
column-gap: 50px;
}
HTMLソース
<div class=”sample1″>
<p>
池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。
</p>
<p>
ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
</p>
<p>
半日歩いて神様のところへついたかえるはいいました。「神様、ぼくにはかえるという名前は似合っていません。もっと上等な名前をくださいな。」神様はおっしゃいました。「かえるよ、お前は以前にも同じ願いをしにきたのを忘れたのか。お前が名前をかえるかえるといってばかりなので、とうとうかえるという名前になったのじゃ。」
</p>
<p>
忘れっぽいかえるは、以前にも神様に同じお願いをしたことをようやく思い出しました。かえるは名前をかえたいと思っていたことが恥ずかしくなって飛んで帰りました。今でもかえるは神様のおはなしをときどき忘れてしまい、名前をかえて欲しいとお願いに行っているそうな。
</p>
</div>
ブラウザ上の表示
池のほとりにかえるが住んでいました。かえるは自分の名前があまり好きではありませんでした。「かえるなんて名前より、もっとふさわしい素敵な名前があるはずだよ。」かえるはまいにちそう考えて暮らしていました。
ある朝かえるは思いました。「そうだ、神様にお願いして新しい名前をつけてもらおう。神様ならきっと素敵な名前をつけてくださるはずだよ。」そう思うといてもたってもいられなくなり、かえるは神様のところへ出かけました。
半日歩いて神様のところへついたかえるはいいました。「神様、ぼくにはかえるという名前は似合っていません。もっと上等な名前をくださいな。」神様はおっしゃいました。「かえるよ、お前は以前にも同じ願いをしにきたのを忘れたのか。お前が名前をかえるかえるといってばかりなので、とうとうかえるという名前になったのじゃ。」
忘れっぽいかえるは、以前にも神様に同じお願いをしたことをようやく思い出しました。かえるは名前をかえたいと思っていたことが恥ずかしくなって飛んで帰りました。今でもかえるは神様のおはなしをときどき忘れてしまい、名前をかえて欲しいとお願いに行っているそうな。
■グリッドレイアウトでの使用例
CSSソースは外部ファイル(sample.css)に記述
div.sample2 {
display: grid;
grid-template-rows: 80px 100px 40px;
grid-template-columns: 50px 100px 40px;
row-gap: 100px;
column-gap: 10px;
}
div.sample2 div {
border-radius:4px;
background-color:#66cc99;
}
HTMLソース
<div class=”sample1″>
<div>一</div>
<div>ニ</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
<div>七</div>
<div>八</div>
<div>九</div>
</div>
ブラウザ上の表示
■関連項目
カラムの数と幅
columns …… カラム幅とカラム数を指定する
column-width …… カラム幅を指定する
column-count …… カラム数を指定する
カラムの間隔と区切り線
column-gap …… カラムの間隔を指定する
column-rule …… カラムの区切り線のスタイル・幅・色を指定する
column-rule-color …… カラムの区切り線の色を指定する
column-rule-style …… カラムの区切り線のスタイルを指定する
column-rule-width …… カラムの区切り線の幅を指定する
カラムへの要素の配置
column-span …… 要素がまたがる(横切る)カラム数を指定する
column-fill …… カラム同士の高さ(長さ)を揃えるかどうかを指定する