From 8c509c815fd59af2d2ed09eda7169a9f11333f7b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 30 Nov 2021 01:04:30 +0900 Subject: CSS グリッドレイアウトのリファレンスの変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/grid-column-start/index.html | 238 ---------------------- files/ja/web/css/grid-column-start/index.md | 238 ++++++++++++++++++++++ files/ja/web/css/grid-column/index.html | 189 ----------------- files/ja/web/css/grid-column/index.md | 189 +++++++++++++++++ files/ja/web/css/grid-template-areas/index.html | 183 ----------------- files/ja/web/css/grid-template-areas/index.md | 183 +++++++++++++++++ files/ja/web/css/grid-template-columns/index.html | 215 ------------------- files/ja/web/css/grid-template-columns/index.md | 215 +++++++++++++++++++ files/ja/web/css/grid-template/index.html | 209 ------------------- files/ja/web/css/grid-template/index.md | 209 +++++++++++++++++++ files/ja/web/css/grid/index.html | 197 ------------------ files/ja/web/css/grid/index.md | 197 ++++++++++++++++++ files/ja/web/css/minmax()/index.html | 215 ------------------- files/ja/web/css/minmax()/index.md | 215 +++++++++++++++++++ files/ja/web/css/repeat()/index.html | 155 -------------- files/ja/web/css/repeat()/index.md | 155 ++++++++++++++ 16 files changed, 1601 insertions(+), 1601 deletions(-) delete mode 100644 files/ja/web/css/grid-column-start/index.html create mode 100644 files/ja/web/css/grid-column-start/index.md delete mode 100644 files/ja/web/css/grid-column/index.html create mode 100644 files/ja/web/css/grid-column/index.md delete mode 100644 files/ja/web/css/grid-template-areas/index.html create mode 100644 files/ja/web/css/grid-template-areas/index.md delete mode 100644 files/ja/web/css/grid-template-columns/index.html create mode 100644 files/ja/web/css/grid-template-columns/index.md delete mode 100644 files/ja/web/css/grid-template/index.html create mode 100644 files/ja/web/css/grid-template/index.md delete mode 100644 files/ja/web/css/grid/index.html create mode 100644 files/ja/web/css/grid/index.md delete mode 100644 files/ja/web/css/minmax()/index.html create mode 100644 files/ja/web/css/minmax()/index.md delete mode 100644 files/ja/web/css/repeat()/index.html create mode 100644 files/ja/web/css/repeat()/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/css/grid-column-start/index.html b/files/ja/web/css/grid-column-start/index.html deleted file mode 100644 index 72c1fba394..0000000000 --- a/files/ja/web/css/grid-column-start/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: grid-column-start -slug: Web/CSS/grid-column-start -tags: - - CSS - - CSS Grid - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/grid-column-start ---- -

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

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

構文

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

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

- - - -

値

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

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

- -

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

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

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

- -

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

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

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

- -

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

- -

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

-
-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

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

- -

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

- -
.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;
-}
-
- - - -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - - - diff --git a/files/ja/web/css/grid-column-start/index.md b/files/ja/web/css/grid-column-start/index.md new file mode 100644 index 0000000000..72c1fba394 --- /dev/null +++ b/files/ja/web/css/grid-column-start/index.md @@ -0,0 +1,238 @@ +--- +title: grid-column-start +slug: Web/CSS/grid-column-start +tags: + - CSS + - CSS Grid + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/grid-column-start +--- +

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

+ +
{{EmbedInteractiveExample("pages/css/grid-column-start.html")}}
+ + + +

構文

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

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

+ + + +

値

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

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

+ +

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

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

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

+ +

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

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

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

+ +

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

+ +

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

+
+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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

+ +

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

+ +
.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;
+}
+
+ + + +

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + + + diff --git a/files/ja/web/css/grid-column/index.html b/files/ja/web/css/grid-column/index.html deleted file mode 100644 index 3a6f29ac1d..0000000000 --- a/files/ja/web/css/grid-column/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: grid-column -slug: Web/CSS/grid-column -tags: - - CSS - - CSS グリッド - - CSS プロパティ - - Reference -translation_of: Web/CSS/grid-column ---- -

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

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

