columns
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017年3月.
columns は CSS 一括指定プロパティで、要素の内容物を描画する際に使用する段数や段の幅を設定します。
試してみましょう
columns: 2; columns: 6rem auto; columns: 12em; columns: 3; <section id="default-example"> <p id="example-element"> ロンドン。ミカエル学期の終わり、リンカーンズ・イン・ホールに大法官が座っています。容赦のない 11 月の天候。街は、まるで地球から水が引き始めたばかりのように泥だらけで、ホルボーン・ヒルを象のようなトカゲのようによちよち歩く、体長 12 メートルほどのメガロサウルスに出会っても不思議ではないでしょう。 </p> </section> #example-element { min-width: 21rem; text-align: left; } 構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
構文
css
/* 段の幅 */ columns: 18em; /* 段数 */ columns: auto; columns: 2; /* 段の幅と段数の両方 */ columns: 2 auto; columns: auto 12em; columns: auto auto; /* グローバル値 */ columns: inherit; columns: initial; columns: revert; columns: revert-layer; columns: unset; columns プロパティは以下に挙げる値を 1 つまたは 2 つで、順不同で指定します。
値
<'column-width'>-
理想的な段の幅であり、
<length>またはautoキーワードで定義されます。実際の段の幅は、実際の空間に合わせて広くなったり狭くなったりします。column-widthを参照してください。 <'column-count'>-
要素の内容物が流れる理想的な段の数であり、
<integer>またはautoキーワードで定義します。この値と段の幅の両方がautoでない場合は、最大の段数を示します。column-countを参照してください。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | 表ラッパーボックスを除くブロックコンテナー |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして |
形式文法
columns =
[ <'column-width'> || <'column-count'> ] [ / <'column-height'> ]?
<column-width> =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )
<column-count> =
auto |
<integer [1,∞]>
<column-height> =
auto |
<length [0,∞]>
<length-percentage> =
<length> |
<percentage>
例
3 つの等しい段の設定
HTML
html
<p class="content-box"> これは、 CSS の `columns` プロパティを使用して 3 つの列に分割されたテキストの束です。テキストは各カラムに均等に配置されている。 </p> CSS
css
.content-box { columns: 3 auto; } 結果
仕様書
| Specification |
|---|
| CSS Multi-column Layout Module Level 1 # columns |