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/grid_tracks/index.html | 75 ++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 files/ja/glossary/grid_tracks/index.html (limited to 'files/ja/glossary/grid_tracks') diff --git a/files/ja/glossary/grid_tracks/index.html b/files/ja/glossary/grid_tracks/index.html new file mode 100644 index 0000000000..d5984585a5 --- /dev/null +++ b/files/ja/glossary/grid_tracks/index.html @@ -0,0 +1,75 @@ +--- +title: Grid Tracks (グリッドトラック) +slug: Glossary/Grid_Tracks +tags: + - CSS Grids + - 用語集 +translation_of: Glossary/Grid_Tracks +--- +

グリッドトラックとは、2本の{{glossary("grid lines", "グリッド線")}}の間の空間のことです。明示的なグリッドでは、 {{cssxref("grid-template-columns")}} と {{cssxref("grid-template-rows")}} プロパティ、または一括指定の {{cssxref("grid")}} または {{cssxref("grid-template")}} プロパティを使用して定義します。明示的グリッドで作成したトラックの外側にグリッドアイテムを配置することで、暗黙的グリッドにもトラックが生成されます。

+ +

次の画像は、グリッドにおける最初の行トラックを表しています。

+ +

Diagram showing a grid track.

+ +

明示的グリッドにおけるトラックの大きさ

+ +

{{cssxref("grid-template-columns")}} および {{cssxref("grid-template-rows")}} プロパティを使ってグリッドトラックを定義する際には、任意の長さ単位もしくは、グリッドコンテナ中で利用可能な領域の一部分を表す柔軟な単位 fr を利用できます。次の例は、1 つ目が 200 ピクセルのトラック、2 つ目が 1fr、3 つめが 3fr となる、3 列のトラックから成るグリッドを作っています。グリッドコンテナ中の利用可能な領域のうち 200 ピクセル分を差し引いた残りの領域を 4 分割し、2 つめの列にはその 1 つ分を、3 つめの列には 3 つ分が割り当てられます。

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 1fr 3fr;
+}
+
+ +
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('example_1', '500', '230') }}

+
+ +

暗黙的グリッドにおけるトラックの大きさ

+ +

暗黙的グリッドにおけるトラックは、既定では自動的に大きさが決定されますが、 {{cssxref("grid-auto-rows")}} および {{cssxref("grid-auto-columns")}} プロパティでこれらのトラックの大きさを定義することもできます。

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