構文

- -

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

- -

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

- -

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

- - - -

値

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

メモ: 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 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> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分にない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

- -

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: 100px;
-  grid-template-columns: repeat(6, 1fr);
-  grid-template-rows: 100px;
-}
-
-#item1 {
-  background-color: lime;
-}
-
-#item2 {
-  background-color: yellow;
-  grid-column: 2 / 4;
-}
-
-#item3 {
-  background-color: blue;
-  grid-column: span 2 / 7;
-}
-
- -

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

- -

Internet Explorer での問題

- -

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

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの互換性

- -

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

- -

関連情報

- - - - diff --git a/files/ja/web/css/grid-column/index.md b/files/ja/web/css/grid-column/index.md new file mode 100644 index 0000000000..3a6f29ac1d --- /dev/null +++ b/files/ja/web/css/grid-column/index.md @@ -0,0 +1,189 @@ +--- +title: grid-column +slug: Web/CSS/grid-column +tags: + - CSS + - CSS グリッド + - CSS プロパティ + - Reference +translation_of: Web/CSS/grid-column +--- +

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

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

構文

+ +

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

+ +

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

+ +

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

+ + + +

値

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

メモ: 名前付きグリッド領域、自動的にこの形で暗黙の名前付き線を生成しますので、 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> として与えられた場合、その名前の付いた線のみがカウントされます。その名前を持つ線の数が十分にない場合は、検索方向に対応する明示的グリッドの側にあるすべての暗黙的グリッド線が、この区間をカウントする目的でその名前を持つと仮定されます。

+ +

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: 100px;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: 100px;
+}
+
+#item1 {
+  background-color: lime;
+}
+
+#item2 {
+  background-color: yellow;
+  grid-column: 2 / 4;
+}
+
+#item3 {
+  background-color: blue;
+  grid-column: span 2 / 7;
+}
+
+ +

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

+ +

Internet Explorer での問題

+ +

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

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + + + diff --git a/files/ja/web/css/grid-template-areas/index.html b/files/ja/web/css/grid-template-areas/index.html deleted file mode 100644 index f753d8596d..0000000000 --- a/files/ja/web/css/grid-template-areas/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: grid-template-areas -slug: Web/CSS/grid-template-areas -tags: - - CSS - - CSS Grid - - CSS Property - - Reference -translation_of: Web/CSS/grid-template-areas ---- -

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

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

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

- -

構文

- -
/* キーワード値 */
-grid-template-areas: none;
-
-/* <string> 値 */
-grid-template-areas: "a b";
-grid-template-areas: "a b b"
-                     "a c d";
-
-/* グローバル値 */
-grid-template-areas: inherit;
-grid-template-areas: initial;
-grid-template-areas: unset;
-
- -

値

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

正式な構文

- -{{csssyntax}} - -

例

- -

HTML

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

CSS

- -
#page {
-  display: grid;
-  width: 100%;
-  height: 250px;
-  grid-template-areas: "head head"
-                       "nav  main"
-                       "nav  foot";
-  grid-template-rows: 50px 1fr 30px;
-  grid-template-columns: 150px 1fr;
-}
-
-#page > header {
-  grid-area: head;
-  background-color: #8ca0ff;
-}
-
-#page > nav {
-  grid-area: nav;
-  background-color: #ffa08c;
-}
-
-#page > main {
-  grid-area: main;
-  background-color: #ffff64;
-}
-
-#page > footer {
-  grid-area: foot;
-  background-color: #8cffa0;
-}
-
- -

描画結果

- -

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

- -

仕様

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

{{cssinfo}}

- -

ブラウザーの実装状況

- -

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

- -

関連情報

- - - -
diff --git a/files/ja/web/css/grid-template-areas/index.md b/files/ja/web/css/grid-template-areas/index.md new file mode 100644 index 0000000000..f753d8596d --- /dev/null +++ b/files/ja/web/css/grid-template-areas/index.md @@ -0,0 +1,183 @@ +--- +title: grid-template-areas +slug: Web/CSS/grid-template-areas +tags: + - CSS + - CSS Grid + - CSS Property + - Reference +translation_of: Web/CSS/grid-template-areas +--- +

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

