HTML & CSS

リファレンス

CSS

コラム カウント

column-countプロパティ

段組の列数を指定するプロパティです。

  • 初期値

    auto

  • 継承

    不可

  • 適用できる要素

    テーブル要素を除いたブロックレベル要素、テーブルセル、インラインブロック要素

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

  • auto – 列数を自動的に決める。初期値
  • 数値 – 列数を1以上の整数で指定。column-widthプロパティも指定している場合、column-countプロパティで指定した列数が最大値となるように表示されます。

パターン1

値に「2」を指定している例です。

CSSコード例

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

表示例:

「2」を指定

パターン2

column-widthプロパティと同時に指定している例です。

column-widthプロパティのみ指定している場合は表示幅に収まる範囲の列数となります。column-countプロパティと同時に指定している場合、column-countプロパティで指定した数値が最大の列数となります。

CSSコード例

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

表示例:

column-widthと併用した例

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

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

ありがとうございます。
コメントを送信しました。