From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/repeat()/index.html | 157 +++++++++++++++++++++++++++++++++++ 1 file changed, 157 insertions(+) create mode 100644 files/ja/web/css/repeat()/index.html (limited to 'files/ja/web/css/repeat()') diff --git a/files/ja/web/css/repeat()/index.html b/files/ja/web/css/repeat()/index.html new file mode 100644 index 0000000000..5a247377a9 --- /dev/null +++ b/files/ja/web/css/repeat()/index.html @@ -0,0 +1,157 @@ +--- +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