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/gap/index.md | 215 ++++++++++++++++++------------------------ 1 file changed, 92 insertions(+), 123 deletions(-) (limited to 'files/ja/web/css/gap') diff --git a/files/ja/web/css/gap/index.md b/files/ja/web/css/gap/index.md index edc971b860..8d9de3c7ef 100644 --- a/files/ja/web/css/gap/index.md +++ b/files/ja/web/css/gap/index.md @@ -3,47 +3,42 @@ title: gap (grid-gap) slug: Web/CSS/gap tags: - CSS - - CSS グリッドレイアウト - - CSS フレックスボックスレイアウト - - CSS プロパティ - - CSS ボックス配置 + - CSS フレックスボックス + - CSS グリッド - CSS 段組みレイアウト - - Reference - - gap + - CSS プロパティ - リファレンス + - gap + - recipe:css-property +browser-compat: css.properties.gap translation_of: Web/CSS/gap --- -
{{CSSRef}}
- -

gap は CSS のプロパティで、行や列の間のすき間 ({{glossary("gutters", "溝")}}) を定義します。これは {{CSSxRef("row-gap")}} および {{CSSxRef("column-gap")}} の一括指定です。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/gap.html")}}
+**`gap`** は [CSS](/ja/docs/Web/CSS) のプロパティで、行や列の間のすき間 ({{glossary("gutters", "溝")}}) を定義します。これは {{CSSxRef("row-gap")}} および {{CSSxRef("column-gap")}} の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)です。 - +{{EmbedInteractiveExample("pages/css/gap.html")}} -
-

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

-
- -

構文

+## 構文 -
/* 単一の <length> 値 */
+```css
+/* 単一の  値 */
 gap: 20px;
 gap: 1em;
 gap: 3vmin;
 gap: 0.5cm;
 
-/* 単一の <percentage> 値 */
+/* 単一の  値 */
 gap: 16%;
 gap: 100%;
 
-/* 二つの <length> 値 */
+/* 2 つの  値 */
 gap: 20px 10px;
 gap: 1em 0.5em;
 gap: 3vmin 2vmax;
 gap: 0.5cm 2mm;
 
-/* 一つ又は二つの <percentage> 値 */
+/* 1 つまたは 2 つの  値 */
 gap: 16% 100%;
 gap: 21px 82%;
 
@@ -54,52 +49,57 @@ gap: calc(20px + 10%) calc(10% - 5px);
 /* グローバル値 */
 gap: inherit;
 gap: initial;
+gap: revert;
 gap: unset;
-
+``` + +このプロパティは `<'row-gap'>` の値と、任意で `<'column-gap'>` の値を続けて指定します。 `<'column-gap'>` が省略された場合、 `<'row-gap'>` と同じ値が設定されます。 -

このプロパティは <'row-gap'> の値と、任意で <'column-gap'> の値を続けて指定します。 <'column-gap'> が省略された場合、 <'row-gap'> と同じ値が設定されます。

+`<'row-gap'>` および `<'column-gap'>` はそれぞれ、 `` または `` で指定します。 -

<'row-gap'> 及び <'column-gap'> はそれぞれ、 <length> 又は <percentage> で指定します。

+### 値 -

値

+- {{CSSxRef("<length>")}} + - : グリッド線を隔てる溝の幅です。 +- {{CSSxRef("<percentage>")}} + - : 要素の寸法に対する、グリッド線を隔てる溝の幅です。 -
-
{{CSSxRef("<length>")}}
-
グリッド線を隔てる溝の幅です。
-
{{CSSxRef("<percentage>")}}
-
要素の寸法に対する、グリッド線を隔てる溝の幅です。
-
+## 公式定義 -

形式文法

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

例

+{{csssyntax}} -

フレックスレイアウト

+## 例 -

HTML

+

フレックスレイアウト

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

CSS

+#### CSS -
#flexbox {
+```css
+#flexbox {
   display: flex;
   flex-wrap: wrap;
   width: 300px;
   gap: 20px 5px;
 }
 
-#flexbox > div {
+#flexbox > div {
   border: 1px solid green;
   background-color: lime;
   flex: 1 1 auto;
@@ -107,115 +107,84 @@ gap: unset;
   height: 50px;
 
 }
-
+``` -

結果

+#### 結果 -

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

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

グリッドレイアウト

+

グリッドレイアウト

-

HTML

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

CSS

- -