HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

コラム ギャップ

column-gapプロパティ

段組の間隔を指定するプロパティです。

  • 初期値

    normal

  • 継承

    不可

  • 適用できる要素

    段組された要素

次の形式で値を指定することができます。
2016年9月時点では、Firefoxでこのプロパティを使用するにはベンダープレフィックス「-moz-」をつける必要があります。

  • normal – 段組の間隔を自動的に取る。初期値。
  • 数値 + 任意の単位 – 任意の単位で幅を指定。0以上の数値を指定する必要がある。

使用例

上から順に、値を「normal」「10px」「4em」と指定した例です。

CSSコード例

<style>
.element1 {
	-moz-column-count: 2;
	column-count: 2;
	-moz-column-gap: normal;
	column-gap: normal;
}
.element2 {
	-moz-column-count: 2;
	column-count: 2;
	-moz-column-gap: 10px;
	column-gap: 10px;
}
.element3 {
	-moz-column-count: 2;
	column-count: 2;
	-moz-column-gap: 4em;
	column-gap: 4em;
}
</style>
<p class="element1">ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。アジア系の観光客も多く、浴衣を着て川越街道を歩くことは素晴らしいコンテンツになっているようです。</p>
<p class="element2">ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。アジア系の観光客も多く、浴衣を着て川越街道を歩くことは素晴らしいコンテンツになっているようです。</p>
<p class="element3">ちゃんと観光地として歩いた川越街道は、昔ながらの街並みをゆったり楽しめる場所でした。通りは浴衣姿で歩いている女性も多く、とても風情があります。アジア系の観光客も多く、浴衣を着て川越街道を歩くことは素晴らしいコンテンツになっているようです。</p>

表示例:

3種類の値の指定例

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。