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/row-gap/index.md | 139 +++++++++++++++++--------------------- 1 file changed, 61 insertions(+), 78 deletions(-) (limited to 'files/ja/web/css/row-gap') diff --git a/files/ja/web/css/row-gap/index.md b/files/ja/web/css/row-gap/index.md index f67c07b0ec..79389080ac 100644 --- a/files/ja/web/css/row-gap/index.md +++ b/files/ja/web/css/row-gap/index.md @@ -3,103 +3,109 @@ title: row-gap (grid-row-gap) slug: Web/CSS/row-gap tags: - CSS - - CSS Flexible Boxes - - CSS Grid - - CSS Property - - Reference + - CSS フレックスボックス + - CSS グリッド + - CSS プロパティ + - リファレンス - recipe:css-property - row-gap +browser-compat: css.properties.row-gap translation_of: Web/CSS/row-gap --- -
{{CSSRef}}
+{{CSSRef}} -

row-gap は CSS のプロパティで、要素のグリッド行の間のすき間 ({{glossary("gutters", "溝")}}) の寸法を定義します。

+**`row-gap`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素のグリッド行の間のすき間 ({{glossary("gutters", "溝")}}) の寸法を定義します。 -
{{EmbedInteractiveExample("pages/css/row-gap.html")}}
+{{EmbedInteractiveExample("pages/css/row-gap.html")}} -

構文

+## 構文 -
/* <length> 値 */
+```css
+/*  値 */
 row-gap: 20px;
 row-gap: 1em;
 row-gap: 3vmin;
 row-gap: 0.5cm;
 
-/* <percentage> 値 */
+/*  値 */
 row-gap: 10%;
 
 /* Global values */
 row-gap: inherit;
 row-gap: initial;
+row-gap: revert;
 row-gap: unset;
-
+``` -

値

+### 値 -
-
<length-percentage>
-
行を隔てる溝の幅です。 {{CSSxRef("<percentage>")}} 値は要素の寸法に対する相対値です。
-
+- `` + - : 行を隔てる溝の幅です。 {{CSSxRef("<percentage>")}} 値は要素の寸法に対する相対値です。 -

公式定義

+## 公式定義 -

{{cssinfo}}

+{{cssinfo}} -

形式文法

+## 関連情報 {{csssyntax}} -

例

+## 例

フレックスレイアウト

-

HTML

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

CSS

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

結果

+#### 結果 -

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

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

グリッドレイアウト

-

HTML

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

CSS

+#### CSS -
#grid {
+```css
+#grid {
   display: grid;
   height: 200px;
   grid-template-columns: 200px;
@@ -107,48 +113,25 @@ row-gap: unset;
   row-gap: 20px;
 }
 
-#grid > div {
+#grid > div {
   border: 1px solid green;
   background-color: lime;
 }
-
+``` -

結果

+#### 結果 -

{{EmbedLiveSample('Grid_layout', 'auto', 120)}}

+{{EmbedLiveSample('Grid_layout', 'auto', 120)}} -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}}{{Spec2("CSS3 Box Alignment")}}初回定義
+{{Specifications("css.properties.row-gap.grid_context")}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

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

+## 関連情報 -

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

- -

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

- -

関連情報

- - +- 関連する CSS プロパティ: {{CSSxRef("column-gap")}}, {{CSSxRef("gap")}} +- グリッドレイアウトガイド: _[グリッドレイアウトの基本概念 - 溝](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters)_ -- cgit v1.2.3-54-g00ecf