From 12dcd99f1954265d69c461fe2c2a477b52ce735c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 17 Oct 2021 22:55:22 +0900 Subject: CSS Box Alignment の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/column-gap/index.html | 207 --------------------------------- files/ja/web/css/column-gap/index.md | 207 +++++++++++++++++++++++++++++++++ 2 files changed, 207 insertions(+), 207 deletions(-) delete mode 100644 files/ja/web/css/column-gap/index.html create mode 100644 files/ja/web/css/column-gap/index.md (limited to 'files/ja/web/css/column-gap') diff --git a/files/ja/web/css/column-gap/index.html b/files/ja/web/css/column-gap/index.html deleted file mode 100644 index 032d6d4f62..0000000000 --- a/files/ja/web/css/column-gap/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: column-gap (grid-column-gap) -slug: Web/CSS/column-gap -tags: - - CSS - - CSS グリッドレイアウト - - CSS フレックスボックス - - CSS プロパティ - - CSS ボックス配置 - - CSS 段組みレイアウト - - Reference - - column-gap - - 'recipe:css-property' -translation_of: Web/CSS/column-gap ---- -
{{CSSRef}}
- -

column-gap は CSS のプロパティで、要素の段または列の間の隙間 ({{glossary("Gutters","溝")}}) の寸法を設定します。

- -
{{EmbedInteractiveExample("pages/css/column-gap.html")}}
- - - -

当初は段組みレイアウトの一部でしたが、 column-gap の定義は複数のレイアウト方法を含めるように拡張されました。現在はボックス配置の中で定義され、段組みレイアウト、フレキシブルボックス、グリッドレイアウトで使用されることがあります。

- -
-

CSS グリッドレイアウトは当初、 grid-column-gap プロパティを定義していました。この接頭辞付きのプロパティは column-gap で置き換えられました。しかし、グリッドで grid-column-gap を実装しており column-gap を実装していないブラウザーに対応するため、接頭辞付きのプロパティを使用する必要があるでしょう。

-
- -

構文

- -
/* キーワード値 */
-column-gap: normal;
-
-/* <length> 値 */
-column-gap: 3px;
-column-gap: 2.5em;
-
-/* <percentage> 値 */
-column-gap: 3%;
-
-/* グローバル値 */
-column-gap: inherit;
-column-gap: initial;
-column-gap: unset;
-
- -

column-gap プロパティは以下に挙げた値の一つで指定します。

- -

値

- -
-
normal
-
段間 (列間) にはブラウザー既定の幅が使われます。段組みレイアウトでは 1em と指定され、他の種類のレイアウトでは 0 になります。
-
{{CSSxRef("<length>")}}
-
段間 (列間) の寸法を {{CSSxRef("<length>")}} として定義します。 {{CSSxRef("<length>")}} のプロパティ値は負の数であってはいけません。
-
{{CSSxRef("<percentage>")}}
-
段間 (列間) の寸法を {{CSSxRef("<percentage>")}} として定義します。 {{CSSxRef("<percentage>")}} のプロパティ値は負の数であってはいけません。
-
- -

形式文法

- -{{CSSSyntax}} - -

例

- -

フレックスレイアウト

- -

HTML

- -
<div id="flexbox">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
-
- -

CSS

- -
#flexbox {
-  display: flex;
-  height: 100px;
-  column-gap: 20px;
-}
-
-#flexbox > div {
-  border: 1px solid green;
-  background-color: lime;
-  flex: auto;
-}
-
- -

結果

- -

{{EmbedLiveSample("Flex_layout", "auto", "120px")}}

- -

グリッドレイアウト

- -

HTML

- -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

CSS

- - - -
#grid {
-  display: grid;
-  height: 100px;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 100px;
-  column-gap: 20px;
-}
-
-#grid > div {
-  border: 1px solid green;
-  background-color: lime;
-}
-
- -

結果

- -

{{EmbedLiveSample("Grid_layout", "auto", "120px")}}

- -

段組みレイアウト

- -

HTML

- -
<p class="content-box">
-  This is some multi-column text with a 40px column
-  gap created with the CSS `column-gap` property.
-  Don't you think that's fun and exciting? I sure do!
-</p>
-
- -

CSS

- -
.content-box {
-  column-count: 3;
-  column-gap: 40px;
-}
-
- -

結果

- -

