columns
CSS の columns
プロパティは、段組みされた要素の段の幅や段数を設定します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
これは column-width
と column-count
の両方を一度に便利に宣言できる一括指定プロパティです。他の一括指定プロパティと同様に、指定されなかった個別の値は初期値が設定されます。
構文
/* 段の幅 */
columns: 18em;
/* 段数 */
columns: auto;
columns: 2;
/* 段の幅と段数の両方 */
columns: 2 auto;
columns: auto 12em;
columns: auto auto;
/* グローバル値 */
columns: inherit;
columns: initial;
columns: unset;
columns
プロパティは以下に挙げる値を1つまたは2つで、順不同で指定します。
値
<'column-width'>
<length>
値またはauto
キーワードで、段の幅を最適化するヒントになります。実際の段の幅はより広くなったり(余白を埋めるため)、より狭くなったり(利用可能なスペースが指定された段の幅よりも小さい場合のみ)します。この値は正の数だけで、そうでなければ宣言は無効になります。<'column-count'>
- 正の
<integer>
のみで、要素の中で流れる理想的な段数を記述します。column-width
がauto
以外の値で一緒に設定された場合は、最大の段数を示します。
構文形式
例
HTML
<p class="content-box">
This is a bunch of text split into three columns
using the CSS `columns` property. The text
is equally distributed over the columns.
</p>
CSS
.content-box {
columns: 3 auto;
}
結果
仕様策定状況
仕様書 | 策定状況 | コメント |
---|---|---|
CSS Multi-column Layout Module columns の定義 |
草案 | 初回定義。 |
初期値 | 一括指定の次の各プロパティとして
|
---|---|
適用対象 | 表ラッパーボックスを除くブロックコンテナー |
継承 | なし |
計算値 | 一括指定の次の各プロパティとして
|
アニメーションの種類 | 一括指定の次の各プロパティとして |
ブラウザーの対応
BCD tables only load in the browser