From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/gap/index.html | 223 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 223 insertions(+) create mode 100644 files/ja/web/css/gap/index.html (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 new file mode 100644 index 0000000000..2d2e1d70d9 --- /dev/null +++ b/files/ja/web/css/gap/index.html @@ -0,0 +1,223 @@ +--- +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