diff options
Diffstat (limited to 'files/ja')
24 files changed, 2153 insertions, 966 deletions
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; ## 例 -<h3 id="Flex_layout">フレックスレイアウト</h3> +### フレックスレイアウト #### HTML @@ -94,7 +94,7 @@ column-gap: unset; {{EmbedLiveSample("Flex_layout", "auto", "120px")}} -<h3 id="Grid_layout">グリッドレイアウト</h3> +### グリッドレイアウト #### HTML @@ -127,7 +127,7 @@ column-gap: unset; {{EmbedLiveSample("Grid_layout", "auto", "120px")}} -<h3 id="Multi-column_layout">段組みレイアウト</h3> +### 段組みレイアウト #### 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 <div id="container"> - <div>Item as wide as the content.</div> + Item as wide as the content. <div> Item with more text in it. Because the contents of it are wider than the maximum width, it is clamped at 300 pixels. </div> - <div>Flexible item</div> + Flexible item </div> ``` 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; ## 例 -<h3 id="Flex_layout">フレックスレイアウト</h3> +### フレックスレイアウト #### HTML @@ -113,7 +113,7 @@ gap: unset; {{EmbedLiveSample("Flex_layout", "auto", "120px")}} -<h3 id="Grid_layout">グリッドレイアウト</h3> +### グリッドレイアウト #### HTML @@ -151,7 +151,7 @@ gap: unset; {{EmbedLiveSample("Grid_layout", "auto", "120px")}} -<h3 id="Multi-column_layout">段組みレイアウト</h3> +### 段組みレイアウト #### 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-line>` が指定された場合、 `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` はその `<custom-ident>` に設定されます。それ以外の場合は `auto` に設定されます。 + +`grid-row-end` が省略された場合、 `grid-row-start` が `<custom-ident>` であれば、 `grid-row-end` はその `<custom-ident>` に設定されます。それ以外の場合は `auto` に設定されます。 + +`grid-column-start` が省略された場合、 `grid-row-start` が `<custom-ident>` であれば、 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; + +/* <custom-ident> 値 */ +grid-area: some-grid-area; +grid-area: some-grid-area / another-grid-area; + +/* <integer> && <custom-ident>? 値 */ +grid-area: 4 some-grid-area; +grid-area: 4 some-grid-area / 2 another-grid-area; + +/* span && [ <integer> || <custom-ident> ] 値 */ +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` とするためのキーワードです。 +- `<custom-ident>` + + - : `<custom-ident>-start`/`<custom-ident>-end` という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 + + > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-area: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。 + + そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。 + +- `<integer> && <custom-ident>?` + + - : *n* 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 + + 名前が {{cssxref("<custom-ident>")}} として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 + + `0` の {{cssxref("<integer>")}} 値は無効です。 + +- `span && [ <integer> || <custom-ident> ]` + + - : グリッドアイテムのグリッド領域の列側の先頭の端が末尾の端から _n_ 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + + 名前が {{cssxref("<custom-ident>")}} として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + + {{cssxref("<integer>")}} が省略された場合の既定値は `1` です。負の数や 0 は無効です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### グリッド領域の設定 + +#### HTML + +```html +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> +</div> +``` + +#### 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; + +/* <length> 値 */ +grid-auto-columns: 100px; +grid-auto-columns: 20cm; +grid-auto-columns: 50vmax; + +/* <percentage> 値 */ +grid-auto-columns: 10%; +grid-auto-columns: 33.3%; + +/* <flex> 値 */ +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` の単位の付いた負の数ではない値で、トラックのフレックス係数を指定します。 `<flex>` の寸法のトラックは、残りの空間をフレックス係数の割合に比例して分け合います。 + + `minmax()` 表記の外に現れた場合は、最小値が自動として扱われます (つまり `minmax(auto, <flex>)`)。 + +- {{cssxref("max-content")}} + - : グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。 +- {{cssxref("min-content")}} + - : グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。 +- {{cssxref("minmax()", "minmax(min, max)")}} + - : _min_ 以上、_max_ 以下の寸法の範囲を定義する関数記法です。 _max_ が _min_ より小さい場合は、 _max_ は無視され、 _min_ として扱われます。`<flex>` の値は、最大値として、トラックのフレックス係数を設定します。最小値としては、ゼロ（または、グリッドコンテナーの寸法が最小コンテンツの制約を受けている場合は、最小コンテンツ）として扱われます。 +- {{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 +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> +</div> +``` + +#### 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 +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> + <div id="item4"></div> + <div id="item5"></div> +</div> +<select id="direction"> + <option value="column">column</option> + <option value="row">row</option> +</select> +<input id="dense" type="checkbox"> +<label for="dense">dense</label> +``` + +#### 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; + +/* <length> 値 */ +grid-auto-rows: 100px; +grid-auto-rows: 20cm; +grid-auto-rows: 50vmax; + +/* <percentage> 値 */ +grid-auto-rows: 10%; +grid-auto-rows: 33.3%; + +/* <flex> 値 */ +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` の単位の付いた負の数ではない値で、トラックのフレックス係数を指定します。 `<flex>` の寸法のトラックは、残りの空間をフレックス係数の割合に比例して分け合います。 + + `minmax()` 表記の外に現れた場合は、最小値が自動として扱われます (つまり `minmax(auto, <flex>)`)。 + +- {{cssxref("max-content")}} + - : グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。 +- {{cssxref("min-content")}} + - : グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。 +- {{cssxref("minmax()", "minmax(min, max)")}} + - : _min_ 以上、_max_ 以下の寸法の範囲を定義する関数記法です。 _max_ が _min_ より小さい場合は、 _max_ は無視され、 _min_ として扱われます。`<flex>` の値は、最大値として、トラックのフレックス係数を設定します。最小値としては、ゼロ（または、グリッドコンテナーの寸法が最小コンテンツの制約を受けている場合は、最小コンテンツ）として扱われます。 +- {{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 +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> +</div> +``` + +#### 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; + +/* <custom-ident> 値 */ +grid-column-end: somegridarea; + +/* <integer> + <custom-ident> 値 */ +grid-column-end: 2; +grid-column-end: somegridarea 4; + +/* span + <integer> + <custom-ident> 値 */ +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` とするためのキーワードです。 +- `<custom-ident>` + + - : `<custom-ident>-end` という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。 + + > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-column-end: foo;` と指定すると名前付きグリッド領域の末尾側の端を選択します (その前に `foo-end` という名前の線が明示的に存在しない限り)。 + + そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。 + +- `<integer> && <custom-ident>?` + + - : n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 + + 名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 + + `0` の {{cssxref("integer")}} 値は無効です。 + +- `span && [ <integer> || <custom-ident> ]` + + - : グリッドアイテムのグリッド領域の列の末尾の端が先頭の端から n 本になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + + 名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + + \<integer> が省略された場合の既定値は `1` です。負の数や `0` は無効です。 + + `<custom-ident>` は `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> +``` + +#### 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 --- -<p><span class="seoSummary"><strong><code>grid-column-start</code></strong> は CSS のプロパティで、グリッドの配置に線または区間を使用したり、使用しなかったりして (自動)、グリッド列内のグリッドアイテムの開始位置を指定します。この開始位置は、{{Glossary("grid areas", "グリッド領域")}}の行の開始の端を指定します。</span></p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/grid-column-start.html")}}</div> +**`grid-column-start`** は CSS のプロパティで、グリッドの配置に線または区間を使用したり、使用しなかったりして (自動)、グリッド列内のグリッドアイテムの先頭位置を指定します。この開始位置は、{{Glossary("grid areas", "グリッド領域")}}のブロックの開始側の端を指定します。 -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +{{EmbedInteractiveExample("pages/css/grid-column-start.html")}} -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush:css no-line-numbers notranslat notranslate">/* キーワード値 */ +```css +/* キーワード値 */ grid-column-start: auto; -/* <custom-ident> 値 */ +/* <custom-ident> 値 */ grid-column-start: somegridarea; -/* <integer> + <custom-ident> 値 */ +/* <integer> + <custom-ident> 値 */ grid-column-start: 2; grid-column-start: somegridarea 4; -/* span + <integer> + <custom-ident> 値 */ +/* span + <integer> + <custom-ident> 値 */ 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; -</pre> +``` -<p>このプロパティは単一の <code><grid-line></code> 値で指定します。 <code><grid-line></code> 値は次のように指定します。</p> +このプロパティは単一の `<grid-line>` 値で指定します。 `<grid-line>` 値は次のように指定します。 -<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> +- `auto` キーワード +- `<custom-ident>` 値 +- `<integer>` 値 +- `<custom-ident>` および `<integer>` を空白で区切ったもの +- `span` キーワードと `<custom-ident>` または `<integer>` またはその両方。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>auto</code></dt> - <dd>プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の <code>1</code> とするためのキーワードです。</dd> - <dt><code><custom-ident></code></dt> - <dd><code><custom-ident>-start</code> という名前の付いた線がある場合、これはそのような線の最初がグリッアイテムの配置に関わります。 - <p class="note"><strong>メモ:</strong> 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 <code>grid-column-start: foo;</code> と指定すると名前付きグリッド領域の先頭側の端を選択します (その前に <code>foo-start</code> という名前の線が明示的に存在しない限り)。</p> +- `auto` + - : プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の `1` とするためのキーワードです。 +- `<custom-ident>` - <p>そうでなければ、これは <code><custom-ident></code> に沿って整数の <code>1</code> が指定されたものとして扱われます。</p> - </dd> - <dt><code><integer> && <custom-ident>?</code></dt> - <dd>n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 - <p>名前が <code><custom-ident></code> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。</p> + - : `<custom-ident>-start` という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。 - <p><code>0</code> の {{cssxref("integer")}} 値は無効です。</p> - </dd> - <dt><code>span && [ <integer> || <custom-ident> ]</code></dt> - <dd>グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 - <p>名前が <code><custom-ident></code> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。</p> + > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-column-start: foo;` と指定すると名前付きグリッド領域の先頭側の端を選択します (その前に `foo-start` という名前の線が明示的に存在しない限り)。 - <p>the <integer> が省略された場合の既定値は <code>1</code> です。負の数や <code>0</code> は無効です。</p> + そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。 - <p><code><custom-ident></code> は <code>span</code> の値を取ることができません。</p> - </dd> -</dl> +- `<integer> && <custom-ident>?` -<h2 id="Formal_definition" name="Formal_definition">公式定義</h2> + - : n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 -<p>{{cssinfo}}</p> + 名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 -<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2> + `0` の {{cssxref("integer")}} 値は無効です。 + +- `span && [ <integer> || <custom-ident> ]` + + - : グリッドアイテムのグリッド領域の列の先頭の端が末尾の端から n 本になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + + 名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + + \<integer> が省略された場合の既定値は `1` です。負の数や `0` は無効です。 + + `<custom-ident>` は `span` の値を取ることができません。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Setting_column_start_for_a_grid_item" name="Setting_column_start_for_a_grid_item">グリッドアイテムの列の開始位置の設定</h3> +### グリッドアイテムの列の開始位置の設定 -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html notranslate"><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> -</pre> +```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> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css notranslate">.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; } -</pre> +``` -<div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +```css hidden +* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -129,7 +135,7 @@ grid-column-start: unset; background-color: #fff4e6; } -.wrapper > div { +.wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; @@ -143,96 +149,22 @@ grid-column-start: unset; background-color: #fff9db; padding: 1em; } -</pre> -</div> +``` + +#### 結果 + +{{ EmbedLiveSample('Setting_column_start_for_a_grid_item', '230', '420') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -<h4 id="Result" name="Result">結果</h4> - -<p>{{ EmbedLiveSample('Setting_column_start_for_a_grid_item', '230', '420') }}</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-start", "grid-column-start")}}</td> - <td>{{Spec2("CSS3 Grid")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.grid-column-start")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>関連する CSS プロパティ: {{cssxref("grid-column-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-row")}}</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> +- 関連する 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 --- -<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> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/grid-column.html")}}</div> +**`grid-column`** は CSS の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、{{glossary("grid column", "グリッド列")}}の中におけるグリッドアイテムの寸法と位置を指定し、線、区間、なし (自動) をグリッド配置に適用することで、{{Glossary("grid areas", "グリッド領域")}}の行の先頭と末尾の端を指定します。 -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +{{EmbedInteractiveExample("pages/css/grid-column.html")}} -<h2 id="Syntax" name="Syntax">構文</h2> +## 構成要素のプロパティ -<p>このプロパティは一つまたは二つの <code><grid-line></code> の値で指定します。</p> +このプロパティは以下の CSS プロパティの一括指定です。 -<p>二つの <code><grid-line></code> 値を指定する場合は、 "/" で区切ります。個別指定の <code>grid-column-start</code> はスラッシュの前に設定し、個別指定の <code>grid-column-end</code> はスラッシュの後に設定します。</p> +- [`grid-column-end`](/ja/docs/Web/CSS/grid-column-end) +- [`grid-column-start`](/ja/docs/Web/CSS/grid-column-start) -<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> +```css +grid-column: auto; -<h3 id="Values" name="Values">値</h3> +/* 線番号による */ +grid-column: 1; +grid-column: 1 / 3; +grid-column: 1 / span 2; -<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> +/* 線の名称による */ +grid-column: main-start; +grid-column: main-start / main-end; - <p>そうでなければ、これは <code><custom-ident></code> に沿って整数の <code>1</code> が指定されたものとして扱われます。</p> - </dd> - <dt><code><integer> && <custom-ident>?</code></dt> - <dd>n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 - <p>名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。</p> +/* グローバル値 */ +grid-column: inherit; +grid-column: initial; +grid-column: revert; +grid-column: unset; +``` - <p><code>0</code> の {{cssxref("integer")}} 値は無効です。</p> - </dd> - <dt><code>span && [ <integer> || <custom-ident> ]</code></dt> - <dd>グリッドアイテムのグリッド領域の列開始の端が終了の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 - <p>名前が <custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分にない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。</p> +このプロパティは 1 つまたは 2 つの `<grid-line>` の値で指定します。 - <p>the <integer> が省略された場合の既定値は <code>1</code> です。負の数や0は無効です。</p> - </dd> -</dl> +2 つの `<grid-line>` 値を指定する場合は、 "/" で区切ります。個別指定の `grid-column-start` はスラッシュの前に設定し、個別指定の `grid-column-end` はスラッシュの後に設定します。 -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +それぞれの `<grid-line>` の値は以下の何れかを指定することができます。 + +- `auto` キーワード +- `<custom-ident>` 値 +- `<integer>` 値 +- `<custom-ident>` および `<integer>` を空白で区切ったもの +- `span` キーワードと `<custom-ident>` または `<integer>` またはその両方。 + +### 値 + +- `auto` + - : プロパティをグリッドアイテムの配置に影響させず、自動的に配置するか、間隔を自動的に取るか、既定の `1` とするためのキーワードです。 +- `<custom-ident>` + + - : `<custom-ident>-start`/`<custom-ident>-end` という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 + + > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-column: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。 + + そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。 + +- `<integer> && <custom-ident>?` + + - : n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 + + 名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 + + `0` の {{cssxref("integer")}} 値は無効です。 + +- `span && [ <integer> || <custom-ident> ]` + + - : グリッドアイテムのグリッド領域の列側の先頭の端が末尾の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + + 名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + + `<integer>` が省略された場合の既定値は `1` です。負の数や 0 は無効です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +### グリッド列の寸法と位置の設定 -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><div id="grid"> - <div id="item1"></div> - <div id="item2"></div> - <div id="item3"></div> -</div></pre> +```html +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> +</div> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush: css; highlight[14,19]">#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; } -</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> +``` + +#### 結果 + +{{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; + +/* <custom-ident> 値 */ +grid-row-end: somegridarea; + +/* <integer> + <custom-ident> 値 */ +grid-row-end: 2; +grid-row-end: somegridarea 4; + +/* span + <integer> + <custom-ident> 値 */ +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` とするためのキーワードです。 +- `<custom-ident>` + + - : `<custom-ident>-end` という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。 + + > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row-end: foo;` と指定すると名前付きグリッド領域の末尾側の端を選択します (その前に `foo-end` という名前の線が明示的に存在しない限り)。 + + そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。 + + `<custom-ident>` は `span` の値を取ることができません。 + +- `<integer> && <custom-ident>?` + + - : n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 + + 名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 + + `0` の {{cssxref("integer")}} 値は無効です。 + +- `span && [ <integer> || <custom-ident> ]` + + - : グリッドアイテムのグリッド領域の行の末尾の端が先頭の端から n 本になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + + 名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + + \<integer> が省略された場合の既定値は `1` です。負の数や `0` は無効です。 + +## 公式定義 + +{{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> +``` + +#### 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; + +/* <custom-ident> 値 */ +grid-row-start: somegridarea; + +/* <integer> + <custom-ident> 値 */ +grid-row-start: 2; +grid-row-start: somegridarea 4; + +/* span + <integer> + <custom-ident> 値 */ +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; +``` + +このプロパティは単一の `<grid-line>` 値で指定します。 `<grid-line>` 値は次のように指定します。 + +- `auto` キーワード +- `<custom-ident>` 値 +- `<integer>` 値 +- `<custom-ident>` および `<integer>` を空白で区切ったもの +- `span` キーワードと `<custom-ident>` または `<integer>` またはその両方。 + +### 値 + +- `auto` + - : プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の `1` とするためのキーワードです。 +- `<custom-ident>` + + - : `<custom-ident>-start` という名前の付いた線がある場合、これはそのような線の先頭がグリッドアイテムの配置に関わります。 + + > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row-start: foo;` と指定すると名前付きグリッド領域の先頭側の端を選択します (その前に `foo-start` という名前の線が明示的に存在しない限り)。 + + そうでなければ、これは `<custom-ident>` に沿って整数の `1` が指定されたものとして扱われます。 + +- `<integer> && <custom-ident>?` + + - : n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 + + 名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 + + `0` の {{cssxref("integer")}} 値は無効です。 + +- `span && [ <integer> || <custom-ident> ]` + + - : グリッドアイテムのグリッド領域の行の先頭の端が終了の端から n 本になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + + 名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + + \<integer> が省略された場合の既定値は `1` です。負の数や `0` は無効です。 + + `<custom-ident>` は `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> +``` + +#### 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-line>` 値が指定された場合は、個別指定の `grid-row-start` はスラッシュの前に設定し、個別指定の `grid-row-end` はスラッシュの後に設定します。 +2 つの `<grid-line>` 値を指定する場合は、個別指定の `grid-row-start` をスラッシュの前に設定し、 `grid-row-end` をスラッシュの後に設定します。 ## 構成要素のプロパティ @@ -61,7 +61,7 @@ grid-row: unset; - : プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の `1` とするためのキーワードです。 - `<custom-ident>` - - : '\<custom-ident>-start'/'\<custom-ident>-end' という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 + - : `<custom-ident>-start`/`<custom-ident>-end` という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。 @@ -71,17 +71,17 @@ grid-row: unset; - : n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 - 名前が \<custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 + 名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 `0` の {{cssxref("integer")}} 値は無効です。 - `span && [ <integer> || <custom-ident> ]` - - : グリッドアイテムのグリッド領域の列先頭の端が末尾の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + - : グリッドアイテムのグリッド領域の列側の先頭の端が末尾の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 - 名前が \<custom-ident> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + 名前が `<custom-ident>` として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 - \<integer> が省略された場合の既定値は `1` です。負の数や 0 は無効です。 + `<integer>` が省略された場合の既定値は `1` です。負の数や 0 は無効です。 ## 公式定義 @@ -93,7 +93,7 @@ grid-row: unset; ## 例 -<h3 id="Setting_grid_row_size_and_location">グリッド行の寸法と位置の設定</h3> +### グリッド行の寸法と位置の設定 #### 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 --- -<p><strong><code>grid-template-areas</code></strong> CSS プロパティは、名前付きの {{glossary("grid areas", "グリッド領域")}} を指定します。</p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}</div> +**`grid-template-areas`** は CSS のプロパティで、グリッド内でセルを確立し、名前を割り当てることにより、名前付きの {{glossary("grid areas", "グリッド領域")}} を指定します。 -<p class="hidden">この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}} -<p>これらの領域は特定のグリッドアイテムに関連付けられていませんが、グリッド配置プロパティである {{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")}} から参照できます。</p> +これらの領域は、特定のグリッドアイテムに関連付けられていませんが、グリッド配置プロパティである {{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")}} で参照することができます。 -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers">/* キーワード値 */ +```css +/* キーワード値 */ grid-template-areas: none; -/* <string> 値 */ +/* <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; -</pre> +``` -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt><code>none</code></dt> - <dd>グリッドコンテナーは名前付きのグリッド領域を定義しません。</dd> - <dt><code>{{cssxref("<string>")}}+</code></dt> - <dd>リストのすべての文字列ごとに行が生成され、文字列内の各セルごとに列が生成されます。行内および列間の複数の名前付きセルトークンは、対応するグリッドセルにまたがる単一の名前付きグリッド領域を生成します。これらのセルが四角形を形成しない限り、宣言は無効です。</dd> +- `none` + - : グリッドコンテナーは名前付きのグリッド領域を定義しません。 +- `{{cssxref("<string>")}}+` + - : リストのすべての文字列ごとに行が生成され、文字列内の各セルごとに列が生成されます。行の中や行をまたがって複数の名前付きセルトークンがあると、対応するグリッドセルにまたがる単一の名前付きグリッド領域を生成します。これらのセルが四角形を形成しない限り、宣言は無効です。 -<h3 id="Formal_syntax" name="Formal_syntax">正式な構文</h3> +## 公式定義 + +{{cssinfo}} + +## 形式文法 {{csssyntax}} -<h2 id="Example" name="Example">例</h2> +## 例 + +### 名前付きグリッド領域の指定 -<h3 id="HTML">HTML</h3> +#### HTML -<pre class="brush: html"><section id="page"> - <header>Header</header> - <nav>Navigation</nav> - <main>Main area</main> - <footer>Footer</footer> -</section></pre> +```html +<section id="page"> + <header>ヘッダー</header> + <nav>ナビゲーション</nav> + <main>メイン領域</main> + <footer>フッター</footer> +</section> +``` -<h3 id="CSS">CSS</h3> +#### CSS -<pre class="brush:css; highlight[5-7]">#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; } -</pre> - -<h3 id="Result" name="Result">描画結果</h3> - -<p><em>{{EmbedLiveSample("Example", "100%", "250px")}}</em></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-template-areas", "grid-template-areas")}}</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-template-areas")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>関連する CSS プロパティ: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}</li> - <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></em></li> - <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</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">グリッドレイアウトの自動配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">グリッドレイアウトのボックス配置</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">グリッド、論理値、書字方向</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/Realizing_common_layouts_using_CSS_Grid_Layout">グリッドを使ったよくあるレイアウトの実現</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></dl> +``` + +#### 結果 + +{{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; - `[線名]` - : [`<custom-ident>`](/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` の単位の付いた負の数ではない距離で、トラックのフレックス係数を指定します。 `<flex>` の寸法のトラックは、残りの空間をフレックス係数の割合に比例して共有します。 + - : `fr` の単位の付いた負の数ではない値で、トラックのフレックス係数を指定します。 `<flex>` の寸法のトラックは、残りの空間をフレックス係数の割合に比例して分け合います。 `minmax()` 表記の外に現れた場合は、最小値が自動として扱われます (つまり `minmax(auto, <flex>)`)。 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; + +/* <track-list> 値 */ +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; + +/* <auto-track-list> 値 */ +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` +- `<track-list>` 値 +- `<auto-track-list>` 値のいずれか + +### 値 + +- `none` + - : 明示的なグリッドがないことを示すキーワードです。どの列も暗黙的に生成され、それらのサイズは {{cssxref("grid-auto-rows")}} プロパティによって決定されます。 +- `[線名]` + - : [`<custom-ident>`](/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` の単位の付いた負の数ではない距離で、トラックのフレックス係数を指定します。 `<flex>` の寸法のトラックは、残りの空間をフレックス係数の割合に比例して共有します。 `minmax()` 表記の外に現れた場合は、最小値が自動として扱われます (つまり `minmax(auto, <flex>)`)。 +- {{cssxref("max-content")}} + - : グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最大値を表すキーワードです。 +- {{cssxref("min-content")}} + - : グリッドトラックを占有しているグリッドアイテムの中で、コンテンツ貢献度の最小値を表すキーワードです。 +- {{cssxref("minmax()", "minmax(min, max)")}} + - : _min_ 以上、 _max_ 以下の寸法の範囲を定義する関数表記法です。 _max_ が _min_ より小さい場合、 _max_ は無視され、関数は _min_ として扱われます。最大値として、 `<flex>` 値はトラックのフレックス係数を設定します。最小値としては無効です。 +- `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 +<div id="grid"> + <div id="areaA">A</div> + <div id="areaB">B</div> +</div> +``` + +#### 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 --- -<p><strong><code>grid-template</code></strong> CSS プロパティは、{{glossary("grid column", "grid columns")}} および {{glossary("grid rows", "rows")}}、{{glossary("grid areas", "areas")}} を定義するための <a href="/ja/docs/Web/CSS/Shorthand_properties">短縮</a> プロパティです。</p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/grid-template.html")}}</div> +**`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) -<p>作者は、次の個別のプロパティの値で設定することもできます: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> - - -<pre class="brush: css no-line-numbers">/* キーワード値 */ +```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; -</pre> +``` + +### 値 -<h3 id="Values" name="Values">値</h3> +- `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> ]?` -<dl> - <dt><code>none</code></dt> - <dd>3 個すべてのプロパティの値に <code>none</code> を設定します。これは明示的なグリッドが無いことを意味します。名前付きグリッド領域はありません。行と列は暗黙的に生成されます。これらのサイズは {{cssxref("grid-auto-rows")}} および {{cssxref("grid-auto-columns")}} プロパティによって決定されます。</dd> - <dt><code><'grid-template-rows'> / <'grid-template-columns'></code></dt> - <dd>{{cssxref("grid-template-rows")}} および {{cssxref("grid-template-columns")}} に特定の値を設定し、{{cssxref("grid-template-areas")}} の値に <code>none</code> を設定します。</dd> - <dt><code>[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?</code></dt> - <dd>{{cssxref("grid-template-areas")}} にリストの文字列を設定し、{{cssxref("grid-template-rows")}} にリストの各文字列に従ったトラックサイズを設定します (サイズ指定の足りない部分には <code>auto</code> が設定されます)。さらに、各サイズの前後で定義された名前付きラインをつなぎ、{{cssxref("grid-template-columns")}} にトラックリストのスラッシュ記号の後で指定されたサイズを設定します (指定されていない場合は <code>none</code> が設定されます)。<br> + - : {{cssxref("grid-template-areas")}} にリストの文字列を設定し、{{cssxref("grid-template-rows")}} にリストの各文字列に従ったトラックサイズを設定します (サイズ指定の足りない部分には `auto` が設定されます)。さらに、各サイズの前後で定義された名前付き線をつなぎ、{{cssxref("grid-template-columns")}} にトラックリストのスラッシュ記号の後で指定されたサイズを設定します (指定されていない場合は `none` が設定されます)。 - <p class="note">注記: これらのトラックリストに {{cssxref("repeat")}} 関数を使うことはできません。トラックは “ASCII アート” 内の行列と一対一の関係で視覚的に並んでいるためです。</p> + > **Note:** これらのトラックリストに {{cssxref("repeat()")}} 関数を使うことはできません。トラックは “ASCII アート” 内の行列と一対一の関係で視覚的に並んでいるためです。 </dd> -</dl> -<p class="note"><strong>注記:</strong> {{cssxref("grid")}} 短縮プロパティは同じ構文を受け入れますが、暗黙的な grid プロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、(<code>grid-template</code> とは対照的に、) <code>grid</code> を使用してください。</p> +> **Note:** {{cssxref("grid")}} 一括指定プロパティは同じ構文を受け入れますが、暗黙的なグリッドプロパティをその初期値にリセットしてしまいます。これらの値が別々にカスケードされないようにするには、(`grid-template` ではなく) `grid` を使用してください。 + +## 公式定義 + +{{cssinfo}} -<h3 id="Formal_syntax" name="Formal_syntax">正式な構文</h3> +## 形式文法 {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="CSS">CSS</h3> +### グリッドテンプレートの定義 -<pre class="brush:css; highlight[5-8]">#page { +#### CSS + +```css +#page { display: grid; width: 100%; height: 200px; @@ -96,114 +109,36 @@ main { footer { background-color: red; - grid-column: foot; -}</pre> - -<h3 id="HTML">HTML</h3> - -<pre class="brush:html"><section id="page"> - <header>Header</header> - <nav>Navigation</nav> - <main>Main area</main> - <footer>Footer</footer> -</section></pre> - -<h3 id="Result" name="Result">描画結果</h3> - -<p>{{EmbedLiveSample("Examples", "100%", "200px")}}</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-template", "grid-template")}}</td> - <td>{{Spec2("CSS3 Grid")}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの実装状況</h2> - -<p> </p> - - - -<p>{{Compat("css.properties.grid-template")}}</p> - -<p> </p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>関連する CSS プロパティ: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}</li> - <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li> - <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li> - <li>動画チュートリアル:<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</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">Basics concepts of grid layout</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Relationship to other layout methods</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas">Grid template areas</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines">Layout using named grid lines</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout">Auto-placement in grid layout</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box alignment in grid layout</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Grids, logical values and writing modes</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility">CSS Grid Layout and Accessibility</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS Grid Layout and Progressive Enhancement</a></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_Layout">Realizing common layouts using grids</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">Grid lines</a></li> - <li><a href="/ja/docs/Glossary/Grid_tracks">Grid tracks</a></li> - <li><a href="/ja/docs/Glossary/Grid_cell">Grid cell</a></li> - <li><a href="/ja/docs/Glossary/Grid_areas">Grid areas</a></li> - <li><a href="/ja/docs/Glossary/Gutters">Gutters</a></li> - <li><a href="/ja/docs/Glossary/Grid_rows">Grid row</a></li> - <li><a href="/ja/docs/Glossary/Grid_column">Grid column</a></li> - </ol> - </li> -</ol> + grid-area: foot; +} +``` + +#### HTML + +```html +<section id="page"> + <header>ヘッダー</header> + <nav>ナビゲーション</nav> + <main>メイン領域</main> + <footer>フッター</footer> </section> +``` + +#### 結果 + +{{EmbedLiveSample("Defining_a_grid_template", "100%", "200px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}} +- グリッドレイアウトガイド: [CSS グリッドにおける線に基づく配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) +- グリッドレイアウトガイド: [グリッドテンプレート領域 - グリッド定義の一括指定](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#グリッド定義の一括指定) +- 動画チュートリアル: _[Grid Template shorthand](https://gridbyexample.com/video/grid-template-shorthand/)_ diff --git a/files/ja/web/css/grid/index.md b/files/ja/web/css/grid/index.md index 6b5a8f0d1f..5994d637fa 100644 --- a/files/ja/web/css/grid/index.md +++ b/files/ja/web/css/grid/index.md @@ -5,29 +5,36 @@ tags: - CSS - CSS グリッド - CSS プロパティ - - Reference - - grid - - grid-auto-columns - - grid-auto-flow - - grid-auto-rows - - grid-template-areas - - grid-template-columns - - grid-template-rows + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.grid translation_of: Web/CSS/grid --- -<p>CSS の <strong><code>grid</code></strong> プロパティは<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>プロパティで、明示的なすべてのグリッドプロパティ ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}) と、暗黙のすべてのグリッドプロパティ ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}) を単一の宣言で設定します。</p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/grid.html")}}</div> +**`grid`** は CSS のプロパティで、[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)として明示的・暗黙的なすべてのグリッドプロパティを単一の宣言で設定します。 -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> +`grid` を使用すると、一方の軸を {{cssxref("grid-template-rows")}} または {{cssxref("grid-template-columns")}} を使用して設定し、もう一方の軸でどのように内容物を自動反復させるかを、暗黙のグリッドプロパティである {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}} で設定します。 -<div class="note"> -<p><strong>メモ:</strong> 明示的なグリッドプロパティ、<em>または</em>暗黙のグリッドプロパティのみを単一の <code>grid</code> 宣言で設定することができます。指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、 gutter プロパティはこの一括指定では初期化されません。</p> -</div> +{{EmbedInteractiveExample("pages/css/grid.html")}} + +> **Note:** 指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、溝に関するプロパティはこの一括指定では初期化されません。 + +## 構成要素のプロパティ -<h2 id="Syntax" name="Syntax">構文</h2> +このプロパティは以下の CSS プロパティの一括指定です。 -<pre class="brush: css no-line-numbers">/* <'grid-template'> 値 */ +- [`grid-auto-columns`](/ja/docs/Web/CSS/grid-auto-columns) +- [`grid-auto-flow`](/ja/docs/Web/CSS/grid-auto-flow) +- [`grid-auto-rows`](/ja/docs/Web/CSS/grid-auto-rows) +- [`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) + +## 構文 + +```css +/* <'grid-template'> 値 */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; @@ -36,15 +43,15 @@ grid: "a" minmax(100px, max-content) "b" 20%; grid: 100px / 200px; grid: minmax(400px, min-content) / repeat(auto-fill, 50px); -/* <'grid-template-rows'> / - [ auto-flow && dense? ] <'grid-auto-columns'>? values */ +/* <'grid-template-rows'> / + [ auto-flow && dense? ] <'grid-auto-columns'>? 値 */ grid: 200px / auto-flow; grid: 30% / auto-flow dense; grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px; grid: [line1] minmax(20em, max-content) / auto-flow dense 40%; -/* [ auto-flow && dense? ] <'grid-auto-rows'>? / - <'grid-template-columns'> values */ +/* [ auto-flow && dense? ] <'grid-auto-rows'>? / + <'grid-template-columns'> 値 */ grid: auto-flow / 200px; grid: auto-flow dense / 30%; grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px); @@ -53,145 +60,82 @@ grid: auto-flow dense 40% / [line1] minmax(20em, max-content); /* グローバル値 */ grid: inherit; grid: initial; +grid: revert; grid: unset; -</pre> +``` + +### 値 + +- `<'grid-template'>` + - : {{cssxref("grid-template")}} を定義し、これには {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}} が含まれます。 +- `<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?` + + - : {{cssxref("grid-template-rows")}} プロパティを明示的に設定 (および {{cssxref("grid-template-columns")}} プロパティを `none` に設定) することで行トラックを設定し、 {{cssxref("grid-auto-columns")}} プロパティを設定 (および {{cssxref("grid-auto-rows")}} を `auto` に設定) することで列トラックの自動反復方法を設定します。 `dense` が設定されていれば、 {{cssxref("grid-auto-flow")}} も `column` に設定されます。 + + ほかの `grid` のサブプロパティはすべて、初期値に初期化されます。 + +- `[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>` + + - : {{cssxref("grid-template-columns")}} プロパティを明示的に設定 (および {{cssxref("grid-template-rows")}} プロパティを `none` に設定) することで列トラックを設定し、 {{cssxref("grid-auto-rows")}} プロパティを設定 (および {{cssxref("grid-auto-columns")}} を `auto` に設定) することで行トラックの児童反復方法を設定します。 `dense` が設定されていれば、 {{cssxref("grid-auto-flow")}} も `column` に設定されます。 + + ほかの `grid` のサブプロパティはすべて、初期値に初期化されます。 -<h3 id="Values" name="Values">値</h3> +## 公式定義 -<dl> - <dt><code><'grid-template'></code></dt> - <dd>{{cssxref("grid-template")}} を定義し、これには {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}} が含まれます。</dd> - <dt><code><'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?</code></dt> - <dd>{{cssxref("grid-template-rows")}} プロパティを明示的に設定 (および {{cssxref("grid-template-columns")}} プロパティを <code>none</code> に設定) することで行トラックを設定し、 {{cssxref("grid-auto-columns")}} プロパティを設定 (および {{cssxref("grid-auto-rows")}} を <code>auto</code> に設定) することで列トラックの自動反復方法を設定します。 <code>dense</code> が設定されていれば、 {{cssxref("grid-auto-flow")}} も <code>column</code> に設定されます。 - <p>ほかの <code>grid</code> のサブプロパティはすべて、初期値に初期化されます。</p> - </dd> - <dt><code>[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'></code></dt> - <dd>{{cssxref("grid-template-columns")}} プロパティを明示的に設定 (および {{cssxref("grid-template-rows")}} プロパティを <code>none</code> に設定) することで列トラックを設定し、 {{cssxref("grid-auto-rows")}} プロパティを設定 (および {{cssxref("grid-auto-columns")}} を <code>auto</code> に設定) することで行トラックの児童反復方法を設定します。 <code>dense</code> が設定されていれば、 {{cssxref("grid-auto-flow")}} も <code>column</code> に設定されます。 - <p>ほかの <code>grid</code> のサブプロパティはすべて、初期値に初期化されます。</p> - </dd> -</dl> +{{cssinfo}} -<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="container"> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> - <div></div> -</div></pre> +#### HTML -<h3 id="CSS">CSS</h3> +```html +<div id="container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</div> +``` + +#### CSS -<pre class="brush: css">#container { +```css +#container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } -#container > div { +#container > div { background-color: #8ca0ff; width: 50px; height: 50px; -}</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example", "100%", 150)}}</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", "grid")}}</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")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>関連する CSS プロパティ: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</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="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">グリッドテンプレート領域 - グリッド定義の一括指定</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/Realizing_common_layouts_using_CSS_Grid_Layout">CSS グリッドを利用したよくあるレイアウトの実現</a></li> - </ol> - </li> - <li data-default-state="open"><a href="#"><strong>Properties</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> +} +``` + +#### 結果 + +{{EmbedLiveSample("Creating_a_grid_layout", "100%", 150)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} +- グリッドレイアウトガイド: [CSS グリッドでの行ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) +- グリッドレイアウトガイド: [グリッドテンプレート領域 - グリッド定義の一括指定](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#グリッド定義の一括指定) diff --git a/files/ja/web/css/justify-tracks/index.md b/files/ja/web/css/justify-tracks/index.md new file mode 100644 index 0000000000..45ef89abe5 --- /dev/null +++ b/files/ja/web/css/justify-tracks/index.md @@ -0,0 +1,88 @@ +--- +title: justify-tracks +slug: Web/CSS/justify-tracks +tags: + - CSS + - 実験的 + - プロパティ + - リファレンス + - grid + - justify-tracks + - masonry +browser-compat: css.properties.justify-tracks +translation_of: Web/CSS/justify-tracks +--- +{{CSSRef}} + +{{SeeCompatTable}} + +**`align-tracks`** は CSS のプロパティで、インライン軸が[組積](/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout)であるグリッドコンテナーの組積軸の配置を設定します。 + +## 構文 + +```css +/* キーワード値 */ +justify-tracks: start; +justify-tracks: space-between; +justify-tracks: center; +justify-tracks: start,center,end; + +/* グローバル値 */ +justify-tracks: inherit; +justify-tracks: initial; +justify-tracks: revert; +justify-tracks: unset; +``` + +このプロパティは単一の値を取ることができ、その場合はすべてのトラックが同じように整列されます。値のリストが使用された場合、最初の値はグリッド軸の最初のトラックに適用され、2 番目は次のトラックに適用され、以下同様となります。 + +値がトラックより少ない場合は、最後の値が残りすべてのトラックに使用されます。トラックよりも値が多い場合、追加の値は無視されます。 + +### 値 + +- `start` + - : アイテムは、組積軸の配置コンテナーの先頭の端に向かって、互いに詰められます。 +- `end` + - : アイテムは、組積軸の配置コンテナーの末尾の端に向かって、互いに詰められます。 +- `center` + - : アイテムは、組積軸に沿って配置コンテナーの中心に向かって、互いに詰められます。 +- `normal` + - : `start` として動作します。 +- `space-between` + - : アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムは、コンテナーの先頭の端に詰められ、末尾のアイテムは、コンテナーの末尾の端に詰められます。 +- `space-around` + - : アイテムは配置コンテナー内で組積軸に沿って均等に配置されます。隣接するアイテム同士の間の間隔は同じです。先頭のアイテムの前と末尾のアイテムの後の空き空間は、隣接するアイテム同士の空間の半分に等しくなります。 +- `space-evenly` + - : アイテムは組積軸に沿って配置コンテナー内に均等に配置されます。隣接するアイテム同士の間隔、コンテナーの先頭の端と先頭のアイテム、およびコンテナーの末尾の端と末尾のアイテムは、すべて正確に同じです。 +- `stretch` + - : アイテムは組積の軸に沿って伸び、コンテンツボックスを満たします。確定したサイズのアイテムは引き伸ばされません。 +- `left` + - : 配置コンテナーの左端に向かって、アイテム同士が互いに詰められます。 +- `right` + - : 配置コンテナーの右端に向かって、アイテム同士が互いに詰められます。 + +## 公式定義 + +{{cssinfo}} + +## 関連情報 + +{{csssyntax}} + +## 例 + +### justify-tracks に複数の値がある組積レイアウト + +{{EmbedGHLiveSample("css-examples/grid/masonry/justify-tracks.html", '100%', 1000)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("align-tracks")}}, {{cssxref("masonry-auto-flow")}} diff --git a/files/ja/web/css/masonry-auto-flow/index.md b/files/ja/web/css/masonry-auto-flow/index.md new file mode 100644 index 0000000000..5b7b2239c4 --- /dev/null +++ b/files/ja/web/css/masonry-auto-flow/index.md @@ -0,0 +1,148 @@ +--- +title: masonry-auto-flow +slug: Web/CSS/masonry-auto-flow +tags: + - CSS + - 実験的 + - プロパティ + - リファレンス + - grid + - masonry + - masonry-auto-flow +browser-compat: css.properties.masonry-auto-flow +translation_of: Web/CSS/masonry-auto-flow +--- +{{CSSRef}} + +{{SeeCompatTable}} + +**`masonry-auto-flow`** は CSS のプロパティで、[CSS グリッドレイアウト](/ja/docs/Web/CSS/CSS_Grid_Layout)において[組積](/ja/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout)を使用する際のアイテムの配置方法を変更します。 + +## 構文 + +```css +/* キーワード値 */ +masonry-auto-flow: pack; +masonry-auto-flow: next; +masonry-auto-flow: ordered; +masonry-auto-flow: definite-first; +masonry-auto-flow: next ordered; + +/* グローバル値 */ +masonry-auto-flow: inherit; +masonry-auto-flow: initial; +maosnry-auto-flow: revert; +masonry-auto-flow: unset; +``` + +このプロパティは 2 つの形式のうちの 1 つから成ります。 + +- 単一のキーワード: `pack`, `next`, `definite-first`, `ordered` のうちの何れか +- 2 つのキーワード。例えば `next ordered`。 + +### 値 + +- `pack` + - : 既定の組積アルゴリズムで、アイテムは最も余裕のあるトラックに配置されます。 +- `next` + - : アイテムはグリッド軸に次々と配置されていきます。 +- `definite-first` + - : 既定の組積アルゴリズムのように、場所が確定しているアイテムを最初に配置してから、他の組積アイテムを配置するように表示します。 +- `ordered` + - : 配置が確定しているものは無視して、すべてを order で変更した文書順に従って配置します。 + +## 公式定義 + +{{cssinfo}} + +## 関連情報 + +{{csssyntax}} + +## 例 + +### next キーワードの使用 + +#### HTML + +```html +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> + <div id="item4"></div> + <div id="item5"></div> +</div> +<select id="flow"> + <option value="pack">pack</option> + <option value="next">next</option> +</select> +``` + +#### CSS + +```css +#grid { + height: 200px; + width: 200px; + display: grid; + gap: 10px; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: masonry; + masonry-auto-flow: pack; +} + +#item1 { + background-color: lime; + height: 2em +} + +#item2 { + background-color: yellow; +} + +#item3 { + background-color: blue; + height: 3em; +} + +#item4 { + background-color: red; + height: 2.5em; +} + +#item5 { + background-color: aqua; + height: 4em; +} +``` + +```js +const selectElem = document.querySelector('select'); + +function changeMasonryFlow() { + var grid = document.getElementById("grid"); + var direction = document.getElementById("flow"); + var masonryAutoFlow = direction.value === "pack" ? "pack" : "next"; + + grid.style.masonryAutoFlow = masonryAutoFlow; +} + +selectElem.addEventListener('change', changeMasonryFlow); +``` + +#### 結果 + +{{EmbedLiveSample("Using_the_next_keyword", "200px", "230px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("align-tracks")}}, {{cssxref("justify-tracks")}} diff --git a/files/ja/web/css/minmax()/index.md b/files/ja/web/css/minmax()/index.md index ca68c8d134..6b7773ed40 100644 --- a/files/ja/web/css/minmax()/index.md +++ b/files/ja/web/css/minmax()/index.md @@ -3,24 +3,26 @@ title: minmax() slug: Web/CSS/minmax() tags: - CSS - - CSS Function - - CSS グリッドレイアウト - CSS 関数 + - CSS グリッド - Experimental - - Reference + - 関数 + - リファレンス - ウェブ - レイアウト +browser-compat: css.properties.grid-template-columns.minmax translation_of: Web/CSS/minmax() --- -<p><strong><code>minmax()</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、寸法の範囲を <var>min</var> 以上、 <var>max</var> 以下で定義します。 <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッド</a>で使用されます。</p> +{{CSSRef}} -<div>{{EmbedInteractiveExample("pages/css/function-minmax.html")}}</div> +**`minmax()`** は [CSS](/ja/docs/Web/CSS) の関数で、寸法の範囲を _min_ 以上、 _max_ 以下で定義します。 [CSS グリッド](/ja/docs/Web/CSS/CSS_Grid_Layout)で使用されます。 -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +{{EmbedInteractiveExample("pages/css/function-minmax.html")}} -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<pre class="brush: css no-line-numbers notranslate">/* <inflexible-breadth>, <track-breadth> 値 */ +```css +/* <inflexible-breadth>, <track-breadth> 値 */ minmax(200px, 1fr) minmax(400px, 50%) minmax(30%, 300px) @@ -30,7 +32,7 @@ minmax(max-content, auto) minmax(auto, 300px) minmax(min-content, auto) -/* <fixed-breadth>, <track-breadth> 値 */ +/* <fixed-breadth>, <track-breadth> 値 */ minmax(200px, 1fr) minmax(30%, 300px) minmax(400px, 50%) @@ -38,36 +40,34 @@ minmax(50%, min-content) minmax(300px, max-content) minmax(200px, auto) -/* <inflexible-breadth>, <fixed-breadth> 値 */ +/* <fixed-breadth>, <track-breadth> 値 */ minmax(400px, 50%) minmax(30%, 300px) minmax(min-content, 200px) minmax(max-content, 200px) minmax(auto, 300px) -</pre> +``` -<p><em>min</em> および <em>max</em> の2つの引数を取る関数です。</p> +_min_ および _max_ の 2 つの引数を取る関数です。 -<p>どちらの引数も <code><length></code>, <code><percentage></code>, <code><flex></code>, またはキーワード値 <code>max-content</code>, <code>min-content</code>, <code>auto</code> のうちの一つを取ります。</p> +どちらの引数も `<length>`, `<percentage>`, `<flex>`, またはキーワード値 `max-content`, `min-content`, `auto` のうちの一つを取ります。 -<p>もし <var>min</var> が <var>max</var> より大きい場合は無視され、 <code>minmax(min,max)</code> は <var>min</var> として扱われます。最大値として、 {{cssxref("flex_value","<flex>")}} 値はグリッドトラックのフレックス係数を設定します。それは <var>min</var> としては無効です。</p> +もし _min_ が _max_ より大きい場合は無視され、 `minmax(min,max)` は _min_ として扱われます。最大値として、 {{cssxref("flex_value","<flex>")}} 値はグリッドトラックのフレックス係数を設定します。それは _min_ としては無効です。 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<length>")}}</dt> - <dd>負ではない寸法。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>負ではないパーセント値で、列グリッドトラックのグリッドコンテナーのインライン寸法、および行グリッドトラックのグリッドコンテナーのブロック寸法からの相対値。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 <code><percentage></code> は <code>auto</code> として扱う必要があります。{{glossary("user agent", "ユーザーエージェント")}}は、グリッドコンテナーの寸法に対するトラックの固有の寸法の貢献度を調整し、パーセント値を尊重して最小限の量だけトラックの最終的な寸法を増加させることがあります。</dd> - <dt>{{cssxref("<flex>")}}</dt> - <dd>単位 <code>fr</code> がついた負ではない寸法で、トラックのフレックス係数を指定します。それぞれの <code><flex></code> による寸法のトラックは、フレックス係数の割合に従って残りの空間を配分します。</dd> - <dt><code>max-content</code></dt> - <dd>グリッドトラックを占めるグリッドアイテムの max-content の貢献度の最大値を表します。</dd> - <dt><code>min-content</code></dt> - <dd>グリッドトラックを占めるグリッドアイテムの min-content の貢献度の最大値を表します。</dd> - <dt><code>auto</code></dt> - <dd>最大値としては、 <code>max-content</code> と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの ({{cssxref("min-width")}}/{{cssxref("min-height")}} で決定する) 最大の最小値を表します。</dd> -</dl> +- {{cssxref("<length>")}} + - : 負ではない寸法。 +- {{cssxref("<percentage>")}} + - : 負ではないパーセント値で、列グリッドトラックのグリッドコンテナーのインライン寸法、および行グリッドトラックのグリッドコンテナーのブロック寸法からの相対値。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 `<percentage>` は `auto` として扱う必要があります。{{glossary("user agent", "ユーザーエージェント")}}は、グリッドコンテナーの寸法に対するトラックの固有の寸法の貢献度を調整し、パーセント値を尊重して最小限の量だけトラックの最終的な寸法を増加させることがあります。 +- {{cssxref("<flex>")}} + - : 単位 `fr` がついた負ではない寸法で、トラックのフレックス係数を指定します。それぞれの `<flex>` による寸法のトラックは、フレックス係数の割合に従って残りの空間を配分します。 +- `max-content` + - : グリッドトラックを占めるグリッドアイテムの max-content の貢献度の最大値を表します。 +- `min-content` + - : グリッドトラックを占めるグリッドアイテムの min-content の貢献度の最大値を表します。 +- `auto` + - : 最大値としては、 `max-content` と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの ({{cssxref("min-width")}}/{{cssxref("min-height")}} で決定する) 最大の最小値を表します。 <h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> @@ -75,20 +75,19 @@ minmax(auto, 300px) <h3 id="CSS_properties" name="CSS_properties">CSS プロパティ</h3> -<p><code>minmax()</code> 関数は次の中で使用することができます。</p> +`minmax()` 関数は次の中で使用することができます。 -<ul> - <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> - <li><a href="/ja/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> - <li><a href="/ja/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> -</ul> +- [grid-template-columns](/ja/docs/Web/CSS/grid-template-columns) +- [grid-template-rows](/ja/docs/Web/CSS/grid-template-rows) +- [grid-auto-columns](/ja/docs/Web/CSS/grid-auto-columns) +- [grid-auto-rows](/ja/docs/Web/CSS/grid-auto-rows) -<h2 id="Example" name="Example">例</h2> +## 例 -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush: css; highlight[3] notranslate">#container { +```css +#container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; @@ -99,117 +98,42 @@ minmax(auto, 300px) padding: 10px; } -#container > div { +#container > div { background-color: #8ca0ff; padding: 5px; } -</pre> +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html notranslate"><div id="container"> - <div> +```html +<div id="container"> + <div> Item as wide as the content, but at most 300 pixels. - </div> - <div> + </div> + <div> Item with flexible width but a minimum of 200 pixels. - </div> - <div> + </div> + <div> Inflexible item of 150 pixels width. - </div> -</div></pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example", "100%", 200)}}</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("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}</td> - <td>{{Spec2("CSS Grid")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.grid-template-columns.minmax")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Track_sizing_and_minmax()">グリッドレイアウトの基本概念 - minmax() によるトラックの寸法制御</a></em></li> - <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS グリッド、論理値、書字方向</a></li> - <li> - <p>Video tutorial: <em><a href="http://gridbyexample.com/video/series-minmax/">Introducing minmax()</a></em></p> - </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">グリッド</a></li> - <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_Axis">グリッド軸</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> + </div> +</div> +``` + +### 結果 + +{{EmbedLiveSample("Examples", "100%", 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- グリッドレイアウトガイド: [グリッドレイアウトの基本概念 - minmax() によるトラックの寸法制御](/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#トラックのサイズ指定と_minmax()) +- [CSS グリッドと論理的な値と書字方向](/ja/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Logical_Values_and_Writing_Modes) +- 動画チュートリアル: _[Introducing minmax()](https://gridbyexample.com/video/series-minmax/)_ diff --git a/files/ja/web/css/repeat()/index.md b/files/ja/web/css/repeat()/index.md index 196ea71bd0..6fc208c093 100644 --- a/files/ja/web/css/repeat()/index.md +++ b/files/ja/web/css/repeat()/index.md @@ -3,21 +3,23 @@ title: repeat() slug: Web/CSS/repeat() tags: - CSS - - CSS Function - - CSS Grid - - Function - - Layout - - Reference - - Web + - CSS 関数 + - CSS グリッド + - 関数 + - レイアウト + - リファレンス + - ウェブ +browser-compat: css.properties.grid-template-columns.repeat translation_of: Web/CSS/repeat() --- -<div>{{cssref}}</div> +{{CSSRef}} -<p><span class="seoSummary"><code><strong>repeat()</strong></code> は <a href="/ja/docs/Web/CSS">CSS</a> の関数で、トラックリスト内での繰り返し部分を表し、列や行の繰り返しをよりコンパクトに書くことができます。</span></p> +**`repeat()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、トラックリスト内での部分的な繰り返しを表し、列や行の繰り返しをよりコンパクトに書くことができます。 -<p>この関数は CSS グリッドのプロパティである {{cssxref("grid-template-columns")}} と {{cssxref("grid-template-rows")}} の中で使うことができます。</p> +この関数は CSS グリッドのプロパティである {{cssxref("grid-template-columns")}} と {{cssxref("grid-template-rows")}} の中で使うことができます。 -<pre class="brush: css no-line-numbers notranslate">/* <track-repeat> 値 */ +```css +/* <track-repeat> 値 */ repeat(4, 1fr) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) @@ -30,7 +32,7 @@ repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] auto [col-end]) repeat(4, [col-start] min-content [col-middle] max-content [col-end]) -/* <auto-repeat> 値 */ +/* <auto-repeat> 値 */ repeat(auto-fill, 250px) repeat(auto-fit, 250px) repeat(auto-fill, [col-start] 250px [col-end]) @@ -38,71 +40,71 @@ repeat(auto-fit, [col-start] 250px [col-end]) repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end]) repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end]) -/* <fixed-repeat> 値 */ +/* <fixed-repeat> 値 */ repeat(4, 250px) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) -</pre> +``` -<h2 id="Syntax" name="Syntax">構文</h2> +## 構文 -<h3 id="Values" name="Values">値</h3> +### 値 -<dl> - <dt>{{cssxref("<length>")}}</dt> - <dd>正の整数で表される長さ。</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>負の数ではないパーセント値で、列グリッドトラック内のグリッドコンテナーのインライン寸法と、行グリッドトラック内のグリッドコンテナーのブロック寸法との相対的値を表します。。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 <code><percentage></code> は <code>auto</code> として扱う必要があります。ユーザーエージェントは、トラックの本質的な寸法の寄与をグリッドコンテナーの寸法に調整し、トラックの最終的な寸法を、パーセント値を尊重する結果となる最小の量だけ増加させることができます。</dd> - <dt>{{cssxref("<flex>")}}</dt> - <dd>トラックのフレックス要素を明示している <code>fr</code> 単位の負ではない寸法。それぞれのフレックスサイズのトラックは、それらのフレックス要素に比例して残りのスペースを配分する。</dd> - <dt><code>max-content</code></dt> - <dd>グリッドトラックにあるグリッドアイテムの最も大きい max-content を表す。</dd> - <dt><code>min-content</code></dt> - <dd>グリッドトラックにあるグリッドアイテムの最も大きい min-content を表す。</dd> - <dt><code>auto</code></dt> - <dd>最大値としては、 <code>max-content</code> と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの最大最小サイズ ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。</dd> - <dt><code>auto-fill</code></dt> - <dd>グリッドコンテナーが関連する軸に、定義されたまたは最大の幅を持っている場合、繰り返しの数は、グリッドコンテナーをオーバーフローさせない最大の正の数になる。各トラックは定義されているならば、最大トラック幅を調整する関数 (<code>grid-template-rows</code> または <code>grid-template-columns</code> を定義するために使用されるそれぞれ独立した値) として扱われる。それ以外の場合は、最小トラック幅を調整する関数として扱い、グリッドギャップを考慮に入れる。何回繰り返してもオーバーフローしてしまう場合は、繰り返しを 1 とする。そうでなければ、グリッドコンテナーが関連する軸に、定義された最小の寸法をもっている場合、繰り返しの数は最小の要件を満たす可能性がある最小の正の整数になる。その他の場合は、指定されたトラックリストは <code>1</code> 回のみ繰り返す。</dd> - <dt><code>auto-fit</code></dt> - <dd> - <p><code>auto-fill</code> と同様に動作しますが、グリッドアイテムを配置した後、空の繰り返しトラックが折りたたまれる点が異なります。空のトラックとは、フロー内のグリッドアイテムが配置されていない、またはそれをまたいで配置されているものがないトラックのことです。 (これは、すべてのトラックが空の場合、すべてのトラックが折りたたまれる結果になる可能性があります。)</p> +- {{cssxref("<length>")}} + - : 正の整数で表される長さです。 +- {{cssxref("<percentage>")}} + - : 負の数ではないパーセント値で、列グリッドトラック内のグリッドコンテナーのインライン寸法と、行グリッドトラック内のグリッドコンテナーのブロック寸法との相対的値を表します。グリッドコンテナーの寸法がトラックの寸法に依存する場合、 `<percentage>` は `auto` として扱う必要があります。ユーザーエージェントは、トラックの本質的な寸法の寄与をグリッドコンテナーの寸法に調整し、トラックの最終的な寸法を、パーセント値を尊重する結果となる最小の量だけ増加させることができます。 +- {{cssxref("<flex>")}} + - : トラックのフレックス要素を明示している `fr` 単位の負ではない寸法。それぞれのフレックスサイズのトラックは、それらのフレックス要素に比例して残りの空間を配分します。 +- `max-content` + - : グリッドトラックにあるグリッドアイテムの最も大きい max-content を表します。 +- `min-content` + - : グリッドトラックにあるグリッドアイテムの最も大きい min-content を表します。 +- `auto` + - : 最大値としては、 `max-content` と同じです。最小値としては、グリッドトラックを占めるグリッドアイテムの最大最小サイズ ({{cssxref("min-width")}}/{{cssxref("min-height")}} で指定されたもの) を表します。 +- `auto-fill` + - : グリッドコンテナーが関連する軸に、定義されたまたは最大の幅を持っている場合、繰り返しの数は、グリッドコンテナーをオーバーフローさせない最大の正の数になります。各トラックは定義されているならば、最大トラック幅を調整する関数 (`grid-template-rows` または `grid-template-columns` を定義するために使用されるそれぞれ独立した値) として扱われます。それ以外の場合は、最小トラック幅を調整する関数として扱い、グリッドギャップを考慮に入れます。何回繰り返してもオーバーフローしてしまう場合は、繰り返しを 1 とする。そうでなければ、グリッドコンテナーが関連する軸に、定義された最小の寸法をもっている場合、繰り返しの数は最小の要件を満たす可能性がある最小の正の整数になります。その他の場合は、指定されたトラックリストは `1` 回のみ繰り返します。。 +- `auto-fit` - <p>折り畳まれたトラックは、 <code>0px</code> の固定トラックサイジング機能を1つ持っているものとして扱われ、その左右の溝も折り畳まれます。</p> + - : `auto-fill` と同様に動作しますが、グリッドアイテムを配置した後、空の繰り返しトラックが折りたたまれる点が異なります。空のトラックとは、フロー内のグリッドアイテムが配置されていない、またはそれをまたいで配置されているものがないトラックのことです。 (これは、すべてのトラックが空の場合、すべてのトラックが折りたたまれる結果になる可能性があります。) - <p>自動反復トラックの数を見つけるために、ユーザーエージェントは、ゼロによる除算を避けるために、トラックの寸法をユーザーエージェントが指定した値 (例えば <code>1px</code>) に切り下げます。</p> - </dd> -</dl> + 折り畳まれたトラックは、 `0px` の固定トラックサイジング機能を1つ持っているものとして扱われ、その左右の溝も折り畳まれます。 -<h2 id="Examples" name="Examples">例</h2> + 自動反復トラックの数を見つけるために、ユーザーエージェントは、ゼロによる除算を避けるために、トラックの寸法をユーザーエージェントが指定した値 (例えば `1px`) に切り下げます。 -<h3 id="Specifying_grid_columns_using_repeat" name="Specifying_grid_columns_using_repeat">repeat() を使用したグリッド列の指</h3> +## 例 -<h4 id="HTML">HTML</h4> +### repeat() を使用したグリッド列の指定 -<pre class="brush: html notranslate"><div id="container"> - <div> +#### HTML + +```html +<div id="container"> + <div> This item is 50 pixels wide. - </div> - <div> + </div> + <div> Item with flexible width. - </div> - <div> + </div> + <div> This item is 50 pixels wide. - </div> - <div> + </div> + <div> Item with flexible width. - </div> - <div> + </div> + <div> Inflexible item of 100 pixels width. - </div> -</div></pre> + </div> +</div> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css; highlight[3] notranslate">#container { +```css +#container { display: grid; grid-template-columns: repeat(2, 50px 1fr) 100px; grid-gap: 5px; @@ -113,43 +115,26 @@ repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) padding: 10px; } -#container > div { +#container > div { background-color: #8ca0ff; padding: 5px; } -</pre> - -<h4 id="Result" name="Result">結果</h4> - -<p>{{EmbedLiveSample("Specifying_grid_columns_using_repeat", "100%", 200)}}</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("CSS Grid", "#funcdef-repeat", "repeat()")}}</td> - <td>{{Spec2("CSS Grid")}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("css.properties.grid-template-columns.repeat")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>関連する CSS プロパティ: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</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="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">グリッドテンプレート領域 - グリッド定義の一括指定</a></em></li> -</ul> +``` + +#### 結果 + +{{EmbedLiveSample("Specifying_grid_columns_using_repeat", "100%", 200)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する CSS プロパティ: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}} +- グリッドレイアウトガイド: [CSS グリッドでの線ベースの配置](/ja/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid) +- グリッドレイアウトガイド: [グリッドテンプレート領域 - グリッド定義の一括指定](/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#グリッド定義の一括指定) diff --git a/files/ja/web/css/row-gap/index.md b/files/ja/web/css/row-gap/index.md index 79389080ac..5a34037479 100644 --- a/files/ja/web/css/row-gap/index.md +++ b/files/ja/web/css/row-gap/index.md @@ -30,7 +30,7 @@ row-gap: 0.5cm; /* <percentage> 値 */ row-gap: 10%; -/* Global values */ +/* グローバル値 */ row-gap: inherit; row-gap: initial; row-gap: revert; @@ -52,7 +52,7 @@ row-gap: unset; ## 例 -<h3 id="Flex_layout">フレックスレイアウト</h3> +### Flex layout #### HTML @@ -90,7 +90,7 @@ row-gap: unset; {{EmbedLiveSample('Flex_layout', "auto", "120px")}} -<h3 id="Grid_layout">グリッドレイアウト</h3> +### Grid layout #### HTML @@ -134,4 +134,4 @@ row-gap: unset; ## 関連情報 - 関連する CSS プロパティ: {{CSSxRef("column-gap")}}, {{CSSxRef("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) |