このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
column-count
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月.
column-count はCSS のプロパティで、要素のコンテンツを指定された段数の段組みに分割します。
試してみましょう
column-count: 2;column-count: 3;column-count: 4;column-count: auto;column-width: 8rem;<section> <p> ロンドン。ミカエル学期の終わり、リンカーンズ・イン・ホールに大法官が座っています。容赦のない 11 月の天候。街は、まるで地球から水が引き始めたばかりのように泥だらけで、ホルボーン・ヒルを象のようなトカゲのようによちよち歩く、体長 12 メートルほどのメガロサウルスに出会っても不思議ではないでしょう。 </p></section>#example-element { width: 100%; text-align: left;}構文
css
/* キーワード値 */column-count: auto;/* <integer> 値 */column-count: 3;/* グローバル値 */column-count: inherit;column-count: initial;column-count: revert;column-count: revert-layer;column-count: unset;値
auto段組みの段数は
column-widthなど、他の CSS プロパティによって決定されます。<integer>正の
整数のみで、要素の中で流れる理想的な段の数を記述します。column-widthがauto以外の値で一緒に設定された場合は、最大の段数を示します。
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | 表ラッパーボックスを除くブロックコンテナー |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | integer |
形式文法
column-count =
auto|
<integer [1,∞]>
例
段落を 3 つの段に分割
HTML
html
<p> これは、 CSS の <code>column-count</code> プロパティを使用して 3 段に分割されたテキストの束です。テキストはそれぞれの段に均等に配置されています。</p>CSS
css
.content-box { column-count: 3;}結果
仕様書
| Specification |
|---|
| CSS Multi-column Layout Module Level 1 # cc |