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/column-gap/index.html | 209 +++++++++++++++++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 files/ja/web/css/column-gap/index.html (limited to 'files/ja/web/css/column-gap/index.html') diff --git a/files/ja/web/css/column-gap/index.html b/files/ja/web/css/column-gap/index.html new file mode 100644 index 0000000000..4708977143 --- /dev/null +++ b/files/ja/web/css/column-gap/index.html @@ -0,0 +1,209 @@ +--- +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