From 3300096e251ced2d984b46a7dc3156b927c66d18 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 28 Nov 2021 00:08:19 +0900 Subject: 2021/08/13 時点の英語版に更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/css_grid_layout/subgrid/index.md | 127 ++++++++++------------ 1 file changed, 57 insertions(+), 70 deletions(-) diff --git a/files/ja/web/css/css_grid_layout/subgrid/index.md b/files/ja/web/css/css_grid_layout/subgrid/index.md index 386ce3ca83..38c4c7f8e6 100644 --- a/files/ja/web/css/css_grid_layout/subgrid/index.md +++ b/files/ja/web/css/css_grid_layout/subgrid/index.md @@ -1,120 +1,107 @@ --- -title: Subgrid +title: サブグリッド slug: Web/CSS/CSS_Grid_Layout/Subgrid tags: - CSS - - CSS Display - - CSS Grid - - Guide - - subgrid + - CSS 表示 + - CSS グリッド + - ガイド + - サブグリッド translation_of: Web/CSS/CSS_Grid_Layout/Subgrid --- -

{{CSSRef}}

+{{CSSRef}} -

CSS Grid Layout の Level 2 は、{{cssxref("grid-template-columns")}} および {{cssxref("grid-template-rows")}} に subgrid 値を含みます。このガイドでは、サブグリッドでできること、いくつかの使用例、この機能で解決されるデザインパターンを詳述します。

+CSS グリッドレイアウトの Level 2 は、 `subgrid` の値を {{cssxref("grid-template-columns")}} および {{cssxref("grid-template-rows")}} に追加しています。このガイドでは、サブグリッドでできること、いくつかの使用例、この機能で解決されるデザインパターンを詳述します。 -
-

重要: この機能は Firefox 71 で使用可能になりますが、今のところ、これがサブグリッドを実装する唯一のブラウザーです。

-
+> **Warning:** この機能は Firefox 71 で使用可能になりますが、今のところ、これがサブグリッドを実装している唯一のブラウザーです。 -

サブグリッドの導入

+## サブグリッドの導入 -

グリッドコンテナーに display: grid を追加する場合、その直下の子だけがグリッドアイテムになり、作成したグリッド上に置くことができます。これらグリッドアイテムの子要素は通常フローで表示されます。

+グリッドコンテナーに `display: grid` を追加すると、その直下の子だけがグリッドアイテムになり、作成したグリッド上に置くことができます。これらグリッドアイテムの子要素は通常フローで表示されます。 -

グリッドアイテムをグリッドコンテナーにすることにより、グリッドを「入れ子」にできます。しかし、これらのグリッドは互いの親グリッドに依存し、親グリッドのサイズ変更に追従しません。これでは、入れ子のグリッドアイテムをメイングリッドで整列させることが難しくなります。

+グリッドアイテムをグリッドコンテナーにすることにより、グリッドを「入れ子」にすることができます。しかし、これらのグリッドは互いの親グリッドに依存し、親グリッドのサイズ変更に追従しません。これでは、入れ子のグリッドアイテムをメイングリッドで整列させることが難しくなります。 -

grid-template-columns および grid-template-rows の両方またはどちらかに subgrid 値を設定すると、新しいトラックリストを作成するのではなく、入れ子のグリッドが親要素上で定義されたトラックを利用します。

+`subgrid` の値を `grid-template-columns` および `grid-template-rows` の両方またはどちらかに設定すると、新しいトラックリストを作成するのではなく、入れ子のグリッドが親要素上で定義されたトラックを利用します。 -

例えば、grid-template-columns: subgrid を使用し、入れ子のグリッドが親のトラック 3 列にまたがる場合、入れ子のグリッドは、親グリッドのサイズと同じトラック 3 列分になります。その列の間隔は継承されますが、異なる {{cssxref("gap")}} 値で上書きすることもできます。ライン名は親からサブグリッドへ渡されますが、サブグリッドが独自のライン名を定義することもできます。

+例えば、`grid-template-columns: subgrid` を使用し、入れ子のグリッドが親のトラック 3 列にまたがる場合、入れ子のグリッドは、親グリッドのサイズと同じトラック 3 列分になります。その列の間隔は継承されますが、異なる {{cssxref("gap")}} 値で上書きすることもできます。線名は親からサブグリッドへ渡されますが、サブグリッドが独自の線名を定義することもできます。 -

