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

column-width:段組みの横幅CSS3で追加

記事Mar. 6th,2021
マルチカラムレイアウトの段組みの横幅を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 column-width: auto;
適用対象 テーブル・包括ボックスを除くブロック・コンテナ
継承 しない
パーセント値 パーセント値は指定できません
計算値 指定された値
アニメーション 算出された値による

column-width”プロパティはマルチカラムレイアウトの段組みの横幅を指定するプロパティです。

マルチカラム・レイアウト

column-width”プロパティの値は段の中の行ボックスの長さとして定義されています。書字方向が縦書きの場合は“column-width”プロパティが指定するのは段の高さとなります。

column-width”プロパティで指定された横幅よりも狭い段がないようにできるだけ多くの段を配置します。

画像などのコンテンツが段の横幅よりも大きい場合はそのコンテンツは段からはみ出し、隣の段のコンテンツに重なります。

サンプルコード

div { column-width: 100px;}

説明
auto 他のプロパティの設定をもとに横幅を決定する (値が“auto”でないcolumn-count”プロパティなど。)
<length> pxemなどで段組みの理想的な横幅を指定 (正の値のみ指定できます。横幅は隙間を埋めるために指定した値より大きくなる場合があります。また、必要な領域がない場合は指定した値より小さくなる場合があります。)
共通キーワード

仕様書

Level 1
作業草稿(WD)
column-width
定義あり
Level 1
作業草稿(WD)
auto
定義あり
<length>
定義あり

使用例

段組みの横幅を指定する

.multi-column {
column-width: 100px;
}
<div class="multi-column">
<p>
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
</p>

<p>
夏は夜。月の頃はさらなり、闇もなほ、螢飛びちがひたる。雨など降るも、をかし。
</p>

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

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

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

夏は夜。月の頃はさらなり、闇もなほ、螢飛びちがひたる。雨など降るも、をかし。

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

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

段組みの横幅を自動で決定する

.multi-column {
column-count: 3;
column-width: auto;
}
<div class="multi-column">
<p>
春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。
</p>

<p>
夏は夜。月の頃はさらなり、闇もなほ、螢飛びちがひたる。雨など降るも、をかし。
</p>

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

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

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

夏は夜。月の頃はさらなり、闇もなほ、螢飛びちがひたる。雨など降るも、をかし。

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

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

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