From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/css_columns/index.html | 100 ++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 files/ja/web/css/css_columns/index.html (limited to 'files/ja/web/css/css_columns/index.html') diff --git a/files/ja/web/css/css_columns/index.html b/files/ja/web/css/css_columns/index.html new file mode 100644 index 0000000000..e3354ed01b --- /dev/null +++ b/files/ja/web/css/css_columns/index.html @@ -0,0 +1,100 @@ +--- +title: CSS 段組みレイアウト +slug: Web/CSS/CSS_Columns +tags: + - CSS + - CSS 分割 + - CSS 段組みレイアウト + - Reference + - レイアウト + - 概要 + - 段組み +translation_of: Web/CSS/CSS_Columns +--- +
{{CSSRef("CSS3 Multicol")}}
+ +

CSS 段組みレイアウトは CSS のモジュールの一つで、段組みレイアウトの対応を追加するものです。対応内容はレイアウトする段数の指定、段から段へのコンテンツの流れ方、段間の空白、段区切り線 (段間罫) などの対応が含まれています。

+ +

基本的な例

+ +

以下の例では、 {{cssxref("column-count")}} プロパティをコンテナーのクラスの要素に適用しています。 column-count の値が 3 なので、内容物は同じ寸法の３つの段に並べられます。

+ +

{{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}}

+ +

分割との関連

+ +

段組みレイアウトは、文書全体が印刷ページに分割されるように行ボックスに分割することから、ページ付きメディアに密接に関連します。従って、 CSS 分割仕様書に定義されているプロパティが、段間の内容物の区切り位置を制御するために必要になりました。

+ +

リファレンス

+ +

段組みレイアウトのプロパティ

+ +
+ +
+ + + +
+ +
+ +

ガイド

+ +
+
段組みの基本概念
+
段組みレイアウト仕様の概要です。
+
段のスタイル付け
+
段間罫と段間の空間の使い方です。
+
段抜きと段の均衡
+
すべての段にまたがる要素の作り方と、段を埋める方法の制御です。
+
段組みでのはみ出しの扱い
+
アイテムが段をあふれたときに起こることと、段内のコンテンツが多すぎてコンテナーに収まらない場合に起こることです。
+
段組みにおける内容の分割の扱い
+
分割の仕様とどこで内容を区切るかの制御方法です。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}初回定義
+ +

関連情報

+ +

他の CSS レイアウト技術には以下のようなものがあります。

+ + -- cgit v1.2.3-54-g00ecf