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/glossary/gutters/index.html | 73 ++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 files/ja/glossary/gutters/index.html (limited to 'files/ja/glossary/gutters/index.html') diff --git a/files/ja/glossary/gutters/index.html b/files/ja/glossary/gutters/index.html new file mode 100644 index 0000000000..538bcd8347 --- /dev/null +++ b/files/ja/glossary/gutters/index.html @@ -0,0 +1,73 @@ +--- +title: ガター +slug: Glossary/Gutters +tags: + - CSS Grids + - CSS グリッドレイアウト +translation_of: Glossary/Gutters +--- +

ガター もしくはアレーはコンテンツトラック間のスペースです。CSS グリッドレイアウトで {{cssxref("grid-column-gap")}}、{{cssxref("grid-row-gap")}} あるいは {{cssxref("grid-gap")}} プロパティを使うとガターが作成されます。

+ +

下の例では 3 列 2 行のトラックを持つグリッドを、列トラックの間には 20 ピクセルの、列トラックの間には 20 ピクセルの隙間を空けています。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1.2fr);
+  grid-auto-rows: 45%;
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+}
+
+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('example_1', '300', '280') }}

+
+ +

グリッドのサイズ決定においては、ガターによる隙間は通常のグリッドトラックのように扱われますが、隙間の中には何も配置できません。隙間の分だけその場所のグリッドラインのサイズが増えるように振る舞うため、そのラインの後のグリッドアイテムは隙間の後から始まるように配置されます。

+ +

トラックに余白を作るのは grid-gap プロパティだけではありません。マージン、パディング、 Box Alignment のスペース分配プロパティなどいずれも視覚上の隙間を作ります。したがって、これらの方法で追加の余白は一切作らないデザインをしていない限り、grid-gap プロパティと「ガターサイズ」が一致するようには見えません。

+ +

より詳しく

+ +

プロパティリファレンス

+ + + +

より詳しい説明

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