1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
|
---
title: grid-template
slug: Web/CSS/grid-template
tags:
- CSS
- CSS Grid
- CSS Property
- Reference
translation_of: Web/CSS/grid-template
---
<p><strong><code>grid-template</code></strong> CSS プロパティは、{{glossary("grid column", "grid columns")}} および {{glossary("grid rows", "rows")}}、{{glossary("grid areas", "areas")}} を定義するための <a href="/ja/docs/Web/CSS/Shorthand_properties">短縮</a> プロパティです。</p>
<div>{{EmbedInteractiveExample("pages/css/grid-template.html")}}</div>
<p>作者は、次の個別のプロパティの値で設定することもできます: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="brush: css no-line-numbers">/* キーワード値 */
grid-template: none;
/* grid-template-rows / grid-template-columns の値 */
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: fit-content(100px) / fit-content(40%);
/* grid-template-areas grid-template-rows / grid-template-column の値 */
grid-template: "a a a"
"b b b";
grid-template: "a a a" 20%
"b b b" auto;
grid-template: [header-top] "a a a" [header-bottom]
[main-top] "b b b" 1fr [main-bottom]
/ auto 1fr auto;
/* グローバル値 */
grid-template: inherit;
grid-template: initial;
grid-template: unset;
</pre>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>none</code></dt>
<dd>3 個すべてのプロパティの値に <code>none</code> を設定します。これは明示的なグリッドが無いことを意味します。名前付きグリッド領域はありません。行と列は暗黙的に生成されます。これらのサイズは {{cssxref("grid-auto-rows")}} および {{cssxref("grid-auto-columns")}} プロパティによって決定されます。</dd>
<dt><code><'grid-template-rows'> / <'grid-template-columns'></code></dt>
<dd>{{cssxref("grid-template-rows")}} および {{cssxref("grid-template-columns")}} に特定の値を設定し、{{cssxref("grid-template-areas")}} の値に <code>none</code> を設定します。</dd>
<dt><code>[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?</code></dt>
<dd>{{cssxref("grid-template-areas")}} にリストの文字列を設定し、{{cssxref("grid-template-rows")}} にリストの各文字列に従ったトラックサイズを設定します (サイズ指定の足りない部分には <code>auto</code> が設定されます)。さらに、各サイズの前後で定義された名前付きラインをつなぎ、{{cssxref("grid-template-columns")}} にトラックリストのスラッシュ記号の後で指定されたサイズを設定します (指定されていない場合は <code>none</code> が設定されます)。<br>
<p class="note">注記: これらのトラックリストに {{cssxref("repeat")}} 関数を使うことはできません。トラックは “ASCII アート” 内の行列と一対一の関係で視覚的に並んでいるためです。</p>
</dd>
</dl>
<p class="note"><strong>注記:</strong> {{cssxref("grid")}} 短縮プロパティは同じ構文を受け入れますが、暗黙的な grid プロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、(<code>grid-template</code> とは対照的に、) <code>grid</code> を使用してください。</p>
<h3 id="Formal_syntax" name="Formal_syntax">正式な構文</h3>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush:css; highlight[5-8]">#page {
display: grid;
width: 100%;
height: 200px;
grid-template: [header-left] "head head" 30px [header-right]
[main-left] "nav main" 1fr [main-right]
[footer-left] "nav foot" 30px [footer-right]
/ 120px 1fr;
}
header {
background-color: lime;
grid-area: head;
}
nav {
background-color: lightblue;
grid-area: nav;
}
main {
background-color: yellow;
grid-area: main;
}
footer {
background-color: red;
grid-column: foot;
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush:html"><section id="page">
<header>Header</header>
<nav>Navigation</nav>
<main>Main area</main>
<footer>Footer</footer>
</section></pre>
<h3 id="Result" name="Result">描画結果</h3>
<p>{{EmbedLiveSample("Examples", "100%", "200px")}}</p>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">策定状況</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS3 Grid", "#propdef-grid-template", "grid-template")}}</td>
<td>{{Spec2("CSS3 Grid")}}</td>
<td>初期定義</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2>
<p> </p>
<p>{{Compat("css.properties.grid-template")}}</p>
<p> </p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>関連する CSS プロパティ: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}</li>
<li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li>
<li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li>
<li>動画チュートリアル:<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li>
</ul>
<section id="Quick_links">
<ol>
<li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a></li>
<li data-default-state="open"><a href="#"><strong>ガイド</strong></a>
<ol>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basics concepts of grid layout</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</a></li>
</ol>
</li>
<li data-default-state="open"><a href="#"><strong>プロパティ</strong></a>
<ol>
<li><a href="/ja/docs/Web/CSS/grid">grid</a></li>
<li><a href="/ja/docs/Web/CSS/grid-area">grid-area</a></li>
<li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li>
<li><a href="/ja/docs/Web/CSS/grid-auto-flow">grid-auto-flow</a></li>
<li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li>
<li><a href="/ja/docs/Web/CSS/grid-column">grid-column</a></li>
<li><a href="/ja/docs/Web/CSS/grid-column-end">grid-column-end</a></li>
<li><a href="/ja/docs/Web/CSS/grid-column-gap">grid-column-gap</a></li>
<li><a href="/ja/docs/Web/CSS/grid-column-start">grid-column-start</a></li>
<li><a href="/ja/docs/Web/CSS/grid-gap">grid-gap</a></li>
<li><a href="/ja/docs/Web/CSS/grid-row">grid-row</a></li>
<li><a href="/ja/docs/Web/CSS/grid-row-end">grid-row-end</a></li>
<li><a href="/ja/docs/Web/CSS/grid-row-gap">grid-row-gap</a></li>
<li><a href="/ja/docs/Web/CSS/grid-row-start">grid-row-start</a></li>
<li><a href="/ja/docs/Web/CSS/grid-template">grid-template</a></li>
<li><a href="/ja/docs/Web/CSS/grid-template-areas">grid-template-areas</a></li>
<li><a href="/ja/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li>
<li><a href="/ja/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li>
</ol>
</li>
<li data-default-state="open"><a href="#"><strong>用語</strong></a>
<ol>
<li><a href="/ja/docs/Glossary/Grid_lines">Grid lines</a></li>
<li><a href="/ja/docs/Glossary/Grid_tracks">Grid tracks</a></li>
<li><a href="/ja/docs/Glossary/Grid_cell">Grid cell</a></li>
<li><a href="/ja/docs/Glossary/Grid_areas">Grid areas</a></li>
<li><a href="/ja/docs/Glossary/Gutters">Gutters</a></li>
<li><a href="/ja/docs/Glossary/Grid_rows">Grid row</a></li>
<li><a href="/ja/docs/Glossary/Grid_column">Grid column</a></li>
</ol>
</li>
</ol>
</section>
|
