blob: 8ab3d2224d6f53b9816baf4ab0a66b58ca2717d7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
|
---
title: row-gap (grid-row-gap)
slug: Web/CSS/row-gap
tags:
- CSS
- CSS グリッドレイアウト
- CSS フレックスボックス
- CSS プロパティ
- Reference
- row-gap
translation_of: Web/CSS/row-gap
---
<div>{{CSSRef}}</div>
<p><strong><code>row-gap</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素のグリッド行の間のすき間 ({{glossary("gutters", "溝")}}) の寸法を定義します。</p>
<div>{{EmbedInteractiveExample("pages/css/grid-row-gap.html")}}</div>
<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
<div class="note">
<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>では、当初は <code>grid-row-gap</code> プロパティを定義していました。この接頭辞付きのプロパティは <code>row-gap</code> に置き換えられました。しかし、グリッドで <code>grid-row-gap</code> を実装していても <code>row-gap</code> を実装していないブラウザーに対応するため、上記のデモにあるように、接頭辞付きのプロパティを使用する必要があるでしょう。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush: css no-line-numbers">/* <length> 値 */
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: unset;
</pre>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code><length-percentage></code></dt>
<dd>行を隔てる溝の幅です。 {{CSSxRef("<percentage>")}} 値は要素の寸法に対する相対値です。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Flex_layout" name="Flex_layout">フレックスレイアウト</h3>
<p>{{SeeCompatTable}}</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div id="flexbox">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css; highlight[5]">#flexbox {
display: flex;
flex-wrap: wrap;
width: 300px;
row-gap: 20px;
}
#flexbox > div {
border: 1px solid green;
background-color: lime;
flex: 1 1 auto;
width: 100px;
height: 50px;
}
</pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample('Flex_layout', "auto", "120px")}}</p>
<h3 id="Grid_layout" name="Grid_layout">グリッドレイアウト</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><div id="grid">
<div></div>
<div></div>
<div></div>
</div></pre>
<h4 id="CSS_2">CSS</h4>
<div class="hidden">
<pre class="brush: css">#grid {
grid-row-gap: 20px;
}
</pre>
</div>
<pre class="brush: css; highlight[6]">#grid {
display: grid;
height: 200px;
grid-template-columns: 200px;
grid-template-rows: repeat(3, 1fr);
row-gap: 20px;
}
#grid > div {
border: 1px solid green;
background-color: lime;
}
</pre>
<h4 id="Result_2" name="Result_2">結果</h4>
<p>{{EmbedLiveSample('Grid_layout', 'auto', 120)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}}</td>
<td>{{Spec2("CSS3 Box Alignment")}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<p>{{CSSInfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<h3 id="Support_in_Flex_layout" name="Support_in_Flex_layout">フレックスレイアウトでの対応</h3>
<p>{{Compat("css.properties.row-gap.flex_context")}}</p>
<h3 id="Support_in_Grid_layout" name="Support_in_Grid_layout">グリッドレイアウトでの対応</h3>
<p>{{Compat("css.properties.row-gap.grid_context")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>関連する CSS プロパティ: {{CSSxRef("column-gap")}}, {{CSSxRef("gap")}}</li>
<li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">グリッドレイアウトの基本概念 - 溝</a></em></li>
</ul>
|