{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#column-row-gap", "column-gap")}}{{Spec2("CSS3 Box Alignment")}}グリッド及びフレックスボックスに適用
{{SpecName("CSS3 Grid", "#gutters", "column-gap")}}{{Spec2("CSS3 Grid")}}グリッドレイアウトにどう適用されるかを指定
{{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}{{Spec2("CSS3 Multicol")}}初回定義。
- -

{{CSSInfo}}

- -

ブラウザーの互換性

- -

フレックスレイアウトでの対応

- -

{{Compat("css.properties.column-gap.flex_context")}}

- -

グリッドレイアウトでの対応

- -

{{Compat("css.properties.column-gap.grid_context")}}

- -

段組みレイアウトでの対応

- -

{{Compat("css.properties.column-gap.multicol_context")}}

- -

関連情報

- - diff --git a/files/ja/web/css/column-gap/index.md b/files/ja/web/css/column-gap/index.md new file mode 100644 index 0000000000..032d6d4f62 --- /dev/null +++ b/files/ja/web/css/column-gap/index.md @@ -0,0 +1,207 @@ +--- +title: column-gap (grid-column-gap) +slug: Web/CSS/column-gap +tags: + - CSS + - CSS グリッドレイアウト + - CSS フレックスボックス + - CSS プロパティ + - CSS ボックス配置 + - CSS 段組みレイアウト + - Reference + - column-gap + - 'recipe:css-property' +translation_of: Web/CSS/column-gap +--- +
{{CSSRef}}
+ +

column-gap は CSS のプロパティで、要素の段または列の間の隙間 ({{glossary("Gutters","溝")}}) の寸法を設定します。

+ +
{{EmbedInteractiveExample("pages/css/column-gap.html")}}
+ + + +

当初は段組みレイアウトの一部でしたが、 column-gap の定義は複数のレイアウト方法を含めるように拡張されました。現在はボックス配置の中で定義され、段組みレイアウト、フレキシブルボックス、グリッドレイアウトで使用されることがあります。

+ +
+

CSS グリッドレイアウトは当初、 grid-column-gap プロパティを定義していました。この接頭辞付きのプロパティは column-gap で置き換えられました。しかし、グリッドで grid-column-gap を実装しており column-gap を実装していないブラウザーに対応するため、接頭辞付きのプロパティを使用する必要があるでしょう。

+
+ +

構文

+ +
/* キーワード値 */
+column-gap: normal;
+
+/* <length> 値 */
+column-gap: 3px;
+column-gap: 2.5em;
+
+/* <percentage> 値 */
+column-gap: 3%;
+
+/* グローバル値 */
+column-gap: inherit;
+column-gap: initial;
+column-gap: unset;
+
+ +

column-gap プロパティは以下に挙げた値の一つで指定します。

+ +

値

+ +
+
normal
+
段間 (列間) にはブラウザー既定の幅が使われます。段組みレイアウトでは 1em と指定され、他の種類のレイアウトでは 0 になります。
+
{{CSSxRef("<length>")}}
+
段間 (列間) の寸法を {{CSSxRef("<length>")}} として定義します。 {{CSSxRef("<length>")}} のプロパティ値は負の数であってはいけません。
+
{{CSSxRef("<percentage>")}}
+
段間 (列間) の寸法を {{CSSxRef("<percentage>")}} として定義します。 {{CSSxRef("<percentage>")}} のプロパティ値は負の数であってはいけません。
+
+ +

形式文法

+ +{{CSSSyntax}} + +

例

+ +

フレックスレイアウト

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

+ +
#flexbox {
+  display: flex;
+  height: 100px;
+  column-gap: 20px;
+}
+
+#flexbox > div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: auto;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Flex_layout", "auto", "120px")}}

+ +

グリッドレイアウト

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ + + +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  column-gap: 20px;
+}
+
+#grid > div {
+  border: 1px solid green;
+  background-color: lime;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Grid_layout", "auto", "120px")}}

+ +

段組みレイアウト

+ +

HTML

+ +
<p class="content-box">
+  This is some multi-column text with a 40px column
+  gap created with the CSS `column-gap` property.
+  Don't you think that's fun and exciting? I sure do!
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+  column-gap: 40px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#column-row-gap", "column-gap")}}{{Spec2("CSS3 Box Alignment")}}グリッド及びフレックスボックスに適用
{{SpecName("CSS3 Grid", "#gutters", "column-gap")}}{{Spec2("CSS3 Grid")}}グリッドレイアウトにどう適用されるかを指定
{{SpecName("CSS3 Multicol", "#column-gap", "column-gap")}}{{Spec2("CSS3 Multicol")}}初回定義。
+ +

{{CSSInfo}}

+ +

ブラウザーの互換性

+ +

フレックスレイアウトでの対応

+ +

{{Compat("css.properties.column-gap.flex_context")}}

+ +

グリッドレイアウトでの対応

+ +

{{Compat("css.properties.column-gap.grid_context")}}

+ +

段組みレイアウトでの対応

+ +

{{Compat("css.properties.column-gap.multicol_context")}}

+ +

関連情報

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