blob: df6d2ad1ea83eee451c0d767d5a18800187e0ffc (
plain)
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
|
---
title: Grid 列
slug: Glossary/Grid_Column
tags:
- CSS
- CodingScripting
translation_of: Glossary/Grid_Column
---
<p><strong>グリッド列</strong>とは <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>における縦のトラックであり、二つの垂直方向のグリッドラインに挟まれた領域のことです。グリッド列は {{cssxref("grid-template-columns")}} プロパティまたは短縮記法の {{cssxref("grid")}} や {{cssxref("grid-template")}} プロパティで定義されます。</p>
<p>加えて、明示的グリッド <em>(explicit grid)</em> で作られる列の外にアイテムが配置される場合は、暗黙的グリッド <em>(implicit grid) </em>にもグリッド列が作られます。これらの列はデフォルトでは自動的に大きさが決定されますが、{{cssxref("grid-auto-columns")}} プロパティでサイズ指定することもできます。</p>
<p><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a>の中で位置調整 (alignment) をする場合、列が並ぶ軸を <em>ブロック軸もしくは列軸</em> と呼びます。</p>
<h2 id="Learn_More" name="Learn_More">より詳しく</h2>
<h3 id="Property_reference" name="Property_reference">プロパティリファレンス</h3>
<ul>
<li>{{cssxref("grid-template-columns")}}</li>
<li>{{cssxref("grid-auto-columns")}}</li>
<li>{{cssxref("grid")}}</li>
<li>{{cssxref("grid-template")}}</li>
</ul>
<h3 id="Further_reading" name="Further_reading">より詳しい説明</h3>
<ul>
<li>CSS グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></em></li>
</ul>
|