+ +
{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}
+ + + +

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

+ +

構文

+ +
/* キーワード値 */
+grid-template-areas: none;
+
+/* <string> 値 */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* グローバル値 */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+
+ +

値

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

正式な構文

+ +{{csssyntax}} + +

例

+ +

HTML

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

CSS

+ +
#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page > header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page > nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page > main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page > footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+
+ +

描画結果

+ +

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

+ +

仕様

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

{{cssinfo}}

+ +

ブラウザーの実装状況

+ +

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

+ +

関連情報

+ + + +
diff --git a/files/ja/web/css/grid-template-columns/index.html b/files/ja/web/css/grid-template-columns/index.html deleted file mode 100644 index d0b5627b94..0000000000 --- a/files/ja/web/css/grid-template-columns/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: grid-template-columns -slug: Web/CSS/grid-template-columns -tags: - - CSS - - CSS Grid - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/grid-template-columns ---- -

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

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

構文

- -
/* キーワード値 */
-grid-template-columns: none;
-
-/* <track-list> 値 */
-grid-template-columns: 100px 1fr;
-grid-template-columns: [linename] 100px;
-grid-template-columns: [linename1] 100px [linename2 linename3];
-grid-template-columns: minmax(100px, 1fr);
-grid-template-columns: fit-content(40%);
-grid-template-columns: repeat(3, 200px);
-grid-template-columns: subgrid;
-
-/* <auto-track-list> 値 */
-grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
-grid-template-columns: minmax(100px, max-content)
-                       repeat(auto-fill, 200px) 20%;
-grid-template-columns: [linename1] 100px [linename2]
-                       repeat(auto-fit, [linename3 linename4] 300px)
-                       100px;
-grid-template-columns: [linename1 linename2] 100px
-                       repeat(auto-fit, [linename1] 300px) [linename3];
-
-/* グローバル値 */
-grid-template-columns: inherit;
-grid-template-columns: initial;
-grid-template-columns: unset;
-
- -

値

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

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

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

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

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

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

-
- -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

グリッド列の寸法の指定

- -

HTML

- -
<div id="grid">
-  <div id="areaA">A</div>
-  <div id="areaB">B</div>
-</div>
- -

CSS

- -
#grid {
-  display: grid;
-  width: 100%;
-  grid-template-columns: 50px 1fr;
-}
-
-#areaA {
-  background-color: lime;
-}
-
-#areaB {
-  background-color: yellow;
-}
- -

結果

- -

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

- -

仕様書

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

ブラウザーの互換性

- -

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

- -

関連情報

- - - - diff --git a/files/ja/web/css/grid-template-columns/index.md b/files/ja/web/css/grid-template-columns/index.md new file mode 100644 index 0000000000..d0b5627b94 --- /dev/null +++ b/files/ja/web/css/grid-template-columns/index.md @@ -0,0 +1,215 @@ +--- +title: grid-template-columns +slug: Web/CSS/grid-template-columns +tags: + - CSS + - CSS Grid + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/grid-template-columns +--- +

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

+ +
{{EmbedInteractiveExample("pages/css/grid-template-columns.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+grid-template-columns: none;
+
+/* <track-list> 値 */
+grid-template-columns: 100px 1fr;
+grid-template-columns: [linename] 100px;
+grid-template-columns: [linename1] 100px [linename2 linename3];
+grid-template-columns: minmax(100px, 1fr);
+grid-template-columns: fit-content(40%);
+grid-template-columns: repeat(3, 200px);
+grid-template-columns: subgrid;
+
+/* <auto-track-list> 値 */
+grid-template-columns: 200px repeat(auto-fill, 100px) 300px;
+grid-template-columns: minmax(100px, max-content)
+                       repeat(auto-fill, 200px) 20%;
+grid-template-columns: [linename1] 100px [linename2]
+                       repeat(auto-fit, [linename3 linename4] 300px)
+                       100px;
+grid-template-columns: [linename1 linename2] 100px
+                       repeat(auto-fit, [linename1] 300px) [linename3];
+
+/* グローバル値 */
+grid-template-columns: inherit;
+grid-template-columns: initial;
+grid-template-columns: unset;
+
+ +

値

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

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

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

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

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

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

+
+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

グリッド列の寸法の指定

+ +

HTML

+ +
<div id="grid">
+  <div id="areaA">A</div>
+  <div id="areaB">B</div>
+</div>
+ +

CSS

+ +
#grid {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 50px 1fr;
+}
+
+#areaA {
+  background-color: lime;
+}
+
+#areaB {
+  background-color: yellow;
+}
+ +

