From f5534fe3671df79e2145c50b9e14c0cbfd9d330b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 30 Sep 2021 01:46:45 +0900 Subject: Web/CSS/grid-row の変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/grid-row/index.html | 206 ----------------------------------- files/ja/web/css/grid-row/index.md | 149 +++++++++++++++++++++++++ 2 files changed, 149 insertions(+), 206 deletions(-) delete mode 100644 files/ja/web/css/grid-row/index.html create mode 100644 files/ja/web/css/grid-row/index.md (limited to 'files/ja') diff --git a/files/ja/web/css/grid-row/index.html b/files/ja/web/css/grid-row/index.html deleted file mode 100644 index 7531bbfdec..0000000000 --- a/files/ja/web/css/grid-row/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: grid-row -slug: Web/CSS/grid-row -tags: - - CSS - - CSS Grid - - CSS Property - - CSS グリッド - - CSS プロパティ - - Reference - - grid-row -translation_of: Web/CSS/grid-row ---- -

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

- -
{{EmbedInteractiveExample("pages/css/grid-row.html")}}
- - - -

二つの <grid-line> 値が指定された場合は、個別指定の grid-column-start はスラッシュの前に設定し、個別指定の grid-column-end はスラッシュの後に設定します。

- -

構文

- -
/* キーワード値 */
-grid-row: auto;
-grid-row: auto / auto;
-
-/* <custom-ident> 値 */
-grid-row: somegridarea;
-grid-row: somegridarea / someothergridarea;
-
-/* <integer> + <custom-ident> 値 */
-grid-row: somegridarea 4;
-grid-row: 4 somegridarea / 6;
-
-/* span + <integer> + <custom-ident> 値 */
-grid-row: span 3;
-grid-row: span somegridarea;
-grid-row: 5 somegridarea span;
-grid-row: span 3 / 6;
-grid-row: span somegridarea / span someothergridarea;
-grid-row: 5 somegridarea span / 2 span;
-
-/* グローバル値 */
-grid-row: inherit;
-grid-row: initial;
-grid-row: unset;
-
- -

値

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

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

- -

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

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

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

- -

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

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

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

- -

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

-
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div id="grid">
-  <div id="item1"></div>
-  <div id="item2"></div>
-  <div id="item3"></div>
-</div>
- -

CSS

- -
#grid {
-  display: grid;
-  height: 200px;
-  grid-template-columns: 200px;
-  grid-template-rows: repeat(6, 1fr);
-}
-
-#item1 {
-  background-color: lime;
-}
-
-#item2 {
-  background-color: yellow;
-  grid-row: 2 / 4;
-}
-
-#item3 {
-  background-color: blue;
-  grid-row: span 2 / 7;
-}
-
- -

{{EmbedLiveSample("Example", "200px", "200px")}}

- -

Internet Explorer での問題

- -

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

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - - - diff --git a/files/ja/web/css/grid-row/index.md b/files/ja/web/css/grid-row/index.md new file mode 100644 index 0000000000..1f0b579d82 --- /dev/null +++ b/files/ja/web/css/grid-row/index.md @@ -0,0 +1,149 @@ +--- +title: grid-row +slug: Web/CSS/grid-row +tags: + - CSS + - CSS Grid + - 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", "グリッド領域")}}の行の先頭と末尾の端を指定します。 + +{{EmbedInteractiveExample("pages/css/grid-row.html")}} + +2 つの `\` 値が指定された場合は、個別指定の `grid-row-start` はスラッシュの前に設定し、個別指定の `grid-row-end` はスラッシュの後に設定します。 + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- [`grid-row-end`](/ja/docs/Web/CSS/grid-row-end) +- [`grid-row-start`](/ja/docs/Web/CSS/grid-row-start) + +## 構文 + +```css +/* キーワード値 */ +grid-row: auto; +grid-row: auto / auto; + +/* 値 */ +grid-row: somegridarea; +grid-row: somegridarea / someothergridarea; + +/* + 値 */ +grid-row: somegridarea 4; +grid-row: 4 somegridarea / 6; + +/* span + + 値 */ +grid-row: span 3; +grid-row: span somegridarea; +grid-row: 5 somegridarea span; +grid-row: span 3 / 6; +grid-row: span somegridarea / span someothergridarea; +grid-row: 5 somegridarea span / 2 span; + +/* グローバル値 */ +grid-row: inherit; +grid-row: initial; +grid-row: revert; +grid-row: unset; +``` + +### 値 + +- `auto` + - : プロパティをグリッドアイテムの配置に影響させず、自動的に配置し、間隔を自動的に取るか、既定の `1` とするためのキーワードです。 +- `` + + - : '\-start'/'\-end' という名前の付いた線がある場合、これはそのような線の最初がグリッドのアイテムの配置に関わります。 + + > **Note:** 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 `grid-row: foo;` と指定すると名前付きグリッド領域の先頭/末尾側の端を選択します (その前に `foo-start`/`foo-end` という名前の線が明示的に存在しない限り)。 + + そうでなければ、これは `` に沿って整数の `1` が指定されたものとして扱われます。 + +- ` && ?` + + - : n 番目のグリッド線をグリッドアイテムの配置に使用します。負の整数が指定された場合は、逆方向にカウントし、明示的なグリッドの末尾の端から始めます。 + + 名前が \ として与えられた場合、その名前の付いた線のみがカウントされます。その名前がある線の数が十分にない場合は、この位置を探す目的においては、すべての暗黙のグリッド線がその名前を持つと仮定されます。 + + `0` の {{cssxref("integer")}} 値は無効です。 + +- `span && [ || ]` + + - : グリッドアイテムのグリッド領域の列先頭の端が末尾の端から n 行になるように、グリッドアイテムの配置にグリッドスパンを設定します。 + + 名前が \ として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分おにない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。 + + \ が省略された場合の既定値は `1` です。負の数や 0 は無効です。 + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +

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

+ +#### HTML + +```html +
+
+
+
+
+``` + +#### CSS + +```css +#grid { + display: grid; + height: 200px; + grid-template-columns: 200px; + grid-template-rows: repeat(6, 1fr); +} + +#item1 { + background-color: lime; +} + +#item2 { + background-color: yellow; + grid-row: 2 / 4; +} + +#item3 { + background-color: blue; + grid-row: span 2 / 7; +} +``` + +#### 結果 + +{{EmbedLiveSample("Setting_grid_row_size_and_location", "200px", "200px")}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- 関連する 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)_ +- 動画チュートリアル: _[Line-based placement](https://gridbyexample.com/video/series-line-based-placement/)_ -- cgit v1.2.3-54-g00ecf