diff options
author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-17 22:55:22 +0900 |
---|---|---|
committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-10-26 23:17:41 +0900 |
commit | 12dcd99f1954265d69c461fe2c2a477b52ce735c (patch) | |
tree | bfa61f5fb0a60a7033a5c5ee3c4738ae36281b73 /files/ja/web/css/row-gap/index.html | |
parent | 729f5a72e5a83ef1e7737351b7d28f599c72f042 (diff) | |
download | translated-content-12dcd99f1954265d69c461fe2c2a477b52ce735c.tar.gz translated-content-12dcd99f1954265d69c461fe2c2a477b52ce735c.tar.bz2 translated-content-12dcd99f1954265d69c461fe2c2a477b52ce735c.zip |
CSS Box Alignment の変換準備
Diffstat (limited to 'files/ja/web/css/row-gap/index.html')
-rw-r--r-- | files/ja/web/css/row-gap/index.html | 154 |
1 files changed, 0 insertions, 154 deletions
diff --git a/files/ja/web/css/row-gap/index.html b/files/ja/web/css/row-gap/index.html deleted file mode 100644 index f67c07b0ec..0000000000 --- a/files/ja/web/css/row-gap/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: row-gap (grid-row-gap) -slug: Web/CSS/row-gap -tags: - - CSS - - CSS Flexible Boxes - - CSS Grid - - CSS Property - - Reference - - recipe:css-property - - 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/row-gap.html")}}</div> - -<h2 id="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">値</h3> - -<dl> - <dt><code><length-percentage></code></dt> - <dd>行を隔てる溝の幅です。 {{CSSxRef("<percentage>")}} 値は要素の寸法に対する相対値です。</dd> -</dl> - -<h2 id="Formal_definition">公式定義</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax">形式文法</h2> - -{{csssyntax}} - -<h2 id="Examples">例</h2> - -<h3 id="Flex_layout">フレックスレイアウト</h3> - -<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">結果</h4> - -<p>{{EmbedLiveSample('Flex_layout', "auto", "120px")}}</p> - -<h3 id="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> - -<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">結果</h4> - -<p>{{EmbedLiveSample('Grid_layout', 'auto', 120)}}</p> - -<h2 id="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> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<h3 id="Support_in_Flex_layout">フレックスレイアウトでの対応</h3> - -<p>{{Compat("css.properties.row-gap.flex_context")}}</p> - -<h3 id="Support_in_Grid_layout">グリッドレイアウトでの対応</h3> - -<p>{{Compat("css.properties.row-gap.grid_context")}}</p> - -<h2 id="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> |