結果

+ +

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

+ +

仕様書

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

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + + + diff --git a/files/ja/web/css/grid-template/index.html b/files/ja/web/css/grid-template/index.html deleted file mode 100644 index c80fd2a006..0000000000 --- a/files/ja/web/css/grid-template/index.html +++ /dev/null @@ -1,209 +0,0 @@ ---- -title: grid-template -slug: Web/CSS/grid-template -tags: - - CSS - - CSS Grid - - CSS Property - - Reference -translation_of: Web/CSS/grid-template ---- -

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

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

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

- -

構文

- - -
/* キーワード値 */
-grid-template: none;
-
-/* grid-template-rows / grid-template-columns の値 */
-grid-template: 100px 1fr / 50px 1fr;
-grid-template: auto 1fr / auto 1fr auto;
-grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
-grid-template: fit-content(100px) / fit-content(40%);
-
-/* grid-template-areas grid-template-rows / grid-template-column の値 */
-grid-template: "a a a"
-               "b b b";
-grid-template: "a a a" 20%
-               "b b b" auto;
-grid-template: [header-top] "a a a"     [header-bottom]
-                 [main-top] "b b b" 1fr [main-bottom]
-                            / auto 1fr auto;
-
-/* グローバル値 */
-grid-template: inherit;
-grid-template: initial;
-grid-template: unset;
-
- -

値

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

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

-
-
- -

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

- -

正式な構文

- -{{csssyntax}} - -

例

- -

CSS

- -
#page {
-  display: grid;
-  width: 100%;
-  height: 200px;
-  grid-template: [header-left] "head head" 30px [header-right]
-                 [main-left]   "nav  main" 1fr  [main-right]
-                 [footer-left] "nav  foot" 30px [footer-right]
-                 / 120px 1fr;
-}
-
-header {
-  background-color: lime;
-  grid-area: head;
-}
-
-nav {
-  background-color: lightblue;
-  grid-area: nav;
-}
-
-main {
-  background-color: yellow;
-  grid-area: main;
-}
-
-footer {
-  background-color: red;
-  grid-column: foot;
-}
- -

HTML

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

描画結果

- -

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

- -

仕様

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

{{cssinfo}}

- -

ブラウザーの実装状況

- -

- - - -

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

- -

- -

関連情報

- - - - diff --git a/files/ja/web/css/grid-template/index.md b/files/ja/web/css/grid-template/index.md new file mode 100644 index 0000000000..c80fd2a006 --- /dev/null +++ b/files/ja/web/css/grid-template/index.md @@ -0,0 +1,209 @@ +--- +title: grid-template +slug: Web/CSS/grid-template +tags: + - CSS + - CSS Grid + - CSS Property + - Reference +translation_of: Web/CSS/grid-template +--- +

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

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

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

+ +

構文

+ + +
/* キーワード値 */
+grid-template: none;
+
+/* grid-template-rows / grid-template-columns の値 */
+grid-template: 100px 1fr / 50px 1fr;
+grid-template: auto 1fr / auto 1fr auto;
+grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
+grid-template: fit-content(100px) / fit-content(40%);
+
+/* grid-template-areas grid-template-rows / grid-template-column の値 */
+grid-template: "a a a"
+               "b b b";
+grid-template: "a a a" 20%
+               "b b b" auto;
+grid-template: [header-top] "a a a"     [header-bottom]
+                 [main-top] "b b b" 1fr [main-bottom]
+                            / auto 1fr auto;
+
+/* グローバル値 */
+grid-template: inherit;
+grid-template: initial;
+grid-template: unset;
+
+ +

