CSS columns プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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 プロパティの一括指定です。
構文
/* 段の幅 */
columns: 18em;
/* 段数 */
columns: auto;
columns: 2;
/* 段の幅と段数の両方 */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;
/* 列幅や列数と列の高さ */
columns: 18em / 10em;
columns: 2 / 90vh;
columns: 2 auto / 300px;
/* グローバル値 */
columns: inherit;
columns: initial;
columns: revert;
columns: revert-layer;
columns: unset;
columns プロパティの値は、<column-count> や <column-width> の値を、任意の順序で指定できます。また、必要に応じて、スラッシュ (/) の後に <column-height> の値を続けて指定することもできます。
値
<'column-width'>-
理想的な段の幅であり、
<length>またはautoキーワードで定義されます。実際の段の幅は、実際の空間に合わせて広くなったり狭くなったりします。column-widthを参照してください。 <'column-count'>-
要素の内容物が流れる理想的な段の数であり、
<integer>またはautoキーワードで定義します。<integer>で指定された場合、許可される列の最大数を定義します。column-countを参照してください。 <'column-height'>-
<length>またはキーワードautoで、定義された列の高さです。column-heightを参照してください。
メモ:
<column-height> の値を設定すると、column-wrap プロパティは初期値である auto にリセットされます。<column-height> が <length> に設定されている場合、column-wrap の auto 値は wrap として解釈されます。<column-height> が auto に設定されている場合、nowrap として解決されます。
公式定義
| 初期値 | 一括指定の次の各プロパティとして
|
|---|---|
| 適用対象 | 表ラッパーボックスを除くブロックコンテナー |
| 継承 | なし |
| 計算値 | 一括指定の次の各プロパティとして
|
| アニメーションの種類 | 一括指定の次の各プロパティとして
|
形式文法
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>
<integer> =
<number-token>
例
3 つの等しい段の設定
この例では、テキストコンテナーを 3 つの等幅の列に分割する方法を示しています。
HTML
テキストコンテンツを含む基本的な <p> 要素を挿入します。
<p class="content-box">
これは、 CSS の <code>columns</code> プロパティを使用して 3 つの列に分割されたテキストの束です。テキストは各カラムに均等に配置されています。
</p>
CSS
段落に columns プロパティを設定し、<column-count> の値を 3、<column-width> の値を auto に指定しました。
.content-box {
columns: 3 auto;
}
結果
テキストが 3 つの段に分かれている点に注意してください。
折り返しと固定の高さの段組み
この例では、columns 一括指定プロパティに <column-height> の値を追加することで、テキストコンテナーを固定の高さの段に分割し、コンテナーのインライン端に達した際に改行されるようにする方法を示しています。
HTML
いくらかのテキストがある基本的な <p> 要素を設置します。
<p class="content-box">
これは、CSS の <code>columns</code> プロパティを使用し、3 つの段に分割されたテキストです。これには、<code>column-count</code> の値として <code>3</code>、<code>column-width</code> の値として <code>auto</code>、<code>column-height</code> の値として <code>5em</code> が指定されています。<code>column-wrap</code> の値は初期値である <code>auto</code> に設定されています。<code>column-height</code> の値が指定されている場合、<code>column-wrap: auto</code> は <code>wrap</code> として解釈され、それぞれの段が複数行にまたがって表示されます。テキストは各段に均等に配分され、複数行に配置されます。
</p>
CSS
段落に columns プロパティを設定し、<column-count> の値を 3、<column-width> の値を auto、<column-height> の値を 5em としました。<column-height> が <length> に設定されているため、段落の column-wrap 値は wrap となり、段が複数行にまたがって表示することができます。
.content-box {
columns: 3 auto / 5em;
}
結果
テキストが 3 つの段に分かれている点に注目してください。それぞれの段の高さは 5em です。段 3 つごとに、段組みはブロック方向に改行されます。
仕様書
| 仕様書 |
|---|
| CSS Multi-column Layout Module Level 2 # propdef-columns |