From 2e150956b4988d350bcd0a9037291b44e42f77e2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 30 Nov 2021 02:28:17 +0900 Subject: 2021/09/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/grid-template-columns/index.md | 257 +++++++++--------------- 1 file changed, 98 insertions(+), 159 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/css/grid-template-columns/index.md b/files/ja/web/css/grid-template-columns/index.md index d0b5627b94..d78dc58147 100644 --- a/files/ja/web/css/grid-template-columns/index.md +++ b/files/ja/web/css/grid-template-columns/index.md @@ -3,24 +3,26 @@ title: grid-template-columns slug: Web/CSS/grid-template-columns tags: - CSS - - CSS Grid - - CSS Property - - Reference - - 'recipe:css-property' + - CSS グリッド + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.grid-template-columns translation_of: Web/CSS/grid-template-columns --- -

grid-template-columns は CSS のプロパティで、{{glossary("grid column", "グリッド列")}}のライン名とトラックのサイズ変更機能を定義します。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}
+**`grid-template-columns`** は CSS のプロパティで、{{glossary("grid column", "グリッド列")}}の線名とトラックのサイズ変更機能を定義します。 - +{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}} -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 grid-template-columns: none;
 
-/* <track-list> 値 */
+/*  値 */
 grid-template-columns: 100px 1fr;
 grid-template-columns: [linename] 100px;
 grid-template-columns: [linename1] 100px [linename2 linename3];
@@ -28,8 +30,9 @@ grid-template-columns: minmax(100px, 1fr);
 grid-template-columns: fit-content(40%);
 grid-template-columns: repeat(3, 200px);
 grid-template-columns: subgrid;
+grid-template-columns: masonry;
 
-/* <auto-track-list> 値 */
+/*  値 */
 grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
 grid-template-columns: minmax(100px, max-content)
                        repeat(auto-fill, 200px) 20%;
@@ -42,68 +45,81 @@ grid-template-columns: [linename1 linename2] 100px
 /* グローバル値 */
 grid-template-columns: inherit;
 grid-template-columns: initial;
+grid-template-columns: revert;
 grid-template-columns: unset;
-
- -

値

- -
-
none
-
明示的なグリッドがないことを示します。どの列も暗黙的に生成され、それらのサイズは {{cssxref("grid-auto-columns")}} プロパティによって決定されます。
-
{{cssxref("<length>")}}
-
負の値ではない長さで、列の幅を指定します。
-
{{cssxref("<percentage>")}}
-
グリッドコンテナーのインライン方向の寸法に対する相対値で、負ではない {{cssxref("percentage", "<percentage>")}} です。グリッドコンテナーの寸法がトラックの寸法に依存する場合は、パーセント値を auto として扱う必要があります。
- トラックの本質的なサイズの寄与によって、グリッドコンテナーの寸法に合わせられ、パーセント値を尊重した結果、最小の大きさによってトラックの最終的な寸法を増加させる可能性があります。
-
{{cssxref("<flex>")}}
-
fr の単位の付いた負の数ではない距離で、トラックのフレックス係数を指定します。 <flex> の寸法のトラックは、残りの空間をフレックス係数の割合に比例して共有します。 -

minmax() 表記の外に現れた場合は、最小値が自動として扱われます (つまり minmax(auto, <flex>))。

-
-
max-content
-
グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。
-
min-content
-
グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。
-
{{cssxref("minmax", "minmax(min, max)")}}
-
min 以上、 max 以下の寸法の範囲を定義する関数表記法です。 max が min より小さい場合、 max は無視され、関数は min として扱われます。最大値として、 <flex> 値はトラックのフレックス係数を設定します。最小値としては無効です。
-
auto
-
最大値であれば max-content と同一のキーワードです。最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小寸法 ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。
-
-

注: トラックの寸法が auto の場合 (そして auto の場合だけ)、 {{cssxref("align-content")}} および{{cssxref("justify-content")}} プロパティによって引き伸ばされることがあります。

