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 id="default-example"> <p id="example-element"> ロンドン。ミカエル学期の終わり、リンカーンズ・イン・ホールに大法官が座っています。容赦のない 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 class="content-box"> これは、 CSS の <code>column-count</code> プロパティを使用して 3 段に分割されたテキストの束です。テキストはそれぞれの段に均等に配置されています。 </p> CSS
css
.content-box { column-count: 3; } 結果
仕様書
| Specification |
|---|
| CSS Multi-column Layout Module Level 1 # cc |
ブラウザーの互換性
Loading…
関連情報
column-width,columns一括指定column-rule-color,column-rule-style,column-rule-width,column-rule一括指定- 学習: 段組みレイアウト（レイアウトの学習）
- 段組みの基本概念