chore(i18n,learn): processed translations (#44851)
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 5a9036d038fddaf9a66b5d32
|
||||
title: grid-template-columns で列を追加する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv'
|
||||
forumTopicId: 301117
|
||||
dashedName: add-columns-with-grid-template-columns
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
グリッド要素を作成するだけでは、あまり違いはありません。 グリッド構造も定義する必要があります。 グリッドに列を追加するには、下記のようにグリッドコンテナに `grid-template-columns` プロパティを設定します:
|
||||
|
||||
```css
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: 50px 50px;
|
||||
}
|
||||
```
|
||||
|
||||
これにより、各幅 50px の 2 つの列がグリッドに表示されます。 `grid-template-columns` プロパティに与えられるパラメータの数はグリッド内の列数を示し、各パラメータの値は各列の幅を示します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
グリッドコンテナに、各幅 `100px` の列を 3 列作成してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` クラスは 3 つの `100px` の値を持つ `grid-template-columns` プロパティを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.container')?.gridTemplateColumns === '100px 100px 100px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.d1{background:LightSkyBlue;}
|
||||
.d2{background:LightSalmon;}
|
||||
.d3{background:PaleTurquoise;}
|
||||
.d4{background:LightPink;}
|
||||
.d5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="d1">1</div>
|
||||
<div class="d2">2</div>
|
||||
<div class="d3">3</div>
|
||||
<div class="d4">4</div>
|
||||
<div class="d5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-template-columns: 100px 100px 100px;}</style>
|
||||
```
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d37
|
||||
title: grid-gap で隙間をすばやく追加する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv'
|
||||
forumTopicId: 301118
|
||||
dashedName: add-gaps-faster-with-grid-gap
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`grid-gap` は `grid-row-gap` と `grid-column-gap` の一括指定プロパティで、これまでの 2 つのチャレンジで使ったものがより便利になります。 `grid-gap` が値を 1 つ持つ場合、すべての行と列の間に隙間が作成されます。 ただし、値が 2 つある場合は、1 つ目の値で行の隙間を設定し、2 番目の値で列の隙間を設定します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`grid-gap` を使用して、行間に `10px` の隙間を、列間に `20px` の隙間を作成してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` クラスは、`grid-gap` プロパティを持ち、行間に `10px` の隙間、列間に `20px` の隙間を作成する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.d1{background:LightSkyBlue;}
|
||||
.d2{background:LightSalmon;}
|
||||
.d3{background:PaleTurquoise;}
|
||||
.d4{background:LightPink;}
|
||||
.d5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="d1">1</div>
|
||||
<div class="d2">2</div>
|
||||
<div class="d3">3</div>
|
||||
<div class="d4">4</div>
|
||||
<div class="d5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-gap: 10px 20px;}</style>
|
||||
```
|
||||
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 5a9036e138fddaf9a66b5d33
|
||||
title: grid-template-rows で行を追加する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cbp9Pua'
|
||||
forumTopicId: 301119
|
||||
dashedName: add-rows-with-grid-template-rows
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジで作成したグリッドは、行数を自動的に設定します。 手動で行を調整するには、前回のチャレンジで `grid-template-columns` を使用したのと同じ方法で `grid-template-rows` プロパティを使用します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
グリッドにそれぞれ高さ `50px` の行を 2 行追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` クラスは 2 つの `50px` の値を持つ `grid-template-rows`プロパティを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.d1{background:LightSkyBlue;}
|
||||
.d2{background:LightSalmon;}
|
||||
.d3{background:PaleTurquoise;}
|
||||
.d4{background:LightPink;}
|
||||
.d5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 100px 100px 100px;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="d1">1</div>
|
||||
<div class="d2">2</div>
|
||||
<div class="d3">3</div>
|
||||
<div class="d4">4</div>
|
||||
<div class="d5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-template-rows: 50px 50px;}</style>
|
||||
```
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 5a90376038fddaf9a66b5d3c
|
||||
title: justify-items を使用して全てのアイテムを水平に配置する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cJbpECn'
|
||||
forumTopicId: 301120
|
||||
dashedName: align-all-items-horizontally-using-justify-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS グリッドの全てのアイテムを同じ配置にしたい場合があります。 以前に学んだプロパティを使用して個別に整列させることもできますし、グリッドコンテナに `justify-items` を使用することで、一括で水平方向に揃えることもできます。 このプロパティは、前の 2 つのチャレンジで学んだものと同じ値を全て利用することができます。違いはグリッド内の**全ての**項目を目的の位置に移動させることです。
|
||||
|
||||
# --instructions--
|
||||
|
||||
このプロパティを使用して、すべてのアイテムを水平方向に中央揃えにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` クラスは `center` の値を持つ `justify-items` プロパティを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {justify-items: center;}</style>
|
||||
```
|
||||
@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 5a94fdf869fb03452672e45b
|
||||
title: align-items を使用して全てのアイテムを垂直に配置する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/ckzPeUv'
|
||||
forumTopicId: 301121
|
||||
dashedName: align-all-items-vertically-using-align-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
グリッドコンテナに `align-items` プロパティを使用すると、グリッド内のすべてのアイテムが垂直方向に整列します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
これを使用して、全てのアイテムを各セルの下端に移動させてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` クラスは `end` の値を持つ `align-items` プロパティを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {align-items: end;}</style>
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 5a90374338fddaf9a66b5d3a
|
||||
title: justify-self を使用してアイテムを水平に配置する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cJbpKHq'
|
||||
forumTopicId: 301122
|
||||
dashedName: align-an-item-horizontally-using-justify-self
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS グリッドでは、各アイテムのコンテンツは<dfn>セル</dfn>と呼ばれるボックス内に配置されます。 グリッドアイテムの `justify-self` プロパティを使用して、セル内でのコンテンツの水平方向の位置を揃えることができます。 デフォルトでは、このプロパティの値は `stretch` なので、コンテンツはセル全体の幅を埋めるようになります。 この CSS グリッドプロパティは他の値も受け付けます:
|
||||
|
||||
`start`: セルの左側にコンテンツを揃えます。
|
||||
|
||||
`center`: セルの中央にコンテンツを揃えます。
|
||||
|
||||
`end`: セルの右側にコンテンツを揃えます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`justify-self` プロパティを使用して、`item2` クラスのアイテムを中央に配置してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item2` クラスは `center` の値を持つ `justify-self` プロパティを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background: LightSkyBlue;}
|
||||
|
||||
.item2 {
|
||||
background: LightSalmon;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.item2 {justify-self: center;}</style>
|
||||
```
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 5a90375238fddaf9a66b5d3b
|
||||
title: align-self を使用してアイテムを垂直に配置する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cmzd4fz'
|
||||
forumTopicId: 301123
|
||||
dashedName: align-an-item-vertically-using-align-self
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
アイテムを水平方向に配置するのと同様に、垂直に配置する方法もあります。 そのためには、アイテムの `align-self` プロパティを使用します。 このプロパティは前回のチャレンジで説明した `justify-self` と同じ値をすべて受け付けることができます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
クラス `item3` のアイテムを垂直方向の `end` (下端) に配置してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item3` クラスは `end` の値を持つ `align-self` プロパティを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
|
||||
.item3 {
|
||||
background: PaleTurquoise;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.item3 {align-self: end;}</style>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d35
|
||||
title: grid-column-gap を使用して列の隙間を作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD'
|
||||
forumTopicId: 301124
|
||||
dashedName: create-a-column-gap-using-grid-column-gap
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
これまでに作成したグリッドでは、列はすべて互いにくっついています。 場合によっては、列の間に隙間が必要になります。 列の間に隙間を作るためには、`grid-column-gap` プロパティを次のように使用します:
|
||||
|
||||
```css
|
||||
grid-column-gap: 10px;
|
||||
```
|
||||
|
||||
これはすべての列の間に 10px の空白を作成します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
グリッドの列に `20px` の隙間を作成してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` クラスは `20px` の値を持つ `grid-column-gap` プロパティを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.d1{background:LightSkyBlue;}
|
||||
.d2{background:LightSalmon;}
|
||||
.d3{background:PaleTurquoise;}
|
||||
.d4{background:LightPink;}
|
||||
.d5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="d1">1</div>
|
||||
<div class="d2">2</div>
|
||||
<div class="d3">3</div>
|
||||
<div class="d4">4</div>
|
||||
<div class="d5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-column-gap: 20px;}</style>
|
||||
```
|
||||
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d36
|
||||
title: grid-row-gap を使用して行の隙間を作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cPbJ2Cv'
|
||||
forumTopicId: 301125
|
||||
dashedName: create-a-row-gap-using-grid-row-gap
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジで列の間に隙間を追加したのと同様に、`grid-row-gap` を使用してグリッドの行間にギャップを追加することができます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
行に高さ `5px` の隙間を追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` クラスは `5px` の値を持つ `grid-row-gap` プロパティを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.d1{background:LightSkyBlue;}
|
||||
.d2{background:LightSalmon;}
|
||||
.d3{background:PaleTurquoise;}
|
||||
.d4{background:LightPink;}
|
||||
.d5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="d1">1</div>
|
||||
<div class="d2">2</div>
|
||||
<div class="d3">3</div>
|
||||
<div class="d4">4</div>
|
||||
<div class="d5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-row-gap: 5px;}</style>
|
||||
```
|
||||
@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 5a94fe5469fb03452672e461
|
||||
title: auto-fill を使用して柔軟なレイアウトを作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
|
||||
forumTopicId: 301126
|
||||
dashedName: create-flexible-layouts-using-auto-fill
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
repeat 関数には <dfn>auto-fill</dfn> というオプションがあります。 これにより、希望するサイズの行または列を、コンテナのサイズに応じて可能な限り多く自動的に挿入できます。 以下のように `auto-fill` と `minmax` を組み合わせて柔軟なレイアウトが作成できます:
|
||||
|
||||
```css
|
||||
repeat(auto-fill, minmax(60px, 1fr));
|
||||
```
|
||||
|
||||
コンテナのサイズが変更されると、この設定では 60px の列が挿入され続け、次の列を挿入できるようになるまで引き伸ばし続けます。 **注:** コンテナがすべてのアイテムを 1 行に収められない場合、アイテムは新しい行に移動します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
1 つ目のグリッドで `auto-fill` と `repeat` を使用して、最小幅 `60px` 最大幅 `1fr` の列でグリッドを埋めます。 次に、プレビューのサイズを変更して、auto-fill の動作を確認してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` クラスは `repeat` と `auto-fill` が設定された `grid-template-columns` プロパティを持ち、最小幅が `60px` で最大幅が `1fr` の列でグリッドを埋めるようにします。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* Only change code below this line */
|
||||
|
||||
grid-template-columns: repeat(3, minmax(60px, 1fr));
|
||||
|
||||
/* Only change code above this line */
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.container2 {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
background: Silver;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(60px, 1fr));
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
<div class="container2">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* Only change code below this line */
|
||||
|
||||
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
|
||||
|
||||
/* Only change code above this line */
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.container2 {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
background: Silver;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(60px, 1fr));
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
<div class="container2">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 5a94fe6269fb03452672e462
|
||||
title: auto-fit を使用して柔軟なレイアウトを作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
|
||||
forumTopicId: 301127
|
||||
dashedName: create-flexible-layouts-using-auto-fit
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`auto-fit` は `auto-fill` とほぼ同じ動作をします。 唯一の違いは、コンテナのサイズがすべてのアイテムを足し合わせたサイズを超える場合に、`auto-fill` は空の行や列を挿入し続けてアイテムを横に寄せるのに対し、`auto-fit` は空の行や列を押し潰しアイテムをコンテナのサイズに合わせて引き伸ばします。
|
||||
|
||||
**注:** コンテナがすべてのアイテムを 1 行に収められない場合、アイテムは新しい行に移動します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
2 つ目のグリッドで `auto-fit` と `repeat` を使用して、最小幅 `60px` 最大幅 `1fr` の列でグリッドを埋めます。 その後、プレビューの表示サイズを変更して違いを確認してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container2` クラスは `repeat` と `auto-fit` が設定された `grid-template-columns` プロパティを持ち、最小幅が `60px` で最大幅が `1fr` の列でグリッドを埋めるようにします。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container2\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
|
||||
.container2 {
|
||||
font-size: 40px;
|
||||
min-height: 100px;
|
||||
width: 100%;
|
||||
background: Silver;
|
||||
display: grid;
|
||||
/* Only change code below this line */
|
||||
|
||||
grid-template-columns: repeat(3, minmax(60px, 1fr));
|
||||
|
||||
/* Only change code above this line */
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
<div class="container2">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}</style>
|
||||
```
|
||||
@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 5a94fe8569fb03452672e464
|
||||
title: グリッド内にグリッドを作成する
|
||||
challengeType: 0
|
||||
forumTopicId: 301128
|
||||
dashedName: create-grids-within-grids
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
要素をグリッドに変換すると、その直接の子要素の動作にのみ影響します。 つまり、直接の子要素をグリッドに変換することで、グリッド内にグリッドを作成することができます。
|
||||
|
||||
例えば、`item3` クラスの要素 に `display` と `grid-template-columns` プロパティを設定すると、グリッド内にグリッドを作成できます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`item3` クラスの要素を、`display` と `grid-template-columns` を使用して、幅が `auto` と `1fr` の 2 列のグリッドに変換します。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item3` クラスは `grid-template-columns` プロパティを持ち、値に `auto` と `1fr` を設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`item3` クラスは `grid` の値を持つ `display` プロパティを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.container {
|
||||
font-size: 1.5em;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-gap: 10px;
|
||||
grid-template-areas:
|
||||
"advert header"
|
||||
"advert content"
|
||||
"advert footer";
|
||||
}
|
||||
.item1 {
|
||||
background: LightSkyBlue;
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
background: LightSalmon;
|
||||
grid-area: advert;
|
||||
}
|
||||
|
||||
.item3 {
|
||||
background: PaleTurquoise;
|
||||
grid-area: content;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
.item4 {
|
||||
background: lightpink;
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
.itemOne {
|
||||
background: PaleGreen;
|
||||
}
|
||||
|
||||
.itemTwo {
|
||||
background: BlanchedAlmond;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">header</div>
|
||||
<div class="item2">advert</div>
|
||||
<div class="item3">
|
||||
<div class="itemOne">paragraph1</div>
|
||||
<div class="itemTwo">paragraph2</div>
|
||||
</div>
|
||||
<div class="item4">footer</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.item3 {grid-template-columns: auto 1fr; display: grid;}</style>
|
||||
```
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 5a858944d96184f06fd60d61
|
||||
title: 最初の CSS グリッドを作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4'
|
||||
forumTopicId: 301129
|
||||
dashedName: create-your-first-css-grid
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`display` プロパティを `grid` に設定することで、任意の HTML 要素をグリッドコンテナに変換します。 これにより、CSS グリッドに関連する他のすべてのプロパティを使用することができます。
|
||||
|
||||
**注:** CSS グリッドでは、親要素を <dfn>container</dfn>、子要素を <dfn>items</dfn> と呼びます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`container` クラスの div の display プロパティを `grid` に変更してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` クラスは `grid` の値を持つ `display` プロパティを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.d1{background:LightSkyBlue;}
|
||||
.d2{background:LightSalmon;}
|
||||
.d3{background:PaleTurquoise;}
|
||||
.d4{background:LightPink;}
|
||||
.d5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="d1">1</div>
|
||||
<div class="d2">2</div>
|
||||
<div class="d3">3</div>
|
||||
<div class="d4">4</div>
|
||||
<div class="d5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {display: grid;}</style>
|
||||
```
|
||||
@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 5a94fe0569fb03452672e45c
|
||||
title: グリッドをエリアテンプレートに分割する
|
||||
challengeType: 0
|
||||
forumTopicId: 301130
|
||||
dashedName: divide-the-grid-into-an-area-template
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
グリッドのセルを<dfn>エリア (area)</dfn> にまとめてグループ化し、そのエリアにカスタム名を付けることができます。 次のようにコンテナで `grid-template-areas` を使用してください:
|
||||
|
||||
```css
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"advert content content"
|
||||
"advert footer footer";
|
||||
```
|
||||
|
||||
上記のコードは、グリッドのセルを `header`, `advert`, `content`, `footer` の 4 つのエリアにグループ化します。 すべての単語はセルを表し、引用符のすべてのペアは行を表します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
テンプレートを変更して、 `footer` エリアが一番下の行全体に広がるようにしてください。 現時点ではエリアを定義しても視覚的な効果はありません。 後から、このエリアがどのように働くのかを、アイテムにエリアを使用させることで確認します。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` クラスは、例のような `grid-template-areas` プロパティを持つ必要がありますが、`footer` エリアは下の行全体に広がるようにしてください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(
|
||||
/.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
grid-template-areas:
|
||||
/* Only change code below this line */
|
||||
"header header header"
|
||||
"advert content content"
|
||||
"advert footer footer";
|
||||
/* Only change code above this line */
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"advert content content"
|
||||
"footer footer footer";
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 5a94fe4469fb03452672e460
|
||||
title: minmax 関数を使用してアイテムのサイズを制限する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cD97RTv'
|
||||
forumTopicId: 301131
|
||||
dashedName: limit-item-size-using-the-minmax-function
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`grid-template-columns` と `grid-template-rows` と共に使われる組み込み関数にはもう一つ、`minmax` があります。 これはグリッドコンテナのサイズが変更されたときに、アイテムのサイズを制限するために使用されます。 これを行うには、アイテムの許容サイズ範囲を指定する必要があります。 例:
|
||||
|
||||
```css
|
||||
grid-template-columns: 100px minmax(50px, 200px);
|
||||
```
|
||||
|
||||
上記のコードでは、 `grid-template-columns` は 2 つの列を作成するように設定されています。1 列目は幅 100px、2 列目は最小幅 50px、最大幅 200px です。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`minmax` 関数を使って、`repeat` 関数内の列サイズ `1fr` を最小幅 `90px`、最大幅 `1fr` に置き換えてください。プレビューパネルをリサイズして効果を確認しましょう。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` クラスは、`grid-template-columns` プロパティを持ち、最小幅 `90px`、最大幅 `1fr` で 3 列を繰り返すように設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* Only change code below this line */
|
||||
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
||||
/* Only change code above this line */
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-template-columns: repeat(3, minmax(90px, 1fr));}</style>
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 5a94fe1369fb03452672e45d
|
||||
title: grid-area プロパティを使用してグリッドエリアに項目を配置する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV'
|
||||
forumTopicId: 301132
|
||||
dashedName: place-items-in-grid-areas-using-the-grid-area-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジで示したように、グリッドコンテナ用のエリアテンプレートを作成した後、名前を参照してカスタムエリアにアイテムを配置することができます。 これを行うためには、アイテムの `grid-area` プロパティを使用します。
|
||||
|
||||
```css
|
||||
.item1 {
|
||||
grid-area: header;
|
||||
}
|
||||
```
|
||||
|
||||
これにより、`item1` クラスを `header` という名前のエリアに移動させることができます。 この場合、行全体が header エリアと名付けられているため、アイテムは一番上の行全体を使用します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`grid-area` プロパティを使用して、`footer` 領域に `item5` クラスの要素を配置してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item5` クラスは `footer` の値を持つ `grid-area` プロパティを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"advert content content"
|
||||
"footer footer footer";
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.item5 {grid-area: footer;}</style>
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 5a94fe3669fb03452672e45f
|
||||
title: repeat 関数を使って繰り返しの記述を減らす
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR'
|
||||
forumTopicId: 301133
|
||||
dashedName: reduce-repetition-using-the-repeat-function
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
グリッドの構造を定義するために `grid-template-columns` や `grid-template-rows` を使用した際、作成する各行または列の値を入力しました。
|
||||
|
||||
たとえば、100 行の同じ高さのグリッドを作成したいとします。 100 個の値を個別に挿入するのはあまり実用的ではありません。 幸い、より良い方法があります。`repeat` 関数を使用して、列や行を繰り返す回数を指定することです。回数の後にコンマと繰り返したい値を続けます。
|
||||
|
||||
これは、各行が高さ 50px の 100 行のグリッドを作成する例です。
|
||||
|
||||
```css
|
||||
grid-template-rows: repeat(100, 50px);
|
||||
```
|
||||
|
||||
また、グリッド構造を定義する際に、repeat 関数を使用して複数の値を繰り返したり、関数を他の値に挿入したりすることもできます。 次のようになります:
|
||||
|
||||
```css
|
||||
grid-template-columns: repeat(2, 1fr 50px) 20px;
|
||||
```
|
||||
|
||||
これは以下を意味します:
|
||||
|
||||
```css
|
||||
grid-template-columns: 1fr 50px 1fr 50px 20px;
|
||||
```
|
||||
|
||||
**注:** `1fr 50px` が 2 回繰り返されたあとに 20px が続きます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`repeat` を使用して、`grid-template-columns` プロパティから繰り返しの記述を除去してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` クラスは、`grid-template-columns` プロパティを持ち、`1fr` の幅で 3 列を繰り返すように設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
.item5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* Only change code below this line */
|
||||
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
|
||||
/* Only change code above this line */
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-template-columns: repeat(3, 1fr);}</style>
|
||||
```
|
||||
@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 5a9036ee38fddaf9a66b5d34
|
||||
title: CSS グリッド単位を使用して列と行のサイズを変更する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cvE8phd'
|
||||
forumTopicId: 301134
|
||||
dashedName: use-css-grid-units-to-change-the-size-of-columns-and-rows
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS グリッドでは `px` や `em` のような絶対単位および相対単位を使用して、行と列のサイズを定義できます。 以下の単位も使用できます:
|
||||
|
||||
`fr`: 列または行を利用可能な空間に対する割合で設定します。
|
||||
|
||||
`auto`: 列または行をコンテンツの幅や高さに自動的に設定します。
|
||||
|
||||
`%`: 列または行をコンテナのパーセント幅に調整します。
|
||||
|
||||
プレビューに表示されている出力を生成するコードは次のとおりです:
|
||||
|
||||
```css
|
||||
grid-template-columns: auto 50px 10% 2fr 1fr;
|
||||
```
|
||||
|
||||
このスニペットは 5 列を作成します。 1 列目はコンテンツと同じ幅、2 列目は 50px、3 列目はコンテナの 10％ になります。最後の 2 列については、残りのスペースを 3 分割して、2 つを 4 列目に、1 つを 5 列目に割り当てています。
|
||||
|
||||
# --instructions--
|
||||
|
||||
幅が 1fr、100px、2fr の 3 列のグリッドを作成してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` クラスは幅が `1fr, 100px, and 2fr` の 3 列を生成する `grid-template-columns` プロパティを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.d1{background:LightSkyBlue;}
|
||||
.d2{background:LightSalmon;}
|
||||
.d3{background:PaleTurquoise;}
|
||||
.d4{background:LightPink;}
|
||||
.d5{background:PaleGreen;}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
/* Only change code below this line */
|
||||
|
||||
grid-template-columns: auto 50px 10% 2fr 1fr;
|
||||
|
||||
/* Only change code above this line */
|
||||
grid-template-rows: 50px 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="d1">1</div>
|
||||
<div class="d2">2</div>
|
||||
<div class="d3">3</div>
|
||||
<div class="d4">4</div>
|
||||
<div class="d5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.container {grid-template-columns: 1fr 100px 2fr;}</style>
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 5a94fe2669fb03452672e45e
|
||||
title: エリアテンプレートを作成せずに grid-area を使用する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c6N7VhK'
|
||||
forumTopicId: 301135
|
||||
dashedName: use-grid-area-without-creating-an-areas-template
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジで学んだ `grid-area` プロパティは、別の方法でも使用できます。 参照できるエリアテンプレートがグリッドにない場合は、 アイテムを配置するためのエリアをその場で作成できます。
|
||||
|
||||
```css
|
||||
item1 { grid-area: 1/1/2/4; }
|
||||
```
|
||||
|
||||
これは、どのエリアにこのアイテムがあるかを定義するために、以前に学んだグリッド線の番号を使用しています。 上の例における数値は以下の値を表しています。
|
||||
|
||||
```css
|
||||
grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
|
||||
```
|
||||
|
||||
そのため、例におけるアイテムは 1 番目から 2 番目の線の間にある行と、1 番目から 4 番目の線の間にある列を消費します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`grid-area` プロパティを使って、`item5` クラスの要素を 3 番目から 4 番目の水平線と、1 番目から 4 番目の垂直線の間に配置してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item5` クラスは `grid-area` を持ち、これは 3 番目から 4 番目の水平線と 1 番目から 4 番目の垂直線の間のエリア全体を埋める必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>.item5 {grid-area: 3/1/4/4;}</style>
|
||||
```
|
||||
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 5a90372638fddaf9a66b5d38
|
||||
title: grid-column を使用してスペースを制御する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr'
|
||||
forumTopicId: 301136
|
||||
dashedName: use-grid-column-to-control-spacing
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ここまで説明したすべてのプロパティはグリッドコンテナ用です。 `grid-column` プロパティは、グリッドアイテム自身に使用する初めてのプロパティです。
|
||||
|
||||
グリッドを作成する仮想の水平線と垂直線は<dfn>グリッド線 (lines)</dfn> と呼ばれます。 これらの線には順番が付けられており、グリッドの左上角の 1 から始まり、列は右に、行は下に向かって数えます。
|
||||
|
||||
これが 3x3 のグリッド線の様子です:
|
||||
|
||||
<div style='position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;'><p style='left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;'>列のグリッド線</p><p style='left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>1</p><p style='left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>2</p><p style='left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>3</p><p style='left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>4</p><p style='left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;'>行のグリッド線</p><p style='left:-10%;top:-10%;font-size:130%;position:absolute;'>1</p><p style='left:-10%;top:21%;font-size:130%;position:absolute;'>2</p><p style='left:-10%;top:53%;font-size:130%;position:absolute;'>3</p><p style='left:-10%;top:85%;font-size:130%;position:absolute;'>4</p><div style='left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;'></div></div>
|
||||
|
||||
あるアイテムが消費する列数を制御するには `grid-column` プロパティを、アイテムを開始および終了させたい線の番号とともに使用します。
|
||||
|
||||
例:
|
||||
|
||||
```css
|
||||
grid-column: 1 / 3;
|
||||
```
|
||||
|
||||
これにより、アイテムはグリッドの 1 番左の垂直線から始まり、グリッドの 3 番目の線まで拡張し、2 つの列を消費します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
クラス `item5` のアイテムがグリッドの最後の 2 列を消費するようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item5` クラスが `grid-column` プロパティを持つようにしてください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeWhiteSpace($('style').text())
|
||||
.match(/\.item5{.*grid-column:.*}/g)
|
||||
);
|
||||
```
|
||||
|
||||
`item5` クラスの `grid-column` プロパティは、グリッドの最後の 2 列を消費するように設定される必要があります。
|
||||
|
||||
```js
|
||||
const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
|
||||
const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd;
|
||||
const result = colStart.toString() + colEnd.toString();
|
||||
const correctResults = [
|
||||
'24',
|
||||
'2-1',
|
||||
'2span 2',
|
||||
'2span2',
|
||||
'span 2-1',
|
||||
'-12',
|
||||
'span 2span 2',
|
||||
'span 2auto',
|
||||
'autospan 2'
|
||||
];
|
||||
assert(correctResults.includes(result));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
grid-column: 2 / 4;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 5a90373638fddaf9a66b5d39
|
||||
title: grid-row を使用してスペースを制御する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/c9WBLU4'
|
||||
forumTopicId: 301137
|
||||
dashedName: use-grid-row-to-control-spacing
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
もちろん、列と同じように複数の行をアイテムに消費させることもできます。 グリッドアイテムに `grid-row` プロパティを使用して、アイテムを開始・終了させたい水平方向の線を定義します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`item5` クラスの要素が最後の 2 行を消費するようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`item5` クラスが `grid-row` プロパティを持つようにしてください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-row:.*}/g)
|
||||
);
|
||||
```
|
||||
|
||||
`item5` クラスの `grid-row` プロパティは、グリッドの最後の 2 行を消費するように設定される必要があります。
|
||||
|
||||
```js
|
||||
const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
|
||||
const rowEnd = getComputedStyle($('.item5')[0]).gridRowEnd;
|
||||
const result = rowStart.toString() + rowEnd.toString();
|
||||
const correctResults = [
|
||||
'24',
|
||||
'2-1',
|
||||
'2span 2',
|
||||
'2span2',
|
||||
'span 2-1',
|
||||
'-12',
|
||||
'span 2span 2',
|
||||
'span 2auto',
|
||||
'autospan 2'
|
||||
];
|
||||
assert(correctResults.includes(result));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
grid-column: 2 / 4;
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1{background:LightSkyBlue;}
|
||||
.item2{background:LightSalmon;}
|
||||
.item3{background:PaleTurquoise;}
|
||||
.item4{background:LightPink;}
|
||||
|
||||
.item5 {
|
||||
background: PaleGreen;
|
||||
grid-column: 2 / 4;
|
||||
grid-row: 2 / 4;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 40px;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">1</div>
|
||||
<div class="item2">2</div>
|
||||
<div class="item3">3</div>
|
||||
<div class="item4">4</div>
|
||||
<div class="item5">5</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,174 @@
|
||||
---
|
||||
id: 5a94fe7769fb03452672e463
|
||||
title: メディアクエリを使用してレスポンシブレイアウトを作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pByETK/cMbqeHk'
|
||||
forumTopicId: 301138
|
||||
dashedName: use-media-queries-to-create-responsive-layouts
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS グリッドは、メディアクエリを使ってグリッドエリアの再配置、グリッドの大きさの変更、アイテムの配置変更などを行うことで、サイトをよりレスポンシブにするための手軽な方法です。
|
||||
|
||||
このプレビューでは、ビューポート幅が 300px 以上の場合、列数が 1 列から 2 列に変更されます。 そして、広告 (advert) エリアが左の列全体を占有します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
ビューポート幅が `400px` 以上の場合にヘッダーエリアが一番上の行全体を占有し、フッターエリアが一番下の行全体を占有するようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
ビューポートが `400px` 以上の場合、`container` クラスは `grid-template-areas` プロパティを持ち、ヘッダーとフッターの領域がそれぞれ一番上と一番下の行を占め、広告とコンテンツが中央行の左列と右列を占めるようにします。
|
||||
|
||||
```js
|
||||
assert(
|
||||
__helpers
|
||||
.removeCssComments(code)
|
||||
.match(
|
||||
/@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1 {
|
||||
background: LightSkyBlue;
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
background: LightSalmon;
|
||||
grid-area: advert;
|
||||
}
|
||||
|
||||
.item3 {
|
||||
background: PaleTurquoise;
|
||||
grid-area: content;
|
||||
}
|
||||
|
||||
.item4 {
|
||||
background: lightpink;
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 1.5em;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 50px auto 1fr auto;
|
||||
grid-gap: 10px;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"advert"
|
||||
"content"
|
||||
"footer";
|
||||
}
|
||||
|
||||
@media (min-width: 300px){
|
||||
.container{
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-areas:
|
||||
"advert header"
|
||||
"advert content"
|
||||
"advert footer";
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 400px){
|
||||
.container{
|
||||
grid-template-areas:
|
||||
/* Only change code below this line */
|
||||
"advert header"
|
||||
"advert content"
|
||||
"advert footer";
|
||||
/* Only change code above this line */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">header</div>
|
||||
<div class="item2">advert</div>
|
||||
<div class="item3">content</div>
|
||||
<div class="item4">footer</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.item1 {
|
||||
background: LightSkyBlue;
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.item2 {
|
||||
background: LightSalmon;
|
||||
grid-area: advert;
|
||||
}
|
||||
|
||||
.item3 {
|
||||
background: PaleTurquoise;
|
||||
grid-area: content;
|
||||
}
|
||||
|
||||
.item4 {
|
||||
background: lightpink;
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-size: 1.5em;
|
||||
min-height: 300px;
|
||||
width: 100%;
|
||||
background: LightGray;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 50px auto 1fr auto;
|
||||
grid-gap: 10px;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
"advert"
|
||||
"content"
|
||||
"footer";
|
||||
}
|
||||
|
||||
@media (min-width: 300px){
|
||||
.container{
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-areas:
|
||||
"advert header"
|
||||
"advert content"
|
||||
"advert footer";
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 400px){
|
||||
.container{
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"advert content"
|
||||
"footer footer";
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<div class="item1">header</div>
|
||||
<div class="item2">advert</div>
|
||||
<div class="item3">content</div>
|
||||
<div class="item4">footer</div>
|
||||
</div>
|
||||
```
|
||||
Reference in New Issue
Block a user