-
-
{{cssxref("fit-content", "fit-content( [ <length> | <percentage> ] )")}}
-
min(max-content, max(auto, argument)) の式を表し、 auto と同様に (すなわち minmax(auto, max-content) と) 計算されますが、トラックの寸法が auto の最小値よりも大きい場合は argument でクランプされるところが異なります。
-
{{cssxref("repeat", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}}
-
トラックリストの繰り返しフラグメントを表し、繰り返しパターンを示す多数の列をよりコンパクトな形式で記述できるようにします。
-
subgrid
-
subgrid の値は、グリッドがその軸に親グリッドのスパン部分を採用することを示します。グリッドの行や列のサイズは、明示的に指定されるのではなく、親グリッドの定義から取得されます。
-
- -
-

サブグリッドの値はグリッド仕様書のレベル 2 にあり、現在のところ Firefox 71 以降でのみ実装されています。

-
+``` + +### 値 + +- `none` + - : 明示的なグリッドがないことを示します。どの列も暗黙的に生成され、それらのサイズは {{cssxref("grid-auto-columns")}} プロパティによって決定されます。 +- `[線名]` + - : [``](/ja/docs/Web/CSS/custom-ident) で、その位置にある線の名称を指定します。識別子には、予約語の `span` と `auto` 以外の有効な文字列を指定してください。行は、`[line-name-a line-name-b]`のように、角括弧内のスペースで区切られた複数の名前を持つことができます。 +- {{cssxref("<length>")}} + - : 負の値ではない長さで、列の幅を指定します。 +- {{cssxref("<percentage>")}} + - : グリッドコンテナーのインライン方向の寸法に対する相対値で、負ではない {{cssxref("percentage", "<percentage>")}} です。グリッドコンテナーの寸法がトラックの寸法に依存する場合は、パーセント値を `auto` として扱う必要があります。 + トラックの本質的なサイズの寄与によって、グリッドコンテナーの寸法に合わせられ、パーセント値を尊重した結果、最小の大きさによってトラックの最終的な寸法を増加させる可能性があります。 +- {{cssxref("<flex>")}} + + - : `fr` の単位の付いた負の数ではない距離で、トラックのフレックス係数を指定します。 `` の寸法のトラックは、残りの空間をフレックス係数の割合に比例して共有します。 + + `minmax()` 表記の外に現れた場合は、最小値が自動として扱われます (つまり `minmax(auto, )`)。 + +- {{cssxref("max-content")}} + - : グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。 +- {{cssxref("min-content")}} + - : グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。 +- {{cssxref("minmax()", "minmax(min, max)")}} + - : _min_ 以上、 _max_ 以下の寸法の範囲を定義する関数表記法です。 _max_ が _min_ より小さい場合、 _max_ は無視され、関数は _min_ として扱われます。最大値として、 `` 値はトラックのフレックス係数を設定します。最小値としては無効です。 +- `auto` + + - : 最大値であれば max-content と同一のキーワードです。 + + 最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小寸法 ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。ふつうは {{cssxref("min-content")}} ですが、必ずそうとは限りません。 + + {{cssxref("minmax()", "minmax()")}} 表記以外で使われた場合、 `auto` は上記の最小値と最大値の間の範囲を表します。これはほとんどの場合、`minmax(min-content,max-content)` と同じように動作します。 + + > **Note:** トラックの寸法が `auto` の場合 (そして `auto` の場合だけ)、 {{cssxref("align-content")}} および{{cssxref("justify-content")}} プロパティによって引き伸ばされることがあります。 + +- `{{cssxref("fit-content()", "fit-content( [ <length> | <percentage> ] )")}}` + - : `min(max-content, max(auto, _argument_))` の式を表し、 `auto` と同様に (すなわち `minmax(auto, max-content)` と) 計算されますが、トラックの寸法が `auto` の最小値よりも大きい場合は _argument_ でクランプされるところが異なります。 +- {{cssxref("repeat()", "repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )")}} + - : トラックリストの繰り返しフラグメントを表し、繰り返しパターンを示す多数の列をよりコンパクトな形式で記述できるようにします。 +- [`masonry`](/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout){{Experimental_Inline}} + - : masonry の値は、この軸が組積アルゴリズムに従ってレイアウトされるべきであることを示します。 +- [subgrid](/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid) + - : `subgrid` の値は、グリッドがその軸に親グリッドのスパン部分を採用することを示します。グリッドの行や列のサイズは、明示的に指定されるのではなく、親グリッドの定義から取得されます。 -

公式定義

+> **Warning:** `masonry`の値は、グリッド仕様のレベル 3 のもので、現在は Firefox のフラグに隠された実験的な実装があるだけです。 +> +> サブグリッドの値はグリッド仕様書のレベル 2 にあり、現在のところ Firefox 71 以降でのみ実装されています。 -

{{cssinfo}}

+## 公式定義 -

形式文法

+{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

グリッド列の寸法の指定

+### グリッド列の寸法の指定 -

HTML

+#### HTML -
<div id="grid">
-  <div id="areaA">A</div>
-  <div id="areaB">B</div>
-</div>
+```html +
+
A
+
B
+
+``` -

CSS

+#### CSS -
#grid {
+```css
+#grid {
   display: grid;
   width: 100%;
   grid-template-columns: 50px 1fr;
@@ -115,101 +131,24 @@ grid-template-columns: unset;
 
 #areaB {
   background-color: yellow;
-}
- -

結果

- -

{{EmbedLiveSample("Specifying_grid_column_sizes", "100%", "20px")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Grid 2", "#subgrids", "subgrid")}}{{Spec2("CSS Grid 2")}}subgrid を追加
{{SpecName("CSS3 Grid", "#propdef-grid-template-columns", "grid-template-columns")}}{{Spec2("CSS Grid")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.grid-template-columns")}}

- -

関連情報

- - - - +} +``` + +#### 結果 + +{{EmbedLiveSample("Specifying_grid_column_sizes", "100%", "20px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template")}} +- [グリッドレイアウトガイド: グリッドレイアウトの基本概念 - グリッドトラック](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#グリッドトラック) +- 動画チュートリアル: [Defining a Grid](https://gridbyexample.com/video/series-define-a-grid/) +- [サブグリッド](/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid) -- cgit v1.2.3-54-g00ecf