列のサブグリッド

+## 列のサブグリッド -

以下の例では、幅 1fr の 9 列のトラックで高さが最低 100px の 4 行のグリッドレイアウトを定義しています。

+以下の例では、幅 `1fr` の 9 列のトラックで高さが最低 100px の 4 行のグリッドレイアウトを定義しています。 -

このグリッドの 2 から 7 番の列ライン、2 から 4 番の行ラインに .item を置き、これをグリッドアイテムからグリッドコンテナーにします。これをサブグリッドである列トラックに与え、通常の行を定義します。アイテムの幅が 5 列のトラックにまたがるので、サブグリッドも 5 列のトラックを持ちます。次に、このグリッド上に .subitem を置きます。

+このグリッドの 2 から 7 番の列の線、2 から 4 番の行の線に `.item` を置き、これをグリッドアイテムからグリッドコンテナーにします。これをサブグリッドである列トラックに与え、通常の行を定義します。アイテムの幅が 5 列のトラックにまたがるので、サブグリッドも 5 列のトラックを持ちます。次に、このグリッド上に `.subitem` を置きます。 -

この例の行はサブグリッドではないため、通常の入れ子のグリッドとして振る舞います。親グリッド領域は、この入れ子のグリッドが十分入る大きさに拡張されます。

+この例の行はサブグリッドではないため、通常の入れ子のグリッドとして振る舞います。親グリッド領域は、この入れ子のグリッドが十分入る大きさに拡張されます。 -

{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}}

+{{EmbedGHLiveSample("css-examples/grid/subgrid/columns.html", '100%', 1200)}} -

サブグリッド内のライン番号は再び 1 番から始まるので注意してください。サブグリッド内の列ライン 1 番は、サブグリッドの最初のラインです。サブグリッド化された要素は親グリッドのライン番号を継承しません。これは、メイングリッド上の異なる位置に置かれるコンポーネントを安全に配置できることを意味し、このコンポーネント上のライン番号が常に同じであることが分かります。

+サブグリッド内の線番号は再び 1 番から始まるので注意してください。サブグリッド内の列線 1 番は、サブグリッドの最初の線です。サブグリッド化された要素は親グリッドの線番号を継承しません。これは、メイングリッド上の異なる位置に置かれるコンポーネントを安全に配置できることを意味し、このコンポーネント上の線番号が常に同じであることが分かります。 -

行のサブグリッド

+## 行のサブグリッド -

次の例は、上記と同じ設定で、grid-template-rows の値に subgrid を使用し、明示的に列トラックを定義しています。このため、列トラックが通常の入れ子のグリッドとして振る舞い、行が子スパンの 2 トラックに紐づけられます。

+次の例は、上記と同じ設定で、`grid-template-rows` の値に `subgrid` を使用し、明示的に列トラックを定義しています。このため、列トラックが通常の入れ子のグリッドとして振る舞い、行が子スパンの 2 トラックに紐づけられます。 -

{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}}

+{{EmbedGHLiveSample("css-examples/grid/subgrid/rows.html", '100%', 1200)}} -

列と行のサブグリッド

+## 列と行のサブグリッド -

もちろん、以下の例のように、行と列の両方をサブグリッドとして定義できます。これは、サブグリッドが親グリッドの行と列両方のトラックの数に紐づけられることを意味します。

+もちろん、以下の例のように、行と列の両方をサブグリッドとして定義できます。これは、サブグリッドが親グリッドの行と列両方のトラックの数に紐づけられることを意味します。 -

{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}}

+{{EmbedGHLiveSample("css-examples/grid/subgrid/both.html", '100%', 1200)}} -

サブグリッド化された範囲に暗黙のグリッドはありません

+### サブグリッド化された範囲に暗黙のグリッドはない -

アイテムを自動配置する必要があり、そのアイテムが何個になるか分からないときは、サブグリッドの作成時に、それらのアイテムを保持する追加の行が作成されないように注意してください。

+アイテムを自動配置する必要があり、そのアイテムが何個になるか分からないときは、サブグリッドの作成時に、それらのアイテムを保持する追加の行が作成されないように注意してください。 -