値

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

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

+
+
+ +

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

+ +

正式な構文

+ +{{csssyntax}} + +

例

+ +

CSS

+ +
#page {
+  display: grid;
+  width: 100%;
+  height: 200px;
+  grid-template: [header-left] "head head" 30px [header-right]
+                 [main-left]   "nav  main" 1fr  [main-right]
+                 [footer-left] "nav  foot" 30px [footer-right]
+                 / 120px 1fr;
+}
+
+header {
+  background-color: lime;
+  grid-area: head;
+}
+
+nav {
+  background-color: lightblue;
+  grid-area: nav;
+}
+
+main {
+  background-color: yellow;
+  grid-area: main;
+}
+
+footer {
+  background-color: red;
+  grid-column: foot;
+}
+ +

HTML

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

描画結果

+ +

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

+ +

仕様

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

{{cssinfo}}

+ +

ブラウザーの実装状況

+ +

+ + + +

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

+ +

+ +

関連情報

+ + + + diff --git a/files/ja/web/css/grid/index.html b/files/ja/web/css/grid/index.html deleted file mode 100644 index 6b5a8f0d1f..0000000000 --- a/files/ja/web/css/grid/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: grid -slug: Web/CSS/grid -tags: - - CSS - - CSS グリッド - - CSS プロパティ - - Reference - - grid - - grid-auto-columns - - grid-auto-flow - - grid-auto-rows - - grid-template-areas - - grid-template-columns - - grid-template-rows -translation_of: Web/CSS/grid ---- -

CSS の grid プロパティは一括指定プロパティで、明示的なすべてのグリッドプロパティ ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}) と、暗黙のすべてのグリッドプロパティ ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}) を単一の宣言で設定します。

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

メモ: 明示的なグリッドプロパティ、または暗黙のグリッドプロパティのみを単一の grid 宣言で設定することができます。指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、 gutter プロパティはこの一括指定では初期化されません。

-
- -

構文

- -
/* <'grid-template'> 値 */
-grid: none;
-grid: "a" 100px "b" 1fr;
-grid: [linename1] "a" 100px [linename2];
-grid: "a" 200px "b" min-content;
-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: 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 */
-grid: auto-flow / 200px;
-grid: auto-flow dense / 30%;
-grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
-grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
-
-/* グローバル値	 */
-grid: inherit;
-grid: initial;
-grid: unset;
-
- -

値

- -
-
<'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 のサブプロパティはすべて、初期値に初期化されます。

-
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

HTML

- -
<div id="container">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

CSS

- -
#container {
-  display: grid;
-  grid: repeat(2, 60px) / auto-flow 80px;
-}
-
-#container > div {
-  background-color: #8ca0ff;
-  width: 50px;
-  height: 50px;
-}
- -

結果

- -

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

- -

仕様書

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

{{cssinfo}}

- -

ブラウザーの対応

- -

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

- -

関連情報

- - - - diff --git a/files/ja/web/css/grid/index.md b/files/ja/web/css/grid/index.md new file mode 100644 index 0000000000..6b5a8f0d1f --- /dev/null +++ b/files/ja/web/css/grid/index.md @@ -0,0 +1,197 @@ +--- +title: grid +slug: Web/CSS/grid +tags: + - CSS + - CSS グリッド + - CSS プロパティ + - Reference + - grid + - grid-auto-columns + - grid-auto-flow + - grid-auto-rows + - grid-template-areas + - grid-template-columns + - grid-template-rows +translation_of: Web/CSS/grid +--- +

CSS の grid プロパティは一括指定プロパティで、明示的なすべてのグリッドプロパティ ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}) と、暗黙のすべてのグリッドプロパティ ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}) を単一の宣言で設定します。

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

メモ: 明示的なグリッドプロパティ、または暗黙のグリッドプロパティのみを単一の grid 宣言で設定することができます。指定しないサブプロパティは、通常の一括指定と同様に初期値に設定されます。また、 gutter プロパティはこの一括指定では初期化されません。

