blob: 8b79651b096e70ee0fa1cb902f30d4f0189a96ac (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
---
title: CSS 段組みレイアウト
slug: Web/CSS/CSS_Columns
tags:
- CSS
- CSS 段組みレイアウト
- ガイド
- レイアウト
- 概要
- リファレンス
translation_of: Web/CSS/CSS_Columns
---
{{CSSRef("CSS3 Multicol")}}
**CSS 段組みレイアウト**は CSS のモジュールの一つで、段組みレイアウトの対応を追加するものです。対応内容はレイアウトする段数の指定、段から段へのコンテンツの流れ方、段間の空白、段区切り線 (段間罫) などの対応が含まれています。
## 基本的な例
以下の例では、 {{cssxref("column-count")}} プロパティをコンテナーのクラスの要素に適用しています。 `column-count` の値が `3` なので、内容物は同じ寸法の 3 つの段に並べられます。
{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}
## 断片化との関係
段組みレイアウトは、文書全体が印刷ページに分割されるように行ボックスに分割することから、[ページ付きメディア](/ja/docs/Web/CSS/CSS_Pages)に密接に関連します。従って、 [CSS 断片化](/ja/docs/Web/CSS/CSS_Fragmentation)仕様書に定義されているプロパティが、段間の内容物の区切り位置を制御するために必要になりました。
## リファレンス
### 段組みレイアウトのプロパティ
- {{cssxref("column-count")}}
- {{cssxref("column-fill")}}
- {{cssxref("column-gap")}}
- {{cssxref("column-rule")}}
- {{cssxref("column-rule-color")}}
- {{cssxref("column-rule-style")}}
- {{cssxref("column-rule-width")}}
- {{cssxref("column-span")}}
- {{cssxref("column-width")}}
- {{cssxref("columns")}}
### 関連する CSS 断片化のプロパティ
- {{cssxref("break-after")}}
- {{cssxref("break-before")}}
- {{cssxref("break-inside")}}
- {{cssxref("orphans")}}
- {{cssxref("widows")}}
## ガイド
- [段組みの基本概念](/ja/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol)
- : 段組みレイアウト仕様の概要です。
- [段のスタイル付け](/ja/docs/Web/CSS/CSS_Columns/Styling_Columns)
- : 段間罫と段間の空間の使い方です。
- [段抜きと段の均衡](/ja/docs/Web/CSS/CSS_Columns/Spanning_Columns)
- : すべての段にまたがる要素の作り方と、段を埋める方法の制御です。
- [段組みでのはみ出しの扱い](/ja/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol)
- : アイテムが段をあふれたときに起こることと、段内の内容物が多すぎてコンテナーに収まらない場合に起こることです。
- [段組みにおける内容の分割の扱い](/ja/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol)
- : 分割の仕様とどこで内容を区切るかの制御方法です。
## 仕様書
| 仕様書 | 状態 | 備考 |
| ----------------------------- | -------------------------- | -------- |
| {{SpecName('CSS3 Multicol')}} | {{Spec2('CSS3 Multicol')}} | 初回定義 |
## 関連情報
他の CSS レイアウト技術には以下のようなものがあります。
- [CSS フレキシブルボックスレイアウト](/ja/docs/Web/CSS/CSS_Flexible_Box_Layout) (CSS フレックスボックス)
- [CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)
|
