menu
menu

キーワード検索

column-gap【CSS3リファレンス】

  • CSS

column-gap

こんにちは(・∀・)

 CSS3で新しく追加されたプロパティをご紹介します。今回ご紹介するCSSプロパティはcolumn-gapです。

概要

 column-gapプロパティを使用して段組間の幅を指定する事ができます。



.sample {
	column-gap: 2em;
}
適用要素

 段組レイアウトされている要素

指定できる値
数値+単位
数値に単位を付けて段と段の幅を設定します。負の値は設定できません。
normal
ブラウザによります。デフォルトは1em程度です。
初期値

 normal

サンプルデモ

段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。

HTML

<p class="demo">
段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。段組のサンプルです。
</p>
CSS

.demo {
	column-width: 10em;
	column-gap: 4em;
	-moz-column-width: 10em;
	-moz-column-gap: 4em;
	-webkit-column-width: 10em;
	-webkit-column-gap: 4em;
	-o-column-width: 10em;
	-o-column-gap: 4em;
}

 *サンプルのCSSはVendor-Prefixを使用した例も載せてあります。

  • カテゴリー:CSS