+
+ +

構文

+ +
/* <'grid-template'> 値 */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+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: 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 */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* グローバル値	 */
+grid: inherit;
+grid: initial;
+grid: unset;
+
+ +

値

+ +
+
<'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 のサブプロパティはすべて、初期値に初期化されます。

+
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

HTML

+ +
<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}
+ +

結果

+ +

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

+ +

仕様書

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

{{cssinfo}}

+ +

ブラウザーの対応

+ +

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

+ +

関連情報

+ + + + diff --git a/files/ja/web/css/minmax()/index.html b/files/ja/web/css/minmax()/index.html deleted file mode 100644 index ca68c8d134..0000000000 --- a/files/ja/web/css/minmax()/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: minmax() -slug: Web/CSS/minmax() -tags: - - CSS - - CSS Function - - CSS グリッドレイアウト - - CSS 関数 - - Experimental - - Reference - - ウェブ - - レイアウト -translation_of: Web/CSS/minmax() ---- -

minmax() は CSS の関数で、寸法の範囲を min 以上、 max 以下で定義します。 CSS グリッドで使用されます。

- -
{{EmbedInteractiveExample("pages/css/function-minmax.html")}}
- - - -

構文

- -
/* <inflexible-breadth>, <track-breadth> 値 */
-minmax(200px, 1fr)
-minmax(400px, 50%)
-minmax(30%, 300px)
-minmax(100px, max-content)
-minmax(min-content, 400px)
-minmax(max-content, auto)
-minmax(auto, 300px)
-minmax(min-content, auto)
-
-/* <fixed-breadth>, <track-breadth> 値 */
-minmax(200px, 1fr)
-minmax(30%, 300px)
-minmax(400px, 50%)
-minmax(50%, min-content)
-minmax(300px, max-content)
-minmax(200px, auto)
-
-/* <inflexible-breadth>, <fixed-breadth> 値 */
-minmax(400px, 50%)
-minmax(30%, 300px)
-minmax(min-content, 200px)
-minmax(max-content, 200px)
-minmax(auto, 300px)
-
- -

min および max の2つの引数を取る関数です。

- -

どちらの引数も <length>, <percentage>, <flex>, またはキーワード値 max-content, min-content, auto のうちの一つを取ります。

- -

もし min が max より大きい場合は無視され、 minmax(min,max) は min として扱われます。最大値として、 {{cssxref("flex_value","<flex>")}} 値はグリッドトラックのフレックス係数を設定します。それは min としては無効です。

- -

値

- -
-
{{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")}} で決定する) 最大の最小値を表します。
-
- -

形式文法

- -{{csssyntax}} - -

CSS プロパティ

- -

minmax() 関数は次の中で使用することができます。

- - - -

例

- -

CSS

- -
#container {
-  display: grid;
-  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
-  grid-gap: 5px;
-  box-sizing: border-box;
-  height: 200px;
-  width: 100%;
-  background-color: #8cffa0;
-  padding: 10px;
-}
-
-#container > div {
-  background-color: #8ca0ff;
-  padding: 5px;
-}
-
- -

HTML

- -
<div id="container">
-  <div>
-    Item as wide as the content, but at most 300 pixels.
-  </div>
-  <div>
-    Item with flexible width but a minimum of 200 pixels.
-  </div>
-  <div>
-    Inflexible item of 150 pixels width.
-  </div>
-</div>
- -

結果

- -

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

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - - - diff --git a/files/ja/web/css/minmax()/index.md b/files/ja/web/css/minmax()/index.md new file mode 100644 index 0000000000..ca68c8d134 --- /dev/null +++ b/files/ja/web/css/minmax()/index.md @@ -0,0 +1,215 @@ +--- +title: minmax() +slug: Web/CSS/minmax() +tags: + - CSS + - CSS Function + - CSS グリッドレイアウト + - CSS 関数 + - Experimental + - Reference + - ウェブ + - レイアウト +translation_of: Web/CSS/minmax() +--- +

minmax() は CSS の関数で、寸法の範囲を min 以上、 max 以下で定義します。 CSS グリッドで使用されます。