次の例を見てください。これは上記の例と同様に、同じ親グリッドと子グリッドを使用していますが、サブグリッド内の 10 個のグリッドセルに 12 個のアイテムを自動配置しようとしています。このサブグリッドには行と列どちらにも追加の 2 個のアイテムを置く場所がないため、仕様で定義されている通りに、これらはグリッドの最後のトラック内に置かれることになります。

+次の例を見てください。これは上記の例と同様に、同じ親グリッドと子グリッドを使用していますが、サブグリッド内の 10 個のグリッドセルに 12 個のアイテムを自動配置しようとしています。このサブグリッドには行と列どちらにも追加の 2 個のアイテムを置く場所がないため、仕様で定義されている通りに、これらはグリッドの最後のトラック内に置かれることになります。 -

{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}}

+{{EmbedGHLiveSample("css-examples/grid/subgrid/no-implicit.html", '100%', 1200)}} -

grid-template-rows の値を削除すると、通常の明示的なトラックが作成できるようになります。とはいえ、これらは親のトラックに沿って並ばないため、その数に応じて作成する必要があります。

+`grid-template-rows` の値を削除すると、通常の明示的なトラックが作成できるようになります。とはいえ、これらは親のトラックに沿って並ばないため、その数に応じて作成する必要があります。 -

{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}}

+{{EmbedGHLiveSample("css-examples/grid/subgrid/implicit.html", '100%', 1200)}} -

gap プロパティとサブグリッド

+## gap プロパティとサブグリッド -

親グリッドに {{cssxref("gap")}} または {{cssxref("column-gap")}}, {{cssxref("row-gap")}} が指定されている場合、これらはサブグリッドにも渡され、トラックの間隔が親と同じになります。状況によっては、サブグリッドのトラックの間隔を親と異なるものに設定したい場合があるでしょう。これは、サブグリッドのグリッドコンテナーに gap-* プロパティを使用することにより達成できます。

+親グリッドに {{cssxref("gap")}}, {{cssxref("column-gap")}}, {{cssxref("row-gap")}} のいずれかが指定されている場合、これらはサブグリッドにも渡され、トラックの間隔が親と同じになります。状況によっては、サブグリッドのトラックの間隔を親と異なるものに設定したい場合があるでしょう。これは、サブグリッドのグリッドコンテナーに `gap-*` プロパティを使用することにより達成できます。 -

これは以下の例で確認できます。親グリッドは 20px の行間隔と列間隔を持ち、サブグリッドは row-gap の値に 0 を設定しています。

+これは以下の例で確認できます。親グリッドは 20px の行間隔と列間隔を持ち、サブグリッドは `row-gap` の値に `0` を設定しています。 -

{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}}

+{{EmbedGHLiveSample("css-examples/grid/subgrid/gap.html", '100%', 1200)}} -

これを Firefox のグリッドインスペクターで調査すると、グリッドのラインが gap の中央に正しく描かれていることが分るでしょう。gap の値を 0 に設定した場合、同様の動作で要素に負のマージンが適用され、gap からアイテムまでのスペースが与えられます。

+これを Firefox のグリッドインスペクターで調査すると、グリッドの線が gap の中央に正しく描かれていることが分るでしょう。gap の値を 0 に設定した場合、同様の動作で要素に負のマージンが適用され、gap からアイテムまでの空間が与えられます。 -

The smaller item displays in the gap as row-gap is set to 0 on the subgrid.

+![サブグリッドの row-gap が 0 に設定されていると、小さい方のアイテムがギャップに表示されます。](gap.png) -

名付けられたグリッドライン

+## 名前付きグリッド線 -

CSS のグリッドを利用する時、そのグリッドのラインに名前を付けて、ライン番号ではなく、これらの名前でアイテムを配置できます。親グリッドのライン名がサブグリッドに渡されるので、それらを使用してアイテムを配置できます。以下の例では、親のラインに col-start および col-end という名前を付けました。これらはサブアイテムの配置に使用されます。

+CSS のグリッドを利用する時、そのグリッドの線に名前を付けて、線番号ではなく、これらの名前でアイテムを配置することができます。親グリッドの線名がサブグリッドに渡されるので、それらを使用してアイテムを配置できます。以下の例では、親の線に `col-start` および `col-end` という名前を付けました。これらはサブアイテムの配置に使用されます。 -

{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}}

+{{EmbedGHLiveSample("css-examples/grid/subgrid/line-names.html", '100%', 1200)}} -

また、サブグリッドにもライン名を指定できます。subgrid キーワードの後のラインのリストに、角括弧で囲まれたライン名を追加します。サブグリッドに 4 本のラインがある場合、次の構文ですべてのラインに名前を付けられます: grid-template-columns: subgrid [line1] [line2] [line3] [line4]

+また、サブグリッドにも線名を指定することができます。`subgrid` キーワードの後の線のリストに、角括弧で囲まれた線名を追加します。サブグリッドに 4 本の線がある場合、 `grid-template-columns: subgrid [line1] [line2] [line3] [line4]` という構文ですべての線に名前を付けることができます。 -

サブグリッドに指定されたラインは親で指定された任意のラインに追加されるため、そのライン名を親とサブグリッドのどちらでも利用できます。デモンストレーションするため、以下の例で、アイテムの一つは親ラインを利用して配置し、もう一つはサブグリッドのラインを利用しています。

+サブグリッドに指定された線は親で指定された任意の線に追加されるため、その線名を親とサブグリッドのどちらでも利用できます。デモンストレーションするため、以下の例で、アイテムの一つは親線を利用して配置し、もう一つはサブグリッドの線を利用しています。 -

{{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}}

+{{EmbedGHLiveSample("css-examples/grid/subgrid/adding-line-names.html", '100%', 1200)}} -

サブグリッドの利用

+## サブグリッドの利用 -

サブグリッド内にうまく収まらないアイテムを心配する必要なく、サブグリッドは入れ子のグリッドにとてもよく似た動作をします。ただ一つ違うところは、サブグリッドのトラックのサイズ変更が親グリッドで設定されることです。どの入れ子のグリッドでもそうであったように、サブグリッド内のコンテンツのサイズがトラックのサイズを変更することがあり、コンテンツがトラックのサイズ変更に影響することを許すメソッドが用いられることが想定されます。このような場合、例えばサイズが自動調整される行トラックは、コンテンツがメイングリッドとサブグリッド内に収まるように大きくなります。

+サブグリッド内にうまく収まらないアイテムを心配する必要なく、サブグリッドは入れ子のグリッドにとてもよく似た動作をします。ただ一つ違うところは、サブグリッドのトラックのサイズ変更が親グリッドで設定されることです。どの入れ子のグリッドでもそうであったように、サブグリッド内のコンテンツのサイズがトラックのサイズを変更することがあり、コンテンツがトラックのサイズ変更に影響することを許すメソッドが用いられることが想定されます。このような場合、例えばサイズが自動調整される行トラックは、コンテンツがメイングリッドとサブグリッド内に収まるように大きくなります。 -

subgrid 値は、通常の入れ子のグリッドとほとんど同じ方法で動作するため、これらを切り替えるのは簡単です。例えば、暗黙的な行のグリッドが必要になったときにすべきことは、grid-template-rows の subgrid 値を削除し、あるいは暗黙的なトラックのサイズ変更を制御するために grid-auto-rows に値を与えることだけです。

+subgrid 値は、通常の入れ子のグリッドとほとんど同じ方法で動作するため、これらを切り替えるのは簡単です。例えば、暗黙的な行のグリッドが必要になったときにすべきことは、`grid-template-rows` の `subgrid` 値を削除し、あるいは暗黙的なトラックのサイズ変更を制御するために `grid-auto-rows` に値を与えることだけです。 -

仕様書

+## 仕様書 - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Grid 2")}}{{Spec2("CSS Grid 2")}}サブグリッドの初回定義。
+| 仕様書 | 状態 | 備考 | +| ------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------ | +| {{SpecName("CSS Grid 2")}} | {{Spec2("CSS Grid 2")}} | [subgrids](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#subgrid) の初回定義 | -

関連情報

+## ブラウザーの互換性 - +{{Compat("css.properties.grid-template-columns.subgrid")}} + +## 関連情報 + +- Mozilla Developer YouTube チャンネル上の動画、[Laying out forms using subgrid](https://www.youtube.com/watch?v=gmQlK3kRft4) と [Don't Wait To Use Subgrid For Better Card Layouts](https://www.youtube.com/watch?v=lLnFtK1LNu4) をご覧ください。 +- CSSConf.eu でのプレゼンテーション [Hello Subgrid!](https://noti.st/rachelandrew/i6gUcF/hello-subgrid) -- cgit v1.2.3-54-g00ecf