From 4b6da8afa990a8f57feab7b079d46276e8583f2e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 28 Dec 2021 23:37:18 +0900 Subject: Web/CSS/CSS_Columns を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/css_columns/index.html | 100 -------------------------------- files/ja/web/css/css_columns/index.md | 100 ++++++++++++++++++++++++++++++++ 2 files changed, 100 insertions(+), 100 deletions(-) delete mode 100644 files/ja/web/css/css_columns/index.html create mode 100644 files/ja/web/css/css_columns/index.md (limited to 'files') diff --git a/files/ja/web/css/css_columns/index.html b/files/ja/web/css/css_columns/index.html deleted file mode 100644 index 9a50ed13e4..0000000000 --- a/files/ja/web/css/css_columns/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -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 レイアウト技術には以下のようなものがあります。

- - diff --git a/files/ja/web/css/css_columns/index.md b/files/ja/web/css/css_columns/index.md new file mode 100644 index 0000000000..9a50ed13e4 --- /dev/null +++ b/files/ja/web/css/css_columns/index.md @@ -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