+ +
{{EmbedInteractiveExample("pages/css/function-minmax.html")}}
+ + + +

構文

+ +
/* <inflexible-breadth>, <track-breadth> 値 */
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+
+/* <fixed-breadth>, <track-breadth> 値 */
+minmax(200px, 1fr)
+minmax(30%, 300px)
+minmax(400px, 50%)
+minmax(50%, min-content)
+minmax(300px, max-content)
+minmax(200px, auto)
+
+/* <inflexible-breadth>, <fixed-breadth> 値 */
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(min-content, 200px)
+minmax(max-content, 200px)
+minmax(auto, 300px)
+
+ +

min および max の2つの引数を取る関数です。

+ +

どちらの引数も <length>, <percentage>, <flex>, またはキーワード値 max-content, min-content, auto のうちの一つを取ります。

+ +

もし min が max より大きい場合は無視され、 minmax(min,max) は min として扱われます。最大値として、 {{cssxref("flex_value","<flex>")}} 値はグリッドトラックのフレックス係数を設定します。それは min としては無効です。

+ +

値

+ +
+
{{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")}} で決定する) 最大の最小値を表します。
+
+ +

形式文法

+ +{{csssyntax}} + +

CSS プロパティ

+ +

minmax() 関数は次の中で使用することができます。

+ + + +

例

+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

HTML

+ +
<div id="container">
+  <div>
+    Item as wide as the content, but at most 300 pixels.
+  </div>
+  <div>
+    Item with flexible width but a minimum of 200 pixels.
+  </div>
+  <div>
+    Inflexible item of 150 pixels width.
+  </div>
+</div>
+ +

結果

+ +

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

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}}{{Spec2("CSS Grid")}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + + + diff --git a/files/ja/web/css/repeat()/index.html b/files/ja/web/css/repeat()/index.html deleted file mode 100644 index 196ea71bd0..0000000000 --- a/files/ja/web/css/repeat()/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: repeat() -slug: Web/CSS/repeat() -tags: - - CSS - - CSS Function - - CSS Grid - - Function - - Layout - - Reference - - Web -translation_of: Web/CSS/repeat() ---- -
{{cssref}}
- -

repeat() は CSS の関数で、トラックリスト内での繰り返し部分を表し、列や行の繰り返しをよりコンパクトに書くことができます。

- -

この関数は CSS グリッドのプロパティである {{cssxref("grid-template-columns")}} と {{cssxref("grid-template-rows")}} の中で使うことができます。

- -
/* <track-repeat> 値 */
-repeat(4, 1fr)
-repeat(4, [col-start] 250px [col-end])
-repeat(4, [col-start] 60% [col-end])
-repeat(4, [col-start] 1fr [col-end])
-repeat(4, [col-start] min-content [col-end])
-repeat(4, [col-start] max-content [col-end])
-repeat(4, [col-start] auto [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] auto [col-end])
-repeat(4, [col-start] min-content [col-middle] max-content [col-end])
-
-/* <auto-repeat> 値 */
-repeat(auto-fill, 250px)
-repeat(auto-fit, 250px)
-repeat(auto-fill, [col-start] 250px [col-end])
-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> 値 */
-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])
-
- -

構文

- -

値

- -
-
{{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
-
-

auto-fill と同様に動作しますが、グリッドアイテムを配置した後、空の繰り返しトラックが折りたたまれる点が異なります。空のトラックとは、フロー内のグリッドアイテムが配置されていない、またはそれをまたいで配置されているものがないトラックのことです。 (これは、すべてのトラックが空の場合、すべてのトラックが折りたたまれる結果になる可能性があります。)

- -

折り畳まれたトラックは、 0px　の固定トラックサイジング機能を1つ持っているものとして扱われ、その左右の溝も折り畳まれます。

- -

自動反復トラックの数を見つけるために、ユーザーエージェントは、ゼロによる除算を避けるために、トラックの寸法をユーザーエージェントが指定した値 (例えば 1px) に切り下げます。

-
-
- -

例

- -

repeat() を使用したグリッド列の指

- -

HTML

- -
<div id="container">
-  <div>
-    This item is 50 pixels wide.
-  </div>
-  <div>
-    Item with flexible width.
-  </div>
-  <div>
-    This item is 50 pixels wide.
-  </div>
-  <div>
-    Item with flexible width.
-  </div>
-  <div>
-    Inflexible item of 100 pixels width.
-  </div>
-</div>
- -

CSS

- -
#container {
-  display: grid;
-  grid-template-columns: repeat(2, 50px 1fr) 100px;
-  grid-gap: 5px;
-  box-sizing: border-box;
-  height: 200px;
-  width: 100%;
-  background-color: #8cffa0;
-  padding: 10px;
-}
-
-#container > div {
-  background-color: #8ca0ff;
-  padding: 5px;
-}
-
- -

