このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

column-fill”プロパティ:段組みのコンテンツの割り振りCSS3で追加

記事Mar. 14th,2021
マルチカラムレイアウトで段組みのコンテンツを均等に割り振るかどうかを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 column-fill: auto;
適用対象 マルチカラム・コンテナ
継承 No
パーセント値 パーセント値は指定できません
計算値 指定されたキーワード
アニメーション 離散

column-fill”プロパティはマルチカラムレイアウトで段組みのコンテンツをそれぞれの段に均等に割り振るかどうかを指定するプロパティです。

複数の段にまたがる要素(column-span:all;)の直前にあるコンテンツは“column-fill”プロパティの設定にかかわらず常に均等に割り振られます。

サンプルコード

div { column-fill: balance;}

説明
balance コンテンツをそれぞれの段に可能な限り均等に割り振る (ページ化メディアなどの断片化コンテキストでは最後の断片だけが均等に割り振られます。)
balance-all コンテンツをそれぞれの段に可能な限り均等に割り振る (ページ化メディアなどの断片化コンテキストでもすべての断片で均等に割り振られます。)
auto 順番に段を埋める
共通キーワード

仕様書

定義されている仕様書
Level 1
作業草稿(WD)
column-fill
定義あり
Level 1
作業草稿(WD)
balance
定義あり
balance-all
定義あり
auto
定義あり

使用例

コンテンツを均等に割り振る

.multi-column {
height: 300px;
column-count: 3;
column-fill: balance;
}

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

.multi-column {
height: 300px;
column-count: 3;
column-fill: balance-all;
}

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

コンテンツを順番に割り振る

.multi-column {
height: 300px;
column-count: 3;
column-fill: auto;
}

春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。

秋は夕暮。夕日のさして山端いと近くなりたるに、烏の寝所へ行くとて、三つ四つ二つなど、飛び行くさへあはれなり。まして雁などのつらねたるが、いと小さく見ゆる、いとをかし。日入りはてて、風の音、蟲の音など。

冬はつとめて。雪の降りたるは、いふべきにもあらず。霜などのいと白きも、またさらでも いと寒きに、火など急ぎおこして、炭持てわたるも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、炭櫃・火桶の火も、白き灰がちになりぬるは わろし。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク