From d1fa9e8afa695d043c5bec2bff99354cdfcf71e9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 2 Dec 2021 02:03:11 +0900 Subject: 2021/11/30 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/align-tracks/index.md | 88 +++++++++ files/ja/web/css/column-gap/index.md | 10 +- files/ja/web/css/fit-content()/index.md | 4 +- files/ja/web/css/gap/index.md | 8 +- files/ja/web/css/grid-area/index.md | 155 +++++++++++++++ files/ja/web/css/grid-auto-columns/index.md | 146 ++++++++++++++ files/ja/web/css/grid-auto-flow/index.md | 153 +++++++++++++++ files/ja/web/css/grid-auto-rows/index.md | 141 ++++++++++++++ files/ja/web/css/grid-column-end/index.md | 162 ++++++++++++++++ files/ja/web/css/grid-column-start/index.md | 240 +++++++++-------------- files/ja/web/css/grid-column/index.md | 244 ++++++++++-------------- files/ja/web/css/grid-row-end/index.md | 161 ++++++++++++++++ files/ja/web/css/grid-row-start/index.md | 170 +++++++++++++++++ files/ja/web/css/grid-row/index.md | 22 +-- files/ja/web/css/grid-template-areas/index.md | 189 ++++++------------ files/ja/web/css/grid-template-columns/index.md | 6 +- files/ja/web/css/grid-template-rows/index.md | 156 +++++++++++++++ files/ja/web/css/grid-template/index.md | 207 +++++++------------- files/ja/web/css/grid/index.md | 232 +++++++++------------- files/ja/web/css/justify-tracks/index.md | 88 +++++++++ files/ja/web/css/masonry-auto-flow/index.md | 148 ++++++++++++++ files/ja/web/css/minmax()/index.md | 214 +++++++-------------- files/ja/web/css/repeat()/index.md | 167 ++++++++-------- files/ja/web/css/row-gap/index.md | 8 +- 24 files changed, 2153 insertions(+), 966 deletions(-) create mode 100644 files/ja/web/css/align-tracks/index.md create mode 100644 files/ja/web/css/grid-area/index.md create mode 100644 files/ja/web/css/grid-auto-columns/index.md create mode 100644 files/ja/web/css/grid-auto-flow/index.md create mode 100644 files/ja/web/css/grid-auto-rows/index.md create mode 100644 files/ja/web/css/grid-column-end/index.md create mode 100644 files/ja/web/css/grid-row-end/index.md create mode 100644 files/ja/web/css/grid-row-start/index.md create mode 100644 files/ja/web/css/grid-template-rows/index.md create mode 100644 files/ja/web/css/justify-tracks/index.md create mode 100644 files/ja/web/css/masonry-auto-flow/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/align-tracks/index.md b/files/ja/web/css/align-tracks/index.md new file mode 100644 index 0000000000..6b0cd9c8b2 --- /dev/null +++ b/files/ja/web/css/align-tracks/index.md @@ -0,0 +1,88 @@ +--- +title: align-tracks +slug: Web/CSS/align-tracks +tags: + - CSS + - 実験的 + - プロパティ + - リファレンス + - align-tracks + - grid + - masonry +browser-compat: css.properties.align-tracks +translation_of: Web/CSS/align-tracks +--- +{{CSSRef}} + +{{SeeCompatTable}} + +**`align-tracks`** は CSS のプロパティで、ブロック軸が[組積](/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout)であるグリッドコンテナーの組積軸の配置を設定します。 + +## 構文 + +```css +/* キーワード値 */ +align-tracks: start; +align-tracks: space-between; +align-tracks: center; +align-tracks: start,center,end; + +/* グローバル値 */ +align-tracks: inherit; +align-tracks: initial; +align-tracks: revert; +align-tracks: unset; +``` + +このプロパティは単一の値を取ることができ、その場合はすべてのトラックが同じように整列されます。値のリストが使用された場合、最初の値はグリッド軸の最初のトラックに適用され、2 番目は次のトラックに適用され、以下同様となります。 + +値がトラックより少ない場合は、最後の値が残りすべてのトラックに使用されます。トラックよりも値が多い場合、追加の値は無視されます。 + +### 値 + +- `start` + - : アイテムは、組積軸の配置コンテナーの先頭の端に向かって、互いに詰められます。 +- `end` + - : アイテムは、組積軸の配置コンテナーの末尾の端に向かって、互いに詰められます。 +- `center` + - : アイテムは、組積軸に沿って配置コンテナーの中心に向かって、互いに詰められます。 +- `normal` + - : `start` として動作します。 +- `baseline first baseline` + `last baseline` + - : ボックスの先頭または末尾のベースラインセットの配置ベースラインを、ベースライン共有グループのすべてのボックスの共有された先頭または末尾のベースラインセットの対応するベースラインに合わせます。 + `first baseline` の代替配置は `start`、`last baseline` の代替配置は `end` です。 +- `space-between` + - : アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムは、コンテナーの先頭の端に詰められ、末尾のアイテムは、コンテナーの末尾の端に詰められます。 +- `space-around` + - : アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムの前と末尾のアイテムの後の空き空間は、隣接するアイテム同士の空間の半分に等しくなります。 +- `space-evenly` + - : アイテムは組積軸に沿って配置コンテナー内に均等に配置されます。隣接するアイテム同士の間隔、コンテナーの先頭の端と先頭のアイテム、およびコンテナーの末尾の端と末尾のアイテムは、すべて正確に同じです。 +- `stretch` + - : アイテムは組積の軸に沿って伸び、コンテンツボックスを満たします。確定したサイズのアイテムは引き伸ばされません。 + +## 公式定義 + +{{cssinfo}} + +## 関連情報 + +{{csssyntax}} + +## 例 + +### align-tracks に複数の値がある組積レイアウト + +{{EmbedGHLiveSample("css-examples/grid/masonry/align-tracks.html", '100%', 900)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("justify-tracks")}}, {{cssxref("masonry-auto-flow")}} diff --git a/files/ja/web/css/column-gap/index.md b/files/ja/web/css/column-gap/index.md index 038b642366..ed456727af 100644 --- a/files/ja/web/css/column-gap/index.md +++ b/files/ja/web/css/column-gap/index.md @@ -62,7 +62,7 @@ column-gap: unset; ## 例 -

フレックスレイアウト

+### フレックスレイアウト #### HTML @@ -94,7 +94,7 @@ column-gap: unset; {{EmbedLiveSample("Flex_layout", "auto", "120px")}} -

グリッドレイアウト

+### グリッドレイアウト #### HTML @@ -127,7 +127,7 @@ column-gap: unset; {{EmbedLiveSample("Grid_layout", "auto", "120px")}} -

段組みレイアウト

+### 段組みレイアウト #### HTML @@ -163,5 +163,5 @@ column-gap: unset; ## 関連情報 - 関連する CSS プロパティ: {{CSSxRef("row-gap")}}, {{CSSxRef("gap")}} -- グリッドレイアウトのガイド: _[グリッドレイアウトの基本概念 - 溝](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters)_ -- 段組みレイアウトのガイド: _[段組みのスタイル付け](/ja/docs/Web/CSS/CSS_Columns/Styling_Columns)_ +- グリッドレイアウトのガイド: [グリッドレイアウトの基本概念 - 溝](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters) +- 段組みレイアウトのガイド: [段組みのスタイル付け](/ja/docs/Web/CSS/CSS_Columns/Styling_Columns) diff --git a/files/ja/web/css/fit-content()/index.md b/files/ja/web/css/fit-content()/index.md index b98f044338..93f77251dc 100644 --- a/files/ja/web/css/fit-content()/index.md +++ b/files/ja/web/css/fit-content()/index.md @@ -56,12 +56,12 @@ fit-content(40%) ```html
-
Item as wide as the content.
+ Item as wide as the content.
Item with more text in it. Because the contents of it are wider than the maximum width, it is clamped at 300 pixels.
-
Flexible item
+ Flexible item
``` diff --git a/files/ja/web/css/gap/index.md b/files/ja/web/css/gap/index.md index 8d9de3c7ef..7a2899adfc 100644 --- a/files/ja/web/css/gap/index.md +++ b/files/ja/web/css/gap/index.md @@ -74,7 +74,7 @@ gap: unset; ## 例 -

フレックスレイアウト

+### フレックスレイアウト #### HTML @@ -113,7 +113,7 @@ gap: unset; {{EmbedLiveSample("Flex_layout", "auto", "120px")}} -

グリッドレイアウト

+### グリッドレイアウト #### HTML @@ -151,7 +151,7 @@ gap: unset; {{EmbedLiveSample("Grid_layout", "auto", "120px")}} -

段組みレイアウト

+### 段組みレイアウト #### HTML @@ -187,4 +187,4 @@ gap: unset; ## 関連情報 - 関連する CSS プロパティ: {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}} -- グリッドレイアウトガイド: _[グリッドレイアウトの基本概念 - 溝](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters)_ +- グリッドレイアウトガイド: [グリッドレイアウトの基本概念 - 溝](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#gutters) diff --git a/files/ja/web/css/grid-area/index.md b/files/ja/web/css/grid-area/index.md new file mode 100644 index 0000000000..6cff86f21f --- /dev/null +++ b/files/ja/web/css/grid-area/index.md @@ -0,0 +1,155 @@ +--- +title: grid-area +slug: Web/CSS/grid-area +tags: + - CSS + - CSS グリッド + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.grid-area +--- +{{CSSRef}} + +**`grid-area`** は CSS の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、 {{glossary("grid", "grid")}} 内でのグリッドアイテムの寸法と位置を指定するために、線、区間、なし (自動) をグリッド配置に適用することで、{{glossary("grid areas", "グリッド領域")}}の縁を指定します。 + +{{EmbedInteractiveExample("pages/css/grid-area.html")}} + +4 つの `` が指定された場合、 `grid-row-start` が最初の値に設定され、 `grid-column-start` が 2 つ目の値に設定され、 `grid-row-end` が 3 つ目の値に設定され、 `grid-column-end` が 4 つ目の値に設定されます。 + +`grid-column-end` が省略された場合、 `grid-column-start` が {{cssxref("<custom-ident>")}} であれば、 `grid-column-end` はその `` に設定されます。それ以外の場合は `auto` に設定されます。 + +`grid-row-end` が省略された場合、 `grid-row-start` が `` であれば、 `grid-row-end` はその `` に設定されます。それ以外の場合は `auto` に設定されます。 + +`grid-column-start` が省略された場合、 `grid-row-start` が `` であれば、 4 つの個別指定値はその値に設定されます。それ以外の場合は `auto` に設定されます。 + +grid-area プロパティは領域の名称として動作する {{cssxref("<custom-ident>")}} に設定することができ、これは {{cssxref("grid-template-areas")}} を用いて配置することができます。 + +## 構成要素のプロパティ + +このプロパティは下記の CSS プロパティの一括指定です。 + +- [`grid-row-start`](/ja/docs/Web/CSS/grid-row-start) +- [`grid-column-start`](/ja/docs/Web/CSS/grid-column-start) +- [`grid-row-end`](/ja/docs/Web/CSS/grid-row-end) +- [`grid-column-end`](/ja/docs/Web/CSS/grid-column-end) + +## 構文 + +```css +/* キーワード値 */ +grid-area: auto; +grid-area: auto / auto; +grid-area: auto / auto / auto; +grid-area: auto / auto / auto / auto; + +/* 値 */ +grid-area: some-grid-area; +grid-area: some-grid-area / another-grid-area; + +/* && ? 値 */ +grid-area: 4 some-grid-area; +grid-area: 4 some-grid-area / 2 another-grid-area; + +/* span && [ || ] 値 */ +grid-area: span 3; +grid-area: span 3 / span some-grid-area; +grid-area: 2 span / another-grid-area span; + +/* グローバル値 */ +grid-area: inherit; +grid-area: initial; +grid-area: revert; +grid-area: unset; +``` + +### 値 + +- `auto` + - : プロパティをグリッドアイテムの配置に影響させず、自動的に配置するか、既定の `1` とするためのキーワードです。 +- `` + + - : `-start`/`-end` という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 + + > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-area: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。 + + そうでなければ、これは `` に沿って整数の `1` が指定されたものとして扱われます。 + +- ` && ?` + + - : *n* 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 + + 名前が {{cssxref("<custom-ident>")}} として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 + + `0` の {{cssxref("<integer>")}} 値は無効です。 + +- `span && [ || ]` + + - : グリッドアイテムのグリッド領域の列側の先頭の端が末尾の端から _n_ 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + + 名前が {{cssxref("<custom-ident>")}} として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + + {{cssxref("<integer>")}} が省略された場合の既定値は `1` です。負の数や 0 は無効です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### グリッド領域の設定 + +#### HTML + +```html +
+
+
+
+
+``` + +#### CSS + +```css +#grid { + display: grid; + height: 100px; + grid-template: repeat(4, 1fr) / 50px 100px; +} + +#item1 { + background-color: lime; + grid-area: 2 / 2 / auto / span 3; +} + +#item2 { + background-color: yellow; +} + +#item3 { + background-color: blue; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_grid_areas", "100%", "150px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-template-areas")}} +- グリッドレイアウトガイド: [CSS グリッドでの線ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) +- 動画チュートリアル: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/ja/web/css/grid-auto-columns/index.md b/files/ja/web/css/grid-auto-columns/index.md new file mode 100644 index 0000000000..27b4b54cc5 --- /dev/null +++ b/files/ja/web/css/grid-auto-columns/index.md @@ -0,0 +1,146 @@ +--- +title: grid-auto-columns +slug: Web/CSS/grid-auto-columns +tags: + - CSS + - CSS グリッド + - CSS プロパティ + - リファレンス +browser-compat: css.properties.grid-auto-columns +translation_of: Web/CSS/grid-auto-columns +--- +{{CSSRef}} + +**`grid-auto-columns`** は CSS のプロパティで、暗黙的に生成されたグリッドの列{{glossary("grid tracks", "トラック")}}またはトラックのパターンの大きさを指定します。 + +{{EmbedInteractiveExample("pages/css/grid-auto-columns.html")}} + +グリッドアイテムが {{cssxref("grid-template-columns")}} で明示的に大きさが指定されていない列に配置された場合、暗黙的に {{glossary("grid", "grid")}} トラックが作成され、そのアイテムを保持します。これには、範囲外の列に明示的に配置する場合と、自動配置アルゴリズムによって追加の列が作成される場合があります。 + +## 構文 + +```css +/* キーワード値 */ +grid-auto-columns: min-content; +grid-auto-columns: max-content; +grid-auto-columns: auto; + +/* 値 */ +grid-auto-columns: 100px; +grid-auto-columns: 20cm; +grid-auto-columns: 50vmax; + +/* 値 */ +grid-auto-columns: 10%; +grid-auto-columns: 33.3%; + +/* 値 */ +grid-auto-columns: 0.5fr; +grid-auto-columns: 3fr; + +/* minmax() 値 */ +grid-auto-columns: minmax(100px, auto); +grid-auto-columns: minmax(max-content, 2fr); +grid-auto-columns: minmax(20%, 80vmax); + +/* fit-content() 値 */ +grid-auto-columns: fit-content(400px); +grid-auto-columns: fit-content(5cm); +grid-auto-columns: fit-content(20%); + +/* multiple track-size 値 */ +grid-auto-columns: min-content max-content auto; +grid-auto-columns: 100px 150px 390px; +grid-auto-columns: 10% 33.3%; +grid-auto-columns: 0.5fr 3fr 1fr; +grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); +grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); + +/* グローバル値 */ +grid-auto-columns: inherit; +grid-auto-columns: initial; +grid-auto-columns: revert; +grid-auto-columns: unset; +``` + +### 値 + +- {{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_ として扱われます。`` の値は、最大値として、トラックのフレックス係数を設定します。最小値としては、ゼロ（または、グリッドコンテナーの寸法が最小コンテンツの制約を受けている場合は、最小コンテンツ）として扱われます。 +- {{cssxref("fit-content()", "fit-content( [ <length> | <percentage> ] )")}} + - : `min(max-content, max(auto, argument))` という式を表します。この式は、トラックの寸法が `auto` の最小値よりも大きい場合に _argument_ で固定されることを除いて、`auto` と同様 (すなわち `minmax(auto, max-content)`) に計算されます。 +- `auto` + + - : 最大値であれば最小コンテンツと同一のキーワードです。最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小サイズ（{{cssxref("min-width")}}/{{cssxref("min-height")}}で指定されたサイズ）を表します。 + + > **Note:** トラックの寸法が `auto` の場合は、{{cssxref("align-content")}}と{{cssxref("justify-content")}}のプロパティによって引き伸ばすことができます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### グリッド列の寸法を設定 + +#### HTML + +```html +
+ 
+ 
+ 
+
+``` + +#### CSS + +```css +#grid { + height: 100px; + display: grid; + grid-template-areas: "a a"; + gap: 10px; + grid-auto-columns: 200px; +} + +#grid > div { + background-color: lime; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_grid_column_size", "410px", "100px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}} +- グリッドレイアウトガイド: [CSS グリッドレイアウトでの自動配置 - 暗黙のグリッド内での行の大きさ](/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#暗黙のグリッド内での行の大きさ) +- 動画チュートリアル: _[Introducing Grid auto-placement and order](http://gridbyexample.com/video/series-auto-placement-order/)_ diff --git a/files/ja/web/css/grid-auto-flow/index.md b/files/ja/web/css/grid-auto-flow/index.md new file mode 100644 index 0000000000..ee076184a5 --- /dev/null +++ b/files/ja/web/css/grid-auto-flow/index.md @@ -0,0 +1,153 @@ +--- +title: grid-auto-flow +slug: Web/CSS/grid-auto-flow +tags: + - CSS + - CSS グリッド + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.grid-auto-flow +--- +{{CSSRef}} + +The **`grid-auto-flow`** CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. + +{{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}} + +## 構文 + +```css +/* キーワード値 */ +grid-auto-flow: row; +grid-auto-flow: column; +grid-auto-flow: dense; +grid-auto-flow: row dense; +grid-auto-flow: column dense; + +/* グローバル値 */ +grid-auto-flow: inherit; +grid-auto-flow: initial; +grid-auto-flow: revert; +grid-auto-flow: unset; +``` + +This property may take one of two forms: + +- a single keyword: one of `row`, `column`, or `dense`. +- two keywords: `row dense` or `column dense`. + +### 値 + +- `row` + - : Items are placed by filling each row in turn, adding new rows as necessary. If neither `row` nor `column` is provided, `row` is assumed. +- `column` + - : Items are placed by filling each column in turn, adding new columns as necessary. +- `dense` + + - : "dense" packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items. + + If it is omitted, a "sparse" algorithm is used, where the placement algorithm only ever moves "forward" in the grid when placing items, never backtracking to fill holes. This ensures that all of the auto-placed items appear "in order", even if this leaves holes that could have been filled by later items. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Setting grid auto-placement + +#### HTML + +```html +
+ 
+ 
+ 
+ 
+ 
+
+ + + +``` + +#### CSS + +```css +#grid { + height: 200px; + width: 200px; + display: grid; + gap: 10px; + grid-template: repeat(4, 1fr) / repeat(2, 1fr); + grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ +} + +#item1 { + background-color: lime; + grid-row-start: 3; +} + +#item2 { + background-color: yellow; +} + +#item3 { + background-color: blue; +} + +#item4 { + grid-column-start: 2; + background-color: red; +} + +#item5 { + background-color: aqua; +} +``` + +```js hidden +function changeGridAutoFlow() { + var grid = document.getElementById("grid"); + var direction = document.getElementById("direction"); + var dense = document.getElementById("dense"); + var gridAutoFlow = direction.value === "row" ? "row" : "column"; + + if (dense.checked) { + gridAutoFlow += " dense"; + } + + grid.style.gridAutoFlow = gridAutoFlow; +} + +const selectElem = document.querySelector('select'); +const inputElem = document.querySelector('input'); +selectElem.addEventListener('change', changeGridAutoFlow); +inputElem.addEventListener('change', changeGridAutoFlow); +``` + +#### Result + +{{EmbedLiveSample("Setting_grid_auto-placement", "200px", "230px")}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- Related CSS properties: {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid")}} +- Grid Layout Guide: _[Auto-placement in grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout)_ +- Video tutorial: _[Introducing Grid auto-placement and order](http://gridbyexample.com/video/series-auto-placement-order/)_ diff --git a/files/ja/web/css/grid-auto-rows/index.md b/files/ja/web/css/grid-auto-rows/index.md new file mode 100644 index 0000000000..3849d41baa --- /dev/null +++ b/files/ja/web/css/grid-auto-rows/index.md @@ -0,0 +1,141 @@ +--- +title: grid-auto-rows +slug: Web/CSS/grid-auto-rows +tags: + - CSS + - CSS グリッド + - CSS プロパティ + - リファレンス +browser-compat: css.properties.grid-auto-rows +translation_of: Web/CSS/grid-auto-rows +--- +{{CSSRef}} + +**`grid-auto-rows`** は CSS のプロパティで、暗黙的に生成されたグリッドの列{{glossary("grid tracks", "トラック")}}またはトラックのパターンの大きさを指定します。 + +{{EmbedInteractiveExample("pages/css/grid-auto-rows.html")}} + +グリッドアイテムが {{cssxref("grid-template-rows")}} で明示的に大きさが指定されていない行に配置された場合、暗黙的に {{glossary("grid", "grid")}} トラックが作成され、そのアイテムを保持します。これには、範囲外の行に明示的に配置する場合と、自動配置アルゴリズムによって追加の行が作成される場合があります。 + +## 構文 + +```css +/* キーワード値 */ +grid-auto-rows: min-content; +grid-auto-rows: max-content; +grid-auto-rows: auto; + +/* 値 */ +grid-auto-rows: 100px; +grid-auto-rows: 20cm; +grid-auto-rows: 50vmax; + +/* 値 */ +grid-auto-rows: 10%; +grid-auto-rows: 33.3%; + +/* 値 */ +grid-auto-rows: 0.5fr; +grid-auto-rows: 3fr; + +/* minmax() 値 */ +grid-auto-rows: minmax(100px, auto); +grid-auto-rows: minmax(max-content, 2fr); +grid-auto-rows: minmax(20%, 80vmax); + +/* multiple track-size 値 */ +grid-auto-rows: min-content max-content auto; +grid-auto-rows: 100px 150px 390px; +grid-auto-rows: 10% 33.3%; +grid-auto-rows: 0.5fr 3fr 1fr; +grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); +grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); + +/* グローバル値 */ +grid-auto-rows: inherit; +grid-auto-rows: initial; +grid-auto-rows: revert; +grid-auto-rows: unset; +``` + +### 値 + +- {{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_ として扱われます。`` の値は、最大値として、トラックのフレックス係数を設定します。最小値としては、ゼロ（または、グリッドコンテナーの寸法が最小コンテンツの制約を受けている場合は、最小コンテンツ）として扱われます。 +- {{cssxref("fit-content()", "fit-content( [ <length> | <percentage> ] )")}} + - : `min(max-content, max(auto, argument))` という式を表します。この式は、トラックの寸法が `auto` の最小値よりも大きい場合に _argument_ で固定されることを除いて、`auto` と同様 (すなわち `minmax(auto, max-content)`) に計算されます。 +- `auto` + + - : 最大値であれば最小コンテンツと同一のキーワードです。最小値の場合は、グリッドトラックを占めるグリッドアイテムの最大の最小サイズ（{{cssxref("min-width")}}/{{cssxref("min-height")}}で指定されたサイズ）を表します。 + + > **Note:** トラックの寸法が `auto` の場合は（かつ `auto` の場合のみ）、{{cssxref("align-content")}}と{{cssxref("justify-content")}}のプロパティによって引き伸ばすことができます。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### グリッド行の寸法を設定 + +#### HTML + +```html +
+ 
+ 
+ 
+
+``` + +#### CSS + +```css +#grid { + width: 200px; + display: grid; + grid-template-areas: "a a"; + gap: 10px; + grid-auto-rows: 100px; +} + +#grid > div { + background-color: lime; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_grid_row_size", "210px", "210px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid")}} +- グリッドレイアウトガイド: [CSS グリッドレイアウトでの自動配置 - 暗黙のグリッド内での行の大きさ](/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout#暗黙のグリッド内での行の大きさ) +- 動画チュートリアル: _[Introducing Grid auto-placement and order](https://gridbyexample.com/video/series-auto-placement-order/)_ diff --git a/files/ja/web/css/grid-column-end/index.md b/files/ja/web/css/grid-column-end/index.md new file mode 100644 index 0000000000..484fab6cd5 --- /dev/null +++ b/files/ja/web/css/grid-column-end/index.md @@ -0,0 +1,162 @@ +--- +title: grid-column-end +slug: Web/CSS/grid-column-end +tags: + - CSS + - CSS グリッド + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.grid-column-end +translation_of: Web/CSS/grid-column-end +--- +{{CSSRef}} + +**`grid-column-end`** は CSS のプロパティで、グリッドの配置に線または区間を使用したり、使用しなかったりして (自動)、グリッド列内のグリッドアイテムの末尾位置、すなわち{{Glossary("grid areas", "グリッド領域")}}のブロックの末尾側の端を指定します。 + +{{EmbedInteractiveExample("pages/css/grid-column-end.html")}} + +## 構文 + +```css +/* キーワード値 */ +grid-column-end: auto; + +/* 値 */ +grid-column-end: somegridarea; + +/* + 値 */ +grid-column-end: 2; +grid-column-end: somegridarea 4; + +/* span + + 値 */ +grid-column-end: span 3; +grid-column-end: span somegridarea; +grid-column-end: 5 somegridarea span; + +/* グローバル値 */ +grid-column-end: inherit; +grid-column-end: initial; +grid-column-end: revert; +grid-column-end: unset; +``` + +### 値 + +- `auto` + - : プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の `1` とするためのキーワードです。 +- `` + + - : `-end` という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。 + + > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-column-end: foo;` と指定すると名前付きグリッド領域の末尾側の端を選択します (その前に `foo-end` という名前の線が明示的に存在しない限り)。 + + そうでなければ、これは `` に沿って整数の `1` が指定されたものとして扱われます。 + +- ` && ?` + + - : n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 + + 名前が `` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 + + `0` の {{cssxref("integer")}} 値は無効です。 + +- `span && [ || ]` + + - : グリッドアイテムのグリッド領域の列の末尾の端が先頭の端から n 本になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + + 名前が `` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + + \ が省略された場合の既定値は `1` です。負の数や `0` は無効です。 + + `` は `span` の値を取ることができません。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### グリッドアイテムの列の末尾位置の設定 + +#### HTML + +```html +
+
One
+
Two
+
Three
+
Four
+
Five
+
+``` + +#### CSS + +```css +.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 3; + grid-row-end: 5; +} +``` + +```css hidden +* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_column_end_for_a_grid_item', '230', '420') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-column-start")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}} +- グリッドレイアウトガイド: [CSS グリッドでの線ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) +- 動画チュートリアル: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/ja/web/css/grid-column-start/index.md b/files/ja/web/css/grid-column-start/index.md index 72c1fba394..297f61af2c 100644 --- a/files/ja/web/css/grid-column-start/index.md +++ b/files/ja/web/css/grid-column-start/index.md @@ -3,31 +3,33 @@ title: grid-column-start slug: Web/CSS/grid-column-start tags: - CSS - - CSS Grid - - CSS Property - - Reference - - 'recipe:css-property' + - CSS グリッド + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.grid-column-start translation_of: Web/CSS/grid-column-start --- -

grid-column-start は CSS のプロパティで、グリッドの配置に線または区間を使用したり、使用しなかったりして (自動)、グリッド列内のグリッドアイテムの開始位置を指定します。この開始位置は、{{Glossary("grid areas", "グリッド領域")}}の行の開始の端を指定します。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/grid-column-start.html")}}
+**`grid-column-start`** は CSS のプロパティで、グリッドの配置に線または区間を使用したり、使用しなかったりして (自動)、グリッド列内のグリッドアイテムの先頭位置を指定します。この開始位置は、{{Glossary("grid areas", "グリッド領域")}}のブロックの開始側の端を指定します。 - +{{EmbedInteractiveExample("pages/css/grid-column-start.html")}} -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 grid-column-start: auto;
 
-/* <custom-ident> 値 */
+/*  値 */
 grid-column-start: somegridarea;
 
-/* <integer> + <custom-ident> 値 */
+/*  +  値 */
 grid-column-start: 2;
 grid-column-start: somegridarea 4;
 
-/* span + <integer> + <custom-ident> 値 */
+/* span +  +  値 */
 grid-column-start: span 3;
 grid-column-start: span somegridarea;
 grid-column-start: span somegridarea 5;
@@ -35,72 +37,76 @@ grid-column-start: span somegridarea 5;
 /* グローバル値 */
 grid-column-start: inherit;
 grid-column-start: initial;
+grid-column-start: revert;
 grid-column-start: unset;
-
+``` -

このプロパティは単一の <grid-line> 値で指定します。 <grid-line> 値は次のように指定します。

+このプロパティは単一の `` 値で指定します。 `` 値は次のように指定します。 -
    -
  • auto キーワード
    • -
  • <custom-ident> 値
    • -
  • <integer> 値
    • -
  • <custom-ident> および <integer> を空白で区切ったもの
    • -
  • span キーワードと <custom-ident> または <integer> またはその両方。
    • -
+- `auto` キーワード +- `` 値 +- `` 値 +- `` および `` を空白で区切ったもの +- `span` キーワードと `` または `` またはその両方。 -

値

+### 値 -
-
auto
-
プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の 1 とするためのキーワードです。
-
<custom-ident>
-
<custom-ident>-start という名前の付いた線がある場合、これはそのような線の最初がグリッアイテムの配置に関わります。 -

メモ: 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 grid-column-start: foo; と指定すると名前付きグリッド領域の先頭側の端を選択します (その前に foo-start という名前の線が明示的に存在しない限り)。

+- `auto` + - : プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の `1` とするためのキーワードです。 +- `` -

そうでなければ、これは <custom-ident> に沿って整数の 1 が指定されたものとして扱われます。

-
-
<integer> && <custom-ident>?
-
n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 -

名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。

+ - : `-start` という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。 -

0 の {{cssxref("integer")}} 値は無効です。

-
-
span && [ <integer> || <custom-ident> ]
-
グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 -

名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

+ > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-column-start: foo;` と指定すると名前付きグリッド領域の先頭側の端を選択します (その前に `foo-start` という名前の線が明示的に存在しない限り)。 -

the <integer> が省略された場合の既定値は 1 です。負の数や 0 は無効です。

+ そうでなければ、これは `` に沿って整数の `1` が指定されたものとして扱われます。 -

<custom-ident> は span の値を取ることができません。

-
-
+- ` && ?` -

公式定義

+ - : n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 -

{{cssinfo}}

+ 名前が `` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 -

形式文法

+ `0` の {{cssxref("integer")}} 値は無効です。 + +- `span && [ || ]` + + - : グリッドアイテムのグリッド領域の列の先頭の端が末尾の端から n 本になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + + 名前が `` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + + \ が省略された場合の既定値は `1` です。負の数や `0` は無効です。 + + `` は `span` の値を取ることができません。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 -

グリッドアイテムの列の開始位置の設定

+### グリッドアイテムの列の開始位置の設定 -

HTML

+#### HTML -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-  <div class="box4">Four</div>
-  <div class="box5">Five</div>
-</div>
-
+```html +
+
One
+
Two
+
Three
+
Four
+
Five
+
+``` -

CSS

+#### CSS -
.wrapper {
+```css
+.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 100px;
@@ -118,10 +124,10 @@ grid-column-start: unset;
   grid-row-start: 3;
   grid-row-end: 5;
 }
-
+``` - +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_column_start_for_a_grid_item', '230', '420') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -

結果

- -

{{ EmbedLiveSample('Setting_column_start_for_a_grid_item', '230', '420') }}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Grid", "#propdef-grid-column-start", "grid-column-start")}}{{Spec2("CSS3 Grid")}}初回定義
- -

ブラウザーの互換性

- -

{{Compat("css.properties.grid-column-start")}}

- -

関連情報

- - - - +- 関連する CSS プロパティ: {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}} +- グリッドレイアウトガイド: [CSS グリッドでの線ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) +- 動画チュートリアル: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/ja/web/css/grid-column/index.md b/files/ja/web/css/grid-column/index.md index 3a6f29ac1d..230ccc41a5 100644 --- a/files/ja/web/css/grid-column/index.md +++ b/files/ja/web/css/grid-column/index.md @@ -5,73 +5,111 @@ tags: - CSS - CSS グリッド - CSS プロパティ - - Reference + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.grid-column translation_of: Web/CSS/grid-column --- -

grid-column は CSS のプロパティで、 {{cssxref("grid-column-start")}} および {{cssxref("grid-column-end")}} の一括指定プロパティであり、{{glossary("grid column", "グリッド列")}}の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用されることで、{{Glossary("grid areas", "グリッド領域")}}の行の開始と終了の端を指定します。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/grid-column.html")}}
+**`grid-column`** は CSS の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、{{glossary("grid column", "グリッド列")}}の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用することで、{{Glossary("grid areas", "グリッド領域")}}の行の先頭と末尾の端を指定します。 - +{{EmbedInteractiveExample("pages/css/grid-column.html")}} -

構文

+## 構成要素のプロパティ -

このプロパティは一つまたは二つの <grid-line> の値で指定します。

+このプロパティは以下の CSS プロパティの一括指定です。 -

二つの <grid-line> 値を指定する場合は、 "/" で区切ります。個別指定の grid-column-start はスラッシュの前に設定し、個別指定の grid-column-end はスラッシュの後に設定します。

+- [`grid-column-end`](/ja/docs/Web/CSS/grid-column-end) +- [`grid-column-start`](/ja/docs/Web/CSS/grid-column-start) -

それぞれの <grid-line> の値は以下の何れかを指定できます。

+## 構文 -
    -
  • auto キーワード
    • -
  • <custom-ident> 値
    • -
  • <integer> 値
    • -
  • <custom-ident> および <integer> を空白で区切ったもの
    • -
  • span キーワードと <custom-ident> または <integer> またはその両方。
    • -
+```css +grid-column: auto; -

値

+/* 線番号による */ +grid-column: 1; +grid-column: 1 / 3; +grid-column: 1 / span 2; -
-
auto
-
プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の 1 とするためのキーワードです。
-
<custom-ident>
-
'<custom-ident>-start'/'<custom-ident>-end' という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 -

メモ: 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 grid-column: foo; と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に foo-start/foo-end という名前の線が明示的に存在しない限り)。

+/* 線の名称による */ +grid-column: main-start; +grid-column: main-start / main-end; -

そうでなければ、これは <custom-ident> に沿って整数の 1 が指定されたものとして扱われます。

-
-
<integer> && <custom-ident>?
-
n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 -

名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。

+/* グローバル値 */ +grid-column: inherit; +grid-column: initial; +grid-column: revert; +grid-column: unset; +``` -

0 の {{cssxref("integer")}} 値は無効です。

-
-
span && [ <integer> || <custom-ident> ]
-
グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 -

名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分にない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

+このプロパティは 1 つまたは 2 つの `` の値で指定します。 -

the <integer> が省略された場合の既定値は 1 です。負の数や0は無効です。

-
-
+2 つの `` 値を指定する場合は、 "/" で区切ります。個別指定の `grid-column-start` はスラッシュの前に設定し、個別指定の `grid-column-end` はスラッシュの後に設定します。 -

形式文法

+それぞれの `` の値は以下の何れかを指定することができます。 + +- `auto` キーワード +- `` 値 +- `` 値 +- `` および `` を空白で区切ったもの +- `span` キーワードと `` または `` またはその両方。 + +### 値 + +- `auto` + - : プロパティをグリッドアイテムの配置に影響させず、自動的に配置するか、間隔を自動的に取るか、既定の `1` とするためのキーワードです。 +- `` + + - : `-start`/`-end` という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 + + > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-column: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。 + + そうでなければ、これは `` に沿って整数の `1` が指定されたものとして扱われます。 + +- ` && ?` + + - : n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 + + 名前が `` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 + + `0` の {{cssxref("integer")}} 値は無効です。 + +- `span && [ || ]` + + - : グリッドアイテムのグリッド領域の列側の先頭の端が末尾の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + + 名前が `` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + + `` が省略された場合の既定値は `1` です。負の数や 0 は無効です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +### グリッド列の寸法と位置の設定 -

HTML

+#### HTML -
<div id="grid">
-  <div id="item1"></div>
-  <div id="item2"></div>
-  <div id="item3"></div>
-</div>
+```html +
+
+
+
+
+``` -

CSS

+#### CSS -
#grid {
+```css
+#grid {
   display: grid;
   height: 100px;
   grid-template-columns: repeat(6, 1fr);
@@ -91,99 +129,23 @@ translation_of: Web/CSS/grid-column
   background-color: blue;
   grid-column: span 2 / 7;
 }
-
- -

{{EmbedLiveSample("Example", "100%", "100px")}}

- -

Internet Explorer での問題

- -

IE11 はグリッドアイテムの自動配置に対応していません。すべてのアイテムは、明示的に -ms-{{cssxref("grid-column")}} および -ms-{{cssxref("grid-row")}} を記述しない限り、最初の行・列に配置されます。小さな JavaScript を用いて自動的な配置をすることもできます。 ソースリポジトリ

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS3 Grid", "#propdef-grid-column", "grid-column")}}{{Spec2("CSS3 Grid")}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの互換性

- -

{{Compat("css.properties.grid-column")}}

- -

関連情報

- -
    -
  • 関連する CSS プロパティ: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}
    • -
  • グリッドレイアウトガイド: CSS グリッドでの行ベースの配置
    • -
  • 動画チュートリアル: 行ベースの配置
    • -
- - +``` + +#### 結果 + +{{EmbedLiveSample("Setting_grid_column_size_and_location", "100%", "100px")}} + + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} +- グリッドレイアウトガイド: [CSS グリッドでの線ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) +- 動画チュートリアル: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/ja/web/css/grid-row-end/index.md b/files/ja/web/css/grid-row-end/index.md new file mode 100644 index 0000000000..38e195e4d7 --- /dev/null +++ b/files/ja/web/css/grid-row-end/index.md @@ -0,0 +1,161 @@ +--- +title: grid-row-end +slug: Web/CSS/grid-row-end +tags: + - CSS + - CSS グリッド + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.grid-row-end +--- +{{CSSRef}} + +**`grid-row-end`** は CSS のプロパティで、グリッドの配置に線または区間を使用したり、使用しなかったりして (自動)、グリッド行内のグリッドアイテムの末尾位置、すなわち{{Glossary("grid areas", "グリッド領域")}}のインラインの末尾側の端を指定します。 + +{{EmbedInteractiveExample("pages/css/grid-row-end.html")}} + +## 構文 + +```css +/* キーワード値 */ +grid-row-end: auto; + +/* 値 */ +grid-row-end: somegridarea; + +/* + 値 */ +grid-row-end: 2; +grid-row-end: somegridarea 4; + +/* span + + 値 */ +grid-row-end: span 3; +grid-row-end: span somegridarea; +grid-row-end: 5 somegridarea span; + +/* グローバル値 */ +grid-row-end: inherit; +grid-row-end: initial; +grid-row-end: revert; +grid-row-end: unset; +``` + +### 値 + +- `auto` + - : プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の `1` とするためのキーワードです。 +- `` + + - : `-end` という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。 + + > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row-end: foo;` と指定すると名前付きグリッド領域の末尾側の端を選択します (その前に `foo-end` という名前の線が明示的に存在しない限り)。 + + そうでなければ、これは `` に沿って整数の `1` が指定されたものとして扱われます。 + + `` は `span` の値を取ることができません。 + +- ` && ?` + + - : n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 + + 名前が `` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 + + `0` の {{cssxref("integer")}} 値は無効です。 + +- `span && [ || ]` + + - : グリッドアイテムのグリッド領域の行の末尾の端が先頭の端から n 本になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + + 名前が `` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + + \ が省略された場合の既定値は `1` です。負の数や `0` は無効です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### グリッドアイテムの行の末尾位置の設定 + +#### HTML + +```html +
+
One
+
Two
+
Three
+
Four
+
Five
+
+``` + +#### CSS + +```css +.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 3; + grid-row-end: 5; +} +``` + +```css hidden +* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_row_end_for_a_grid_item', '230', '420') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-row-start")}}, {{cssxref("grid-row")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}} +- グリッドレイアウトガイド: [CSS グリッドでの行ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) +- 動画チュートリアル: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/ja/web/css/grid-row-start/index.md b/files/ja/web/css/grid-row-start/index.md new file mode 100644 index 0000000000..c0dab06c66 --- /dev/null +++ b/files/ja/web/css/grid-row-start/index.md @@ -0,0 +1,170 @@ +--- +title: grid-row-start +slug: Web/CSS/grid-row-start +tags: + - CSS + - CSS グリッド + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.grid-row-start +tra: Web/CSS/grid-row-start +--- +{{CSSRef}} + +**`grid-row-start`** は CSS のプロパティで、グリッドの配置に線または区間を使用したり、使用しなかったりして (自動)、グリッド行内のグリッドアイテムの先頭位置、すなわち{{Glossary("grid areas", "グリッド領域")}}のインラインの先頭側の端を指定します。 + +{{EmbedInteractiveExample("pages/css/grid-row-start.html")}} + +## 構文 + +```css +/* キーワード値 */ +grid-row-start: auto; + +/* 値 */ +grid-row-start: somegridarea; + +/* + 値 */ +grid-row-start: 2; +grid-row-start: somegridarea 4; + +/* span + + 値 */ +grid-row-start: span 3; +grid-row-start: span somegridarea; +grid-row-start: 5 somegridarea span; + +/* グローバル値 */ +grid-row-start: inherit; +grid-row-start: initial; +grid-row-start: revert; +grid-row-start: unset; +``` + +このプロパティは単一の `` 値で指定します。 `` 値は次のように指定します。 + +- `auto` キーワード +- `` 値 +- `` 値 +- `` および `` を空白で区切ったもの +- `span` キーワードと `` または `` またはその両方。 + +### 値 + +- `auto` + - : プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の `1` とするためのキーワードです。 +- `` + + - : `-start` という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。 + + > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row-start: foo;` と指定すると名前付きグリッド領域の先頭側の端を選択します (その前に `foo-start` という名前の線が明示的に存在しない限り)。 + + そうでなければ、これは `` に沿って整数の `1` が指定されたものとして扱われます。 + +- ` && ?` + + - : n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 + + 名前が `` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 + + `0` の {{cssxref("integer")}} 値は無効です。 + +- `span && [ || ]` + + - : グリッドアイテムのグリッド領域の行の先頭の端が終了の端から n 本になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + + 名前が `` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + + \ が省略された場合の既定値は `1` です。負の数や `0` は無効です。 + + `` は `span` の値を取ることができません。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### グリッドアイテムの行の開始位置の設定 + +#### HTML + +```html +
+
One
+
Two
+
Three
+
Four
+
Five
+
+``` + +#### CSS + +```css +.wrapper { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; +} + +.box1 { + grid-column-start: 1; + grid-column-end: 4; + grid-row-start: 1; + grid-row-end: 3; +} + +.box2 { + grid-column-start: 1; + grid-row-start: 3; + grid-row-end: 5; +} +``` + +```css hidden +* {box-sizing: border-box;} + +.wrapper { + border: 2px solid #f76707; + border-radius: 5px; + background-color: #fff4e6; +} + +.wrapper > div { + border: 2px solid #ffa94d; + border-radius: 5px; + background-color: #ffd8a8; + padding: 1em; + color: #d9480f; +} + +.nested { + border: 2px solid #ffec99; + border-radius: 5px; + background-color: #fff9db; + padding: 1em; +} +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_row_start_for_a_grid_item', '230', '420') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}} +- グリッドレイアウトガイド: [CSS グリッドでの行ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) +- 動画チュートリアル: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/ja/web/css/grid-row/index.md b/files/ja/web/css/grid-row/index.md index 1f0b579d82..5417e86108 100644 --- a/files/ja/web/css/grid-row/index.md +++ b/files/ja/web/css/grid-row/index.md @@ -3,20 +3,20 @@ title: grid-row slug: Web/CSS/grid-row tags: - CSS - - CSS Grid + - CSS グリッド - CSS プロパティ - - Reference + - リファレンス - recipe:css-shorthand-property browser-compat: css.properties.grid-row translation_of: Web/CSS/grid-row --- {{CSSRef}} -**`grid-row`** は CSS の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティで、グリッド行の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用されることで、{{Glossary("grid areas", "グリッド領域")}}の行の先頭と末尾の端を指定します。 +**`grid-row`** は CSS の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、グリッド行の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用することで、{{Glossary("grid areas", "グリッド領域")}}の行の先頭と末尾の端を指定します。 {{EmbedInteractiveExample("pages/css/grid-row.html")}} -2 つの `\` 値が指定された場合は、個別指定の `grid-row-start` はスラッシュの前に設定し、個別指定の `grid-row-end` はスラッシュの後に設定します。 +2 つの `` 値を指定する場合は、個別指定の `grid-row-start` をスラッシュの前に設定し、 `grid-row-end` をスラッシュの後に設定します。 ## 構成要素のプロパティ @@ -61,7 +61,7 @@ grid-row: unset; - : プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の `1` とするためのキーワードです。 - `` - - : '\-start'/'\-end' という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 + - : `-start`/`-end` という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。 @@ -71,17 +71,17 @@ grid-row: unset; - : n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 - 名前が \ として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 + 名前が `` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 `0` の {{cssxref("integer")}} 値は無効です。 - `span && [ || ]` - - : グリッドアイテムのグリッド領域の列先頭の端が末尾の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + - : グリッドアイテムのグリッド領域の列側の先頭の端が末尾の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 - 名前が \ として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + 名前が `` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 - \ が省略された場合の既定値は `1` です。負の数や 0 は無効です。 + `` が省略された場合の既定値は `1` です。負の数や 0 は無効です。 ## 公式定義 @@ -93,7 +93,7 @@ grid-row: unset; ## 例 -

グリッド行の寸法と位置の設定

+### グリッド行の寸法と位置の設定 #### HTML @@ -145,5 +145,5 @@ grid-row: unset; ## 関連情報 - 関連する CSS プロパティ: {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} -- グリッドレイアウトガイド: _[CSS グリッドでの行ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid)_ +- グリッドレイアウトガイド: [CSS グリッドでの線ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) - 動画チュートリアル: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ diff --git a/files/ja/web/css/grid-template-areas/index.md b/files/ja/web/css/grid-template-areas/index.md index f753d8596d..e7c42ad7f1 100644 --- a/files/ja/web/css/grid-template-areas/index.md +++ b/files/ja/web/css/grid-template-areas/index.md @@ -3,25 +3,28 @@ title: grid-template-areas slug: Web/CSS/grid-template-areas tags: - CSS - - CSS Grid - - CSS Property - - Reference + - CSS グリッド + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.grid-template-areas translation_of: Web/CSS/grid-template-areas --- -

grid-template-areas CSS プロパティは、名前付きの {{glossary("grid areas", "グリッド領域")}} を指定します。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}
+**`grid-template-areas`** は CSS のプロパティで、グリッド内でセルを確立し、名前を割り当てることにより、名前付きの {{glossary("grid areas", "グリッド領域")}} を指定します。 - +{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}} -

これらの領域は特定のグリッドアイテムに関連付けられていませんが、グリッド配置プロパティである {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} およびそれらの短縮プロパティ {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, {{cssxref("grid-area")}} から参照できます。

+これらの領域は、特定のグリッドアイテムに関連付けられていませんが、グリッド配置プロパティである {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}} およびそれらの一括指定プロパティ {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, {{cssxref("grid-area")}} で参照することができます。 -

構文

+## 構文 -
/* キーワード値 */
+```css
+/* キーワード値 */
 grid-template-areas: none;
 
-/* <string> 値 */
+/*  値 */
 grid-template-areas: "a b";
 grid-template-areas: "a b b"
                      "a c d";
@@ -29,35 +32,44 @@ grid-template-areas: "a b b"
 /* グローバル値 */
 grid-template-areas: inherit;
 grid-template-areas: initial;
+grid-template-areas: revert;
 grid-template-areas: unset;
-
+``` -

値

+### 値 -
-
none
-
グリッドコンテナーは名前付きのグリッド領域を定義しません。
-
{{cssxref("<string>")}}+
-
リストのすべての文字列ごとに行が生成され、文字列内の各セルごとに列が生成されます。行内および列間の複数の名前付きセルトークンは、対応するグリッドセルにまたがる単一の名前付きグリッド領域を生成します。これらのセルが四角形を形成しない限り、宣言は無効です。
+- `none` + - : グリッドコンテナーは名前付きのグリッド領域を定義しません。 +- `{{cssxref("<string>")}}+` + - : リストのすべての文字列ごとに行が生成され、文字列内の各セルごとに列が生成されます。行の中や行をまたがって複数の名前付きセルトークンがあると、対応するグリッドセルにまたがる単一の名前付きグリッド領域を生成します。これらのセルが四角形を形成しない限り、宣言は無効です。 -

正式な構文

+## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -

例

+## 例 + +### 名前付きグリッド領域の指定 -

HTML

+#### HTML -
<section id="page">
-  <header>Header</header>
-  <nav>Navigation</nav>
-  <main>Main area</main>
-  <footer>Footer</footer>
-</section>
+```html +
+
ヘッダー
+ +
メイン領域
+
フッター
+
+``` -

CSS

+#### CSS -
#page {
+```css
+#page {
   display: grid;
   width: 100%;
   height: 250px;
@@ -68,116 +80,41 @@ grid-template-areas: unset;
   grid-template-columns: 150px 1fr;
 }
 
-#page > header {
+#page > header {
   grid-area: head;
   background-color: #8ca0ff;
 }
 
-#page > nav {
+#page > nav {
   grid-area: nav;
   background-color: #ffa08c;
 }
 
-#page > main {
+#page > main {
   grid-area: main;
   background-color: #ffff64;
 }
 
-#page > footer {
+#page > footer {
   grid-area: foot;
   background-color: #8cffa0;
 }
-
- -

描画結果

- -

{{EmbedLiveSample("Example", "100%", "250px")}}

- -

仕様

- - - - - - - - - - - - - - - - -
仕様書策定状況備考
{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}{{Spec2("CSS3 Grid")}}初期定義。
- -

{{cssinfo}}

- -

ブラウザーの実装状況

- -

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

- -

関連情報

- -
    -
  • 関連する CSS プロパティ: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}
    • -
  • グリッドレイアウトガイド: Grid template areas
    • -
  • 動画チュートリアル: Grid Template Areas
    • -
- -
+``` + +#### 結果 + +{{EmbedLiveSample("Specifying_named_grid_areas", "100%", "250px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}} +- グリッドレイアウトガイド: [グリッドテンプレート領域](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas) +- 動画チュートリアル: [Grid Template Areas](https://gridbyexample.com/video/grid-template-areas/) diff --git a/files/ja/web/css/grid-template-columns/index.md b/files/ja/web/css/grid-template-columns/index.md index d78dc58147..75db421bed 100644 --- a/files/ja/web/css/grid-template-columns/index.md +++ b/files/ja/web/css/grid-template-columns/index.md @@ -56,13 +56,13 @@ grid-template-columns: unset; - `[線名]` - : [``](/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` の単位の付いた負の数ではない距離で、トラックのフレックス係数を指定します。 `` の寸法のトラックは、残りの空間をフレックス係数の割合に比例して共有します。 + - : `fr` の単位の付いた負の数ではない値で、トラックのフレックス係数を指定します。 `` の寸法のトラックは、残りの空間をフレックス係数の割合に比例して分け合います。 `minmax()` 表記の外に現れた場合は、最小値が自動として扱われます (つまり `minmax(auto, )`)。 diff --git a/files/ja/web/css/grid-template-rows/index.md b/files/ja/web/css/grid-template-rows/index.md new file mode 100644 index 0000000000..6fa2561497 --- /dev/null +++ b/files/ja/web/css/grid-template-rows/index.md @@ -0,0 +1,156 @@ +--- +title: grid-template-rows +slug: Web/CSS/grid-template-rows +tags: + - CSS + - CSS グリッド + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.grid-template-rows +translation_of: Web/CSS/grid-template-rows +--- +{{CSSRef}} + +**`grid-template-rows`** は CSS のプロパティで、{{glossary("grid rows", "グリッド行")}}の線名とトラックのサイズ変更機能を定義します。 + +{{EmbedInteractiveExample("pages/css/grid-template-rows.html")}} + +## 構文 + +```css +/* キーワード値 */ +grid-template-rows: none; + +/* 値 */ +grid-template-rows: 100px 1fr; +grid-template-rows: [linename] 100px; +grid-template-rows: [linename1] 100px [linename2 linename3]; +grid-template-rows: minmax(100px, 1fr); +grid-template-rows: fit-content(40%); +grid-template-rows: repeat(3, 200px); +grid-template-rows: subgrid; +grid-template-rows: masonry; + +/* 値 */ +grid-template-rows: 200px repeat(auto-fill, 100px) 300px; +grid-template-rows: minmax(100px, max-content) + repeat(auto-fill, 200px) 20%; +grid-template-rows: [linename1] 100px [linename2] + repeat(auto-fit, [linename3 linename4] 300px) + 100px; +grid-template-rows: [linename1 linename2] 100px + repeat(auto-fit, [linename1] 300px) [linename3]; + +/* グローバル値 */ +grid-template-rows: inherit; +grid-template-rows: initial; +grid-template-rows: revert; +grid-template-rows: unset; +``` + +このプロパティは以下のように指定することができます。 + +- キーワード値 `none` +- `` 値 +- `` 値のいずれか + +### 値 + +- `none` + - : 明示的なグリッドがないことを示すキーワードです。どの列も暗黙的に生成され、それらのサイズは {{cssxref("grid-auto-rows")}} プロパティによって決定されます。 +- `[線名]` + - : [``](/ja/docs/Web/CSS/custom-ident) で、その位置にある線の名称を指定します。識別子には、予約語の `span` と `auto` 以外の有効な文字列を指定してください。行は、`[line-name-a line-name-b]`のように、角括弧内のスペースで区切られた複数の名前を持つことができます。 +- {{cssxref("<length>")}} + - : 負の値ではない長さで、列の幅を指定します。 +- {{cssxref("<percentage>")}} + - : グリッドコンテナーのブロック方向の寸法に対する相対値で、負ではない {{cssxref("percentage", "<percentage>")}} です。グリッドコンテナーの寸法がトラックの寸法に依存する場合は、パーセント値を `auto` として扱う必要があります。 + トラックの内在的なサイズの寄与によって、グリッドコンテナーの寸法に合わせられ、パーセント値を尊重した結果、最小の大きさによってトラックの最終的な寸法を増加させる可能性があります。 +- {{cssxref("<flex_value>","<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}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### グリッド行の寸法の指定 + +#### HTML + +```html +
+
A
+
B
+
+``` + +#### CSS + +```css +#grid { + display: grid; + height: 100px; + grid-template-rows: 30px 1fr; +} + +#areaA { + background-color: lime; +} + +#areaB { + background-color: yellow; +} +``` + +#### 結果 + +{{EmbedLiveSample("Specifying_grid_row_sizes", "40px", "100px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-template-columns")}}, {{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) diff --git a/files/ja/web/css/grid-template/index.md b/files/ja/web/css/grid-template/index.md index c80fd2a006..24e000a2cb 100644 --- a/files/ja/web/css/grid-template/index.md +++ b/files/ja/web/css/grid-template/index.md @@ -3,25 +3,31 @@ title: grid-template slug: Web/CSS/grid-template tags: - CSS - - CSS Grid - - CSS Property - - Reference + - CSS グリッド + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.grid-template translation_of: Web/CSS/grid-template --- -

grid-template CSS プロパティは、{{glossary("grid column", "grid columns")}} および {{glossary("grid rows", "rows")}}、{{glossary("grid areas", "areas")}} を定義するための 短縮 プロパティです。

+{{CSSRef}} -
{{EmbedInteractiveExample("pages/css/grid-template.html")}}
+**`grid-template`** は CSS のプロパティで、[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティとして {{glossary("grid column", "grid columns")}}、{{glossary("grid rows", "rows")}}、{{glossary("grid areas", "areas")}} を定義します。 +{{EmbedInteractiveExample("pages/css/grid-template.html")}} +## 構成要素のプロパティ +このプロパティは以下の CSS プロパティの一括指定です。 +- [`grid-template-areas`](/ja/docs/Web/CSS/grid-template-areas) +- [`grid-template-columns`](/ja/docs/Web/CSS/grid-template-columns) +- [`grid-template-rows`](/ja/docs/Web/CSS/grid-template-rows) -

作者は、次の個別のプロパティの値で設定することもできます: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}

+## 構文 -

構文

- - -
/* キーワード値 */
+```css
+/* キーワード値 */
 grid-template: none;
 
 /* grid-template-rows / grid-template-columns の値 */
@@ -42,34 +48,41 @@ grid-template: [header-top] "a a a"     [header-bottom]
 /* グローバル値 */
 grid-template: inherit;
 grid-template: initial;
+grid-template: revert;
 grid-template: unset;
-
+``` + +### 値 -

値

+- `none` + - : 3 個すべてのプロパティの値に `none` を設定するキーワードで、こ明示的なグリッドがないことを意味します。名前付きグリッド領域はありません。行と列は暗黙的に生成されます。これらのサイズは {{cssxref("grid-auto-rows")}} および {{cssxref("grid-auto-columns")}} プロパティによって決定されます。 +- `<'grid-template-rows'> / <'grid-template-columns'>` + - : {{cssxref("grid-template-rows")}} および {{cssxref("grid-template-columns")}} に特定の値を設定し、{{cssxref("grid-template-areas")}} の値に `none` を設定します。 +- `[ ? ? ? ]+ [ / ]?` -
-
none
-
3 個すべてのプロパティの値に none を設定します。これは明示的なグリッドが無いことを意味します。名前付きグリッド領域はありません。行と列は暗黙的に生成されます。これらのサイズは {{cssxref("grid-auto-rows")}} および {{cssxref("grid-auto-columns")}} プロパティによって決定されます。
-
<'grid-template-rows'> / <'grid-template-columns'>
-
{{cssxref("grid-template-rows")}} および {{cssxref("grid-template-columns")}} に特定の値を設定し、{{cssxref("grid-template-areas")}} の値に none を設定します。
-
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
-
{{cssxref("grid-template-areas")}} にリストの文字列を設定し、{{cssxref("grid-template-rows")}} にリストの各文字列に従ったトラックサイズを設定します (サイズ指定の足りない部分には auto が設定されます)。さらに、各サイズの前後で定義された名前付きラインをつなぎ、{{cssxref("grid-template-columns")}} にトラックリストのスラッシュ記号の後で指定されたサイズを設定します (指定されていない場合は none が設定されます)。
+ - : {{cssxref("grid-template-areas")}} にリストの文字列を設定し、{{cssxref("grid-template-rows")}} にリストの各文字列に従ったトラックサイズを設定します (サイズ指定の足りない部分には `auto` が設定されます)。さらに、各サイズの前後で定義された名前付き線をつなぎ、{{cssxref("grid-template-columns")}} にトラックリストのスラッシュ記号の後で指定されたサイズを設定します (指定されていない場合は `none` が設定されます)。 -

注記: これらのトラックリストに {{cssxref("repeat")}} 関数を使うことはできません。トラックは “ASCII アート” 内の行列と一対一の関係で視覚的に並んでいるためです。

+ > **Note:** これらのトラックリストに {{cssxref("repeat()")}} 関数を使うことはできません。トラックは “ASCII アート” 内の行列と一対一の関係で視覚的に並んでいるためです。
-
-

注記: {{cssxref("grid")}} 短縮プロパティは同じ構文を受け入れますが、暗黙的な grid プロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、(grid-template とは対照的に、) grid を使用してください。

+> **Note:** {{cssxref("grid")}} 一括指定プロパティは同じ構文を受け入れますが、暗黙的なグリッドプロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、(`grid-template` ではなく) `grid` を使用してください。 + +## 公式定義 + +{{cssinfo}} -

正式な構文

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

例

+## 例 -

CSS

+### グリッドテンプレートの定義 -
#page {
+#### CSS
+
+```css
+#page {
   display: grid;
   width: 100%;
   height: 200px;
@@ -96,114 +109,36 @@ main {
 
 footer {
   background-color: red;
-  grid-column: foot;
-}
- -

HTML

- -
<section id="page">
-  <header>Header</header>
-  <nav>Navigation</nav>
-  <main>Main area</main>
-  <footer>Footer</footer>
-</section>
- -

描画結果

- -

{{EmbedLiveSample("Examples", "100%", "200px")}}

- -

仕様

- - - - - - - - - - - - - - - - -
仕様書策定状況備考
{{SpecName("CSS3 Grid", "#propdef-grid-template", "grid-template")}}{{Spec2("CSS3 Grid")}}初期定義
- -

{{cssinfo}}

- -

ブラウザーの実装状況

- -

- - - -

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

- -

- -

関連情報

- - - -