結果

- -

{{EmbedLiveSample("Specifying_grid_columns_using_repeat", "100%", 200)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/repeat()/index.md b/files/ja/web/css/repeat()/index.md new file mode 100644 index 0000000000..196ea71bd0 --- /dev/null +++ b/files/ja/web/css/repeat()/index.md @@ -0,0 +1,155 @@ +--- +title: repeat() +slug: Web/CSS/repeat() +tags: + - CSS + - CSS Function + - CSS Grid + - Function + - Layout + - Reference + - Web +translation_of: Web/CSS/repeat() +--- +
{{cssref}}
+ +

repeat() は CSS の関数で、トラックリスト内での繰り返し部分を表し、列や行の繰り返しをよりコンパクトに書くことができます。

+ +

この関数は CSS グリッドのプロパティである {{cssxref("grid-template-columns")}} と {{cssxref("grid-template-rows")}} の中で使うことができます。

+ +
/* <track-repeat> 値 */
+repeat(4, 1fr)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+repeat(4, [col-start] 1fr [col-end])
+repeat(4, [col-start] min-content [col-end])
+repeat(4, [col-start] max-content [col-end])
+repeat(4, [col-start] auto [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] auto [col-end])
+repeat(4, [col-start] min-content [col-middle] max-content [col-end])
+
+/* <auto-repeat> 値 */
+repeat(auto-fill, 250px)
+repeat(auto-fit, 250px)
+repeat(auto-fill, [col-start] 250px [col-end])
+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> 値 */
+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])
+
+ +

構文

+ +

値

+ +
+
{{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
+
+

auto-fill と同様に動作しますが、グリッドアイテムを配置した後、空の繰り返しトラックが折りたたまれる点が異なります。空のトラックとは、フロー内のグリッドアイテムが配置されていない、またはそれをまたいで配置されているものがないトラックのことです。 (これは、すべてのトラックが空の場合、すべてのトラックが折りたたまれる結果になる可能性があります。)

+ +

折り畳まれたトラックは、 0px　の固定トラックサイジング機能を1つ持っているものとして扱われ、その左右の溝も折り畳まれます。

+ +

自動反復トラックの数を見つけるために、ユーザーエージェントは、ゼロによる除算を避けるために、トラックの寸法をユーザーエージェントが指定した値 (例えば 1px) に切り下げます。

+
+
+ +

例

+ +

repeat() を使用したグリッド列の指

+ +

HTML

+ +
<div id="container">
+  <div>
+    This item is 50 pixels wide.
+  </div>
+  <div>
+    Item with flexible width.
+  </div>
+  <div>
+    This item is 50 pixels wide.
+  </div>
+  <div>
+    Item with flexible width.
+  </div>
+  <div>
+    Inflexible item of 100 pixels width.
+  </div>
+</div>
+ +

CSS

+ +
#container {
+  display: grid;
+  grid-template-columns: repeat(2, 50px 1fr) 100px;
+  grid-gap: 5px;
+  box-sizing: border-box;
+  height: 200px;
+  width: 100%;
+  background-color: #8cffa0;
+  padding: 10px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  padding: 5px;
+}
+
+ +

結果

+ +

{{EmbedLiveSample("Specifying_grid_columns_using_repeat", "100%", 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("CSS Grid", "#funcdef-repeat", "repeat()")}}{{Spec2("CSS Grid")}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf