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
|
---
title: grid-column
slug: Web/CSS/grid-column
tags:
- CSS
- CSS グリッド
- CSS プロパティ
- Reference
translation_of: Web/CSS/grid-column
---
<p><strong><code>grid-column</code></strong> は CSS のプロパティで、 {{cssxref("grid-column-start")}} および {{cssxref("grid-column-end")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティであり、{{glossary("grid column", "グリッド列")}}の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用されることで、{{Glossary("grid areas", "グリッド領域")}}の行の開始と終了の端を指定します。</p>
<div>{{EmbedInteractiveExample("pages/css/grid-column.html")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<p>このプロパティは一つまたは二つの <code><grid-line></code> の値で指定します。</p>
<p>二つの <code><grid-line></code> 値を指定する場合は、 "/" で区切ります。個別指定の <code>grid-column-start</code> はスラッシュの前に設定し、個別指定の <code>grid-column-end</code> はスラッシュの後に設定します。</p>
<p>それぞれの <code><grid-line></code> の値は以下の何れかを指定できます。</p>
<ul>
<li><code>auto</code> キーワード</li>
<li><code><custom-ident></code> 値</li>
<li><code><integer></code> 値</li>
<li><code><custom-ident></code> および <code><integer></code> を空白で区切ったもの</li>
<li><code>span</code> キーワードと <code><custom-ident></code> または <code><integer></code> またはその両方。</li>
</ul>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>auto</code></dt>
<dd>プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の <code>1</code> とするためのキーワードです。</dd>
<dt><code><custom-ident></code></dt>
<dd>'<custom-ident>-start'/'<custom-ident>-end' という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。
<p class="note"><strong>メモ:</strong> 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 <code>grid-column: foo;</code> と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に <code>foo-start</code>/<code>foo-end</code> という名前の線が明示的に存在しない限り)。</p>
<p>そうでなければ、これは <code><custom-ident></code> に沿って整数の <code>1</code> が指定されたものとして扱われます。</p>
</dd>
<dt><code><integer> && <custom-ident>?</code></dt>
<dd>n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。
<p>名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。</p>
<p><code>0</code> の {{cssxref("integer")}} 値は無効です。</p>
</dd>
<dt><code>span && [ <integer> || <custom-ident> ]</code></dt>
<dd>グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。
<p>名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分にない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。</p>
<p>the <integer> が省略された場合の既定値は <code>1</code> です。負の数や0は無効です。</p>
</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Example" name="Example">例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css; highlight[14,19]">#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 100px;
}
#item1 {
background-color: lime;
}
#item2 {
background-color: yellow;
grid-column: 2 / 4;
}
#item3 {
background-color: blue;
grid-column: span 2 / 7;
}
</pre>
<p>{{EmbedLiveSample("Example", "100%", "100px")}}</p>
<h2 id="Internet_Explorer_issues" name="Internet_Explorer_issues">Internet Explorer での問題</h2>
<p>IE11 はグリッドアイテムの自動配置に対応していません。すべてのアイテムは、明示的に <code>-ms-</code>{{cssxref("grid-column")}} および <code>-ms-</code>{{cssxref("grid-row")}} を記述しない限り、最初の行・列に配置されます。小さな JavaScript を用いて自動的な配置をすることもできます。 <a href="https://github.com/motine/css_grid_annotator">ソースリポジトリ</a></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-column", "grid-column")}}</td>
<td>{{Spec2("CSS3 Grid")}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("css.properties.grid-column")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>関連する CSS プロパティ: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}</li>
<li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">CSS グリッドでの行ベースの配置</a></em></li>
<li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</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">グリッドレイアウトの基本概念</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">他のレイアウト方法との関係</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">線ベースの配置</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">グリッドテンプレート領域</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">名前付きグリッド線を使用したレイアウト</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">CSS グリッドレイアウトにおける自動配置</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">CSS グリッドレイアウトにおけるボックス配置</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS グリッドレイアウトとアクセシビリティ</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS グリッドおよび進歩的な拡張</a></li>
<li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realising_common_layouts_using_CSS_Grid_">CSS グリッドを利用したよくあるレイアウトの実現</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">グリッド線</a></li>
<li><a href="/ja/docs/Glossary/Grid_tracks">グリッドトラック</a></li>
<li><a href="/ja/docs/Glossary/Grid_cell">グリッドセル</a></li>
<li><a href="/ja/docs/Glossary/Grid_areas">グリッド領域</a></li>
<li><a href="/ja/docs/Glossary/Gutters">溝</a></li>
<li><a href="/ja/docs/Glossary/Grid_rows">グリッド行</a></li>
<li><a href="/ja/docs/Glossary/Grid_column">グリッド列</a></li>
</ol>
</li>
</ol>
</section>
|
