From 12dcd99f1954265d69c461fe2c2a477b52ce735c Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 17 Oct 2021 22:55:22 +0900 Subject: CSS Box Alignment の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/gap/index.html | 221 ---------------------------------------- files/ja/web/css/gap/index.md | 221 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 221 insertions(+), 221 deletions(-) delete mode 100644 files/ja/web/css/gap/index.html create mode 100644 files/ja/web/css/gap/index.md (limited to 'files/ja/web/css/gap') diff --git a/files/ja/web/css/gap/index.html b/files/ja/web/css/gap/index.html deleted file mode 100644 index edc971b860..0000000000 --- a/files/ja/web/css/gap/index.html +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: gap (grid-gap) -slug: Web/CSS/gap -tags: - - CSS - - CSS グリッドレイアウト - - CSS フレックスボックスレイアウト - - CSS プロパティ - - CSS ボックス配置 - - CSS 段組みレイアウト - - Reference - - gap - - リファレンス -translation_of: Web/CSS/gap ---- -
{{CSSRef}}
- -

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

- -
{{EmbedInteractiveExample("pages/css/gap.html")}}
- - - -
-

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

-
- -

構文

- -
/* 単一の <length> 値 */
-gap: 20px;
-gap: 1em;
-gap: 3vmin;
-gap: 0.5cm;
-
-/* 単一の <percentage> 値 */
-gap: 16%;
-gap: 100%;
-
-/* 二つの <length> 値 */
-gap: 20px 10px;
-gap: 1em 0.5em;
-gap: 3vmin 2vmax;
-gap: 0.5cm 2mm;
-
-/* 一つ又は二つの <percentage> 値 */
-gap: 16% 100%;
-gap: 21px 82%;
-
-/* calc() 値 */
-gap: calc(10% + 20px);
-gap: calc(20px + 10%) calc(10% - 5px);
-
-/* グローバル値 */
-gap: inherit;
-gap: initial;
-gap: unset;
-
- -

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

- -

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

- -

値

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

形式文法

- -{{CSSSyntax}} - -

例

- -

フレックスレイアウト

- -

HTML

- -
<div id="flexbox">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
-
- -

CSS

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

結果

- -

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

- -

グリッドレイアウト

- -

HTML

- -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

CSS

- - - -
#grid {
-  display: grid;
-  height: 200px;
-  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
-  gap: 20px 5px;
-}
-
-#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 <code>gap</code> property.
-  Don't you think that's fun and exciting? I sure do!
-</p>
-
- -

CSS

- -
.content-box {
-  column-count: 3;
-  gap: 40px;
-}
-
- -

結果

- -

{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}{{Spec2("CSS3 Box Alignment")}}初回定義
- -

{{CSSInfo}}

- -

ブラウザーの互換性

- -

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

- -

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

- -

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

- -

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

- -

段組みレイアウトでの対応

- -

{{Compat("css.properties.gap.multicol_context")}}

- -

関連情報

- - diff --git a/files/ja/web/css/gap/index.md b/files/ja/web/css/gap/index.md new file mode 100644 index 0000000000..edc971b860 --- /dev/null +++ b/files/ja/web/css/gap/index.md @@ -0,0 +1,221 @@ +--- +title: gap (grid-gap) +slug: Web/CSS/gap +tags: + - CSS + - CSS グリッドレイアウト + - CSS フレックスボックスレイアウト + - CSS プロパティ + - CSS ボックス配置 + - CSS 段組みレイアウト + - Reference + - gap + - リファレンス +translation_of: Web/CSS/gap +--- +
{{CSSRef}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/css/gap.html")}}
+ + + +
+

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

+
+ +

構文

+ +
/* 単一の <length> 値 */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* 単一の <percentage> 値 */
+gap: 16%;
+gap: 100%;
+
+/* 二つの <length> 値 */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* 一つ又は二つの <percentage> 値 */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* calc() 値 */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* グローバル値 */
+gap: inherit;
+gap: initial;
+gap: unset;
+
+ +

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

+ +

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

+ +

値

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

形式文法

+ +{{CSSSyntax}} + +

例

+ +

フレックスレイアウト

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

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

結果

+ +

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

+ +

グリッドレイアウト

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ + + +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#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 <code>gap</code> property.
+  Don't you think that's fun and exciting? I sure do!
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Multi-column_layout", "auto", "120px")}}

+ +

仕様書

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

{{CSSInfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

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

+ +

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

+ +

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

+ +

段組みレイアウトでの対応

+ +

{{Compat("css.properties.gap.multicol_context")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf