From ebde2ff8adc34934e9f3ea8fb7644e771122b3c6 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 18 Oct 2021 12:29:30 +0900 Subject: CSS Box Alignments 関係の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/17 時点の英語版に同期 - 一部および画像は新規翻訳 --- files/ja/web/css/column-gap/index.md | 206 ++++++++++++++--------------------- 1 file changed, 83 insertions(+), 123 deletions(-) (limited to 'files/ja/web/css/column-gap') diff --git a/files/ja/web/css/column-gap/index.md b/files/ja/web/css/column-gap/index.md index 032d6d4f62..038b642366 100644 --- a/files/ja/web/css/column-gap/index.md +++ b/files/ja/web/css/column-gap/index.md @@ -3,116 +3,113 @@ title: column-gap (grid-column-gap) slug: Web/CSS/column-gap tags: - CSS - - CSS グリッドレイアウト - CSS フレックスボックス - - CSS プロパティ - - CSS ボックス配置 + - CSS グリッドレイアウト - CSS 段組みレイアウト - - Reference + - CSS プロパティ + - リファレンス - column-gap - - 'recipe:css-property' + - recipe:css-property +browser-compat: css.properties.column-gap translation_of: Web/CSS/column-gap --- -
{{CSSRef}}
- -

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

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/column-gap.html")}}
+**`column-gap`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の段または列の間の隙間 ({{glossary("Gutters","溝")}}) の寸法を設定します。 - +{{EmbedInteractiveExample("pages/css/column-gap.html")}} -

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

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

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

-
- -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 column-gap: normal;
 
-/* <length> 値 */
+/*  値 */
 column-gap: 3px;
 column-gap: 2.5em;
 
-/* <percentage> 値 */
+/*  値 */
 column-gap: 3%;
 
 /* グローバル値 */
 column-gap: inherit;
 column-gap: initial;
+column-gap: revert;
 column-gap: unset;
-
+``` + +`column-gap` プロパティは以下に挙げた値の一つで指定します。 -

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

+### 値 -

値

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

形式文法

+{{cssinfo}} -{{CSSSyntax}} +## 関連情報 -

例

+{{csssyntax}} -

フレックスレイアウト

+## 例 -

HTML

+

フレックスレイアウト

-
<div id="flexbox">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
-
+#### HTML + +```html +
+
+
+
+
+``` -

CSS

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

結果

+#### 結果 -

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

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

グリッドレイアウト

+

グリッドレイアウト

-

HTML

+#### HTML -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

CSS

- -