chore(i18n,learn): processed translations (#44851)
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,154 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abe
|
||||
title: カードのような要素にボックスシャドウを追加する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVZdUd'
|
||||
forumTopicId: 301031
|
||||
dashedName: add-a-box-shadow-to-a-card-like-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`box-shadow` プロパティは要素に 1 つ以上の影をつけます。
|
||||
|
||||
`box-shadow` プロパティは以下の値をとります。
|
||||
|
||||
<ul>
|
||||
<li><code>offset-x</code> (要素から水平方向に影を押しやる距離),</li>
|
||||
<li><code>offset-y</code> (要素から垂直方向に影を押しやる距離),</li>
|
||||
<li><code>blur-radius</code> (ぼかしの半径),</li>
|
||||
<li><code>spread-radius</code> (影の広がりの半径) と</li>
|
||||
<li><code>color</code> を、この順で。</li>
|
||||
</ul>
|
||||
|
||||
`blur-radius` と `spread-radius` の値は省略可能です。
|
||||
|
||||
カンマで各 `box-shadow` 要素のプロパティを区切ることで、複数の box-shadow を作成できます。
|
||||
|
||||
下記は、複数の影を作る CSS の例です。それぞれの影には、ほとんど透明な黒に多少のぼかしを加えています。
|
||||
|
||||
```css
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
要素に `thumbnail` の ID が追加されました。 このセレクターと、上記で例示した CSS の値を使用して、カードに `box-shadow` を追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`thumbnail` という id に `box-shadow` プロパティを追加する必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
|
||||
```
|
||||
|
||||
指定された CSS を `box-shadow` の値に使用してください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abc
|
||||
title: テキストの background-color プロパティを調整する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDqwA6'
|
||||
forumTopicId: 301032
|
||||
dashedName: adjust-the-background-color-property-of-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前面のテキストを読みやすくするには、全体的な背景やテキストの色を調整する代わりに、強調したいテキストを持つ要素に `background-color` を追加することもできます。 このチャレンジでは `hex` (16進数) コードや通常の `rgb()` ではなく、`rgba()` を使います。
|
||||
|
||||
<blockquote>rgba は以下の略です:<br> r = red<br> g = green<br> b = blue<br> a = alpha/不透明度のレベル</blockquote>
|
||||
|
||||
RGB 値は 0～255 の範囲の値を取ることができます。 アルファ値は、完全に不透明である 1 から、完全に透明な 0 までの範囲の値を取ることができます。 `rgba()` を使うと不透明度を調整できるため、このチャレンジでの使い方に最適です。 背景を完全にブロックしなくても良いということです。
|
||||
|
||||
このチャレンジでは `background-color: rgba(45, 45, 45, 0.1)` を使用します。 不透明度が 0.1 と低いので、ほぼ透明な濃い灰色になります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
テキストをより目立たせるために、`h4` 要素の `background-color` を与えられた `rgba()` の値に設定してください。
|
||||
|
||||
更に `h4` について、`height` プロパティを削除し、10px の `padding` を追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h4` 要素に `background-color` プロパティを追加し `rgba(45, 45, 45, 0.1)` に設定してください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
/(background-color|background):rgba\(45,45,45,0?\.1\)(;?}|;)/gi.test(
|
||||
code.replace(/\s/g, '')
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
`h4` 要素に `padding` プロパティを追加し、10 ピクセルに設定してください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h4').css('padding-top') == '10px' &&
|
||||
$('h4').css('padding-right') == '10px' &&
|
||||
$('h4').css('padding-bottom') == '10px' &&
|
||||
$('h4').css('padding-left') == '10px'
|
||||
);
|
||||
```
|
||||
|
||||
`h4` 要素の `height` プロパティを削除する必要があります。
|
||||
|
||||
```js
|
||||
assert(!($('h4').css('height') == '25px'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,130 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad3
|
||||
title: 様々な要素の色を補色に調整する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cWmPpud'
|
||||
forumTopicId: 301033
|
||||
dashedName: adjust-the-color-of-various-elements-to-complementary-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
補色のチャレンジでは、色相環の反対側にある色を並べて配置するとお互いがより鮮やかに見えることを示しました。 しかし、強い視覚的コントラストはウェブサイト上で過度に使われると目障りになることもあり、補色の背景色の上にテキストを配置すると読み辛くなることもあります。 実際には、いずれかの色が通常は支配的であり、ページ上の特定のコンテンツに視覚的な注意を引くために補色が使われます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
このページではティール (青緑)(`#09A7A1`) を支配的に使い、補色であるオレンジ (`#FF790E`) を、サインアップボタンを視覚的にハイライトするために使います。 `header` と `footer` の `background-color` をどちらも黒からティールに変更してください。 次に、`h2` のテキストの `color` もティールに変更してください。 最後に、`button` の `background-color` をオレンジに変更してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`header` 要素は `background-color` を #09A7A1 に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert($('header').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
`footer` 要素は `background-color` を #09A7A1 に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
`h2` 要素は `color` を #09A7A1 に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').css('color') == 'rgb(9, 167, 161)');
|
||||
```
|
||||
|
||||
`button` 要素は `background-color` を #FF790E に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert($('button').css('background-color') == 'rgb(255, 121, 14)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
header {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.25em;
|
||||
}
|
||||
h2 {
|
||||
color: black;
|
||||
}
|
||||
button {
|
||||
background-color: white;
|
||||
}
|
||||
footer {
|
||||
background-color: black;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Machine Learning in the Kitchen</h2>
|
||||
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Bisection Vegetable Chopping</h2>
|
||||
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
</main>
|
||||
<br>
|
||||
<footer>© 2018 FCC Kitchen</footer>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
header {
|
||||
background-color: #09A7A1;
|
||||
color: white;
|
||||
padding: 0.25em;
|
||||
}
|
||||
h2 {
|
||||
color: #09A7A1;
|
||||
}
|
||||
button {
|
||||
background-color: #FF790E;
|
||||
}
|
||||
footer {
|
||||
background-color: #09A7A1;
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
</header>
|
||||
<main>
|
||||
<article>
|
||||
<h2>Machine Learning in the Kitchen</h2>
|
||||
<p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
<article>
|
||||
<h2>Bisection Vegetable Chopping</h2>
|
||||
<p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
|
||||
<button>Sign Up</button>
|
||||
</article>
|
||||
</main>
|
||||
<br>
|
||||
<footer>© 2018 FCC Kitchen</footer>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab5
|
||||
title: height プロパティで要素の高さを調整する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDaDTN'
|
||||
forumTopicId: 301034
|
||||
dashedName: adjust-the-height-of-an-element-using-the-height-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`width` プロパティと同様に、CSSでは `height` プロパティを使用して要素の高さを指定できます。 下記は画像の高さを 20px に変更する例です:
|
||||
|
||||
```css
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`height` プロパティを `h4` タグに追加し、25px に設定してください。
|
||||
|
||||
**注:** このチャレンジのテストをパスするには、ブラウザのズーム設定を 100% にする必要がある場合があります。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h4` の `height` プロパティを 25 ピクセルに変更する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
Math.round(document.querySelector('h4').getBoundingClientRect().height) ===
|
||||
25 &&
|
||||
/h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g, ''))
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac8
|
||||
title: アンカータグのホバー状態を調整する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakRGcm'
|
||||
forumTopicId: 301035
|
||||
dashedName: adjust-the-hover-state-of-an-anchor-tag
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
このチャレンジでは疑似クラスの使い方について触れます。 疑似クラスは、セレクターに追加して要素の特定の状態を選択することができるキーワードです。
|
||||
|
||||
例えば、`:hover` という疑似クラスセレクターを使用して、ホバー状態のアンカータグのスタイルを変更することができます。 アンカータグがホバー状態の間だけ `color` を変更する CSS は次の通りです。
|
||||
|
||||
```css
|
||||
a:hover {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
コードエディタに全ての `a` タグを黒に設定する CSS ルールが書かれています。 ユーザーが `a` タグにマウスカーソルを合わせた時には `color` が青になるようルールを追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
アンカータグの `color` は黒のままで、`:hover` 状態に対する CSS ルールを追加してください。
|
||||
|
||||
```js
|
||||
assert($('a').css('color') == 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
アンカータグがホバー状態の時、`color` は青である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
a {
|
||||
color: #000;
|
||||
}
|
||||
a:hover {
|
||||
color: rgba(0,0,255,1);
|
||||
}
|
||||
</style>
|
||||
<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
|
||||
```
|
||||
@ -0,0 +1,129 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad4
|
||||
title: 色の色相を調整する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPp38TZ'
|
||||
forumTopicId: 301036
|
||||
dashedName: adjust-the-hue-of-a-color
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
色は色相、彩度、明度など、いくつかの特性を持っています。 CSS3 はこれらの特性を直接指定して色を選択する方法として `hsl()` プロパティを導入しました。
|
||||
|
||||
**Hue** (色相) は一般的に人々が「色」と考えるものです。 左端が赤から始まり、真ん中が緑、右端が青の色のスペクトルを思い浮かべた時、ある色がこの線のどこに位置するかを表すのが色相です。 `hsl()` では、色相はスペクトルの代わりに色相環の概念を使用し、円上のその色の角度が 0 から 360 の間の値として与えられます。
|
||||
|
||||
**Saturation** (彩度) は色の中のグレーの量です。 彩度が最大の色にはグレーの成分がなく、彩度が最小の色はほぼ完全なグレーです。 これは、最大の彩度を 100% とするパーセンテージで与えられます。
|
||||
|
||||
**Lightness** (明度) は色の中の白または黒の量です。 パーセンテージは 0% (黒) から 100% (白) の範囲で与えられ、50% は標準の色になります。
|
||||
|
||||
こちらは彩度が最大、明度が標準の色を `hsl()` を使って表した例です。
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>色</th><th>HSL</th></tr></thead><tbody><tr><td>赤</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>黄色</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>緑</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>シアン</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>青</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>マゼンタ</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
各 `div` 要素の `background-color` を、クラス名 (`green`, `cyan`, `blue`) に従うように `hsl()` を使って変更してください。 三色とも彩度は最大、明度は標準にしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`hsl()` プロパティを使って、`green` の色を宣言してください。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
`hsl()` プロパティを使って、`cyan` の色を宣言してください。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
`hsl()` プロパティを使って、`blue` の色を宣言してください。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
クラスが `green` の `div` 要素の `background-color` は緑である必要があります。
|
||||
|
||||
```js
|
||||
assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
クラスが `cyan` の `div` 要素の `background-color` はシアンである必要があります。
|
||||
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
クラスが `blue` の `div` 要素の `background-color` は青である必要があります。
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="green"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="blue"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.green {
|
||||
background-color: hsl(120, 100%, 50%);
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: hsl(180, 100%, 50%);
|
||||
}
|
||||
|
||||
.blue {
|
||||
background-color: hsl(240, 100%, 50%);
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="green"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="blue"></div>
|
||||
```
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abd
|
||||
title: 段落要素と対比して見出し要素のサイズを調整する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bRPTz'
|
||||
forumTopicId: 301037
|
||||
dashedName: adjust-the-size-of-a-heading-element-versus-a-paragraph-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
見出し要素 (`h1` から `h6`) のフォントサイズは、通常は段落タグのフォントサイズより大きくなるべきです。 そうすることにより、ページ上のあらゆる物のレイアウトと重要度がユーザーにとって視覚的に理解しやすくなります。 要素内のテキストのサイズを調整するには `font-size` プロパティを使用します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
見出しを段落よりも大幅に大きくするために、`h4` 要素の `font-size` を 27 ピクセルに変更してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h4` 要素に、27 ピクセルに設定した `font-size` プロパティを追加してください。
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-size') == '27px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad5
|
||||
title: 色のトーンを調整する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDJvT7'
|
||||
forumTopicId: 301038
|
||||
dashedName: adjust-the-tone-of-a-color
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS の `hsl()` オプションでは、色のトーンも簡単に調整することができます。 純粋な色に白を混ぜると淡い色が作れ、黒を加えると暗い色を作れます。 あるいは、グレーを追加したり濃淡の両方によって色調が作られます。 `hsl()` の 's' と 'l' はそれぞれ saturation (彩度) と lightness (明度) を表していることを思い出してください。 彩度のパーセントはグレーの量を変え、明度のパーセントは色の中に白か黒がどれくらいあるかを決定します。 これは、あなたが好きな色のベースの色相があり、そのバリエーションが必要な時に役立ちます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
すべての要素は `background-color` のデフォルト値として `transparent` を持っています。 私達の `nav` 要素の背景色は今 `cyan` になっているように見えます。その後ろにある要素の `background-color` が `cyan` に設定されているからです。 `nav` 要素に `background-color` を追加して、同じ `cyan` の色相で、彩度は `80%`、明度は `25%` の値を設定して色調と暗さを変えましょう。
|
||||
|
||||
# --hints--
|
||||
|
||||
`nav` 要素の `background-color` は、`hsl()` プロパティを使ってトーンを調整されたシアンである必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/nav\s*?{\s*?background-color:\s*?hsl\(180,\s*?80%,\s*?25%\)/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
header {
|
||||
background-color: hsl(180, 90%, 35%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
nav {
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-indent: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Classes</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
header {
|
||||
background-color: hsl(180, 90%, 35%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: hsl(180, 80%, 25%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-indent: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<h1>Cooking with FCC!</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Classes</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
```
|
||||
@ -0,0 +1,115 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab4
|
||||
title: width プロパティで要素の幅を調整する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVLPtN'
|
||||
forumTopicId: 301039
|
||||
dashedName: adjust-the-width-of-an-element-using-the-width-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS では `width` プロパティを使用して要素の幅を指定できます。 値は相対単位 (`em` など) や、絶対単位 (`px` など)、または親要素に対するパーセンテージなどで指定することができます。 下記は画像の幅を 220px に変更する例です:
|
||||
|
||||
```css
|
||||
img {
|
||||
width: 220px;
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
カード全体に `width` プロパティを追加して、値を絶対単位 245px に設定してください。 要素の選択には `fullCard` クラスを使用してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`fullCard` クラスセレクターを使用して、カードの `width` プロパティを 245 ピクセルに変更する必要があります。
|
||||
|
||||
```js
|
||||
const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
|
||||
assert(
|
||||
fullCard &&
|
||||
/width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) &&
|
||||
$('.fullCard').css('maxWidth') === 'none'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,141 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae5
|
||||
title: 要素を可変レートでアニメーションさせる
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cZ89WA4'
|
||||
forumTopicId: 301040
|
||||
dashedName: animate-elements-at-variable-rates
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
似たようなアニメーション要素のアニメーション速度を変更する方法は様々です。 これまでは、`animation-iteration-count` プロパティを適用し、`@keyframes` ルールを設定することでそれが実現されていました。
|
||||
|
||||
例えば、右のアニメーションは 2 つの星で構成されており、それぞれ `@keyframes` ルールの 20% 時点でサイズと不透明度を縮小・減少させることで、星のまたたきを表現しています。 いずれかの要素に対して `@keyframes` ルールを変更することで、異なる速度で星を輝かせることができます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
クラス名 `star-1` の要素のアニメーション速度を変更するために、`@keyframes` ルールを 50% に変更します。
|
||||
|
||||
# --hints--
|
||||
|
||||
`star-1` クラスの `@keyframes` ルールは 50% でなければなりません。
|
||||
|
||||
```js
|
||||
assert(code.match(/twinkle-1\s*?{\s*?50%/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-name: twinkle-1;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-name: twinkle-2;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@keyframes twinkle-1 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle-2 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-name: twinkle-1;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-name: twinkle-2;
|
||||
animation-duration: 1s;
|
||||
}
|
||||
|
||||
@keyframes twinkle-1 {
|
||||
50% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes twinkle-2 {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
```
|
||||
@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae3
|
||||
title: アニメーション回数を無限にして要素のアニメーションを継続させる
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJDVfq'
|
||||
forumTopicId: 301041
|
||||
dashedName: animate-elements-continually-using-an-infinite-animation-count
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
これまでのチャレンジでは、アニメーションプロパティのいくつかと `@keyframes` ルールの使用方法について説明しました。 もう一つのアニメーションプロパティとして `animation-iteration-count` があり、これはアニメーションをループさせたい回数を制御できます。 例:
|
||||
|
||||
```css
|
||||
animation-iteration-count: 3;
|
||||
```
|
||||
|
||||
この場合、アニメーションは 3 回実行されると停止します。 しかし、この値を `infinite` に設定することで、アニメーションを継続的に実行させることができます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
右側の跳ね回るボールのループを繰り返させるには、`animation-iteration-count` プロパティを `infinite` に変更します。
|
||||
|
||||
# --hints--
|
||||
|
||||
`animation-iteration-count` プロパティの値は `infinite` でなければなりません。
|
||||
|
||||
```js
|
||||
assert($('#ball').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
#ball {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: bounce;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: 3;
|
||||
}
|
||||
|
||||
@keyframes bounce{
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
top: 249px;
|
||||
width: 130px;
|
||||
height: 70px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#ball {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: bounce;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce{
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
top: 249px;
|
||||
width: 130px;
|
||||
height: 70px;
|
||||
}
|
||||
100% {
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
@ -0,0 +1,155 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae6
|
||||
title: 複数の要素を可変レートでアニメーションさせる
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cnpWZc9'
|
||||
forumTopicId: 301042
|
||||
dashedName: animate-multiple-elements-at-variable-rates
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジでは、`@keyframes` ルールを操作することで、2つのよく似たアニメーションの要素に対するアニメーション速度を変更しました。 複数の要素の `animation-duration` を操作することで、同じ目標を達成することができます。
|
||||
|
||||
コードエディタで実行されているアニメーションでは、空に3つの星が同じ速度で連続ループでまたたいています。 これらが異なる速度で輝くようにするには、各要素に対して `animation-duration` プロパティを異なる値で設定します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`star-1`、`star-2`、`star-3` のクラスに属する要素に対して、`animation-duration` の値としてそれぞれ 1s、0.9s、1.1s をセットします。
|
||||
|
||||
# --hints--
|
||||
|
||||
`star-1` クラスの星が持つ `animation-duration` プロパティは、1 秒のままにします。
|
||||
|
||||
```js
|
||||
assert($('.star-1').css('animation-duration') == '1s');
|
||||
```
|
||||
|
||||
`star-2` クラスの星が持つ `animation-duration` プロパティは、0.9 秒でなければなりません。
|
||||
|
||||
```js
|
||||
assert($('.star-2').css('animation-duration') == '0.9s');
|
||||
```
|
||||
|
||||
`star-3` クラスの星が持つ `animation-duration` プロパティは、1.1 秒でなければなりません。
|
||||
|
||||
```js
|
||||
assert($('.star-3').css('animation-duration') == '1.1s');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
margin-top: 10%;
|
||||
margin-left: 50%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
<div class="star-3 stars"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.stars {
|
||||
background-color: white;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.star-1 {
|
||||
margin-top: 15%;
|
||||
margin-left: 60%;
|
||||
animation-duration: 1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-2 {
|
||||
margin-top: 25%;
|
||||
margin-left: 25%;
|
||||
animation-duration: 0.9s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
.star-3 {
|
||||
margin-top: 10%;
|
||||
margin-left: 50%;
|
||||
animation-duration: 1.1s;
|
||||
animation-name: twinkle;
|
||||
}
|
||||
|
||||
@keyframes twinkle {
|
||||
20% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
#back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
|
||||
}
|
||||
</style>
|
||||
<div id="back"></div>
|
||||
<div class="star-1 stars"></div>
|
||||
<div class="star-2 stars"></div>
|
||||
<div class="star-3 stars"></div>
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad0
|
||||
title: margin プロパティで要素を水平方向の中央に配置する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLJqU4'
|
||||
forumTopicId: 301043
|
||||
dashedName: center-an-element-horizontally-using-the-margin-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
次のテクニックは、ブロック要素を水平方向の中央に配置する方法です。 これを行う一つの方法は、`margin` の値を auto に設定することです。
|
||||
|
||||
この方法は画像に対しても使うことができます。 画像はデフォルトではインライン要素ですが、`display` プロパティを `block` に設定すると、ブロック要素に変更できます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
値が `auto` の `margin` プロパティを追加して、`div` を中央に表示させてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` の `margin` の値は `auto` に設定される必要があります。
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('div')?.margin === 'auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
background-color: blue;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512ac9
|
||||
title: 要素の相対位置を変更する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/czVmMtZ'
|
||||
forumTopicId: 301044
|
||||
dashedName: change-an-elements-relative-position
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS は各 HTML 要素を独自のボックスとして扱います。これは一般に <dfn>CSS ボックスモデル</dfn> と呼ばれます。 ブロックレベル要素 (見出し、段落、div 要素など) は自動的に新しい行から始まりますが、インライン要素 (画像、span 要素など) は周囲のコンテンツの間にとどまります。 このような要素のデフォルトのレイアウトはドキュメントの <dfn>通常フロー</dfn> と呼ばれますが、CSS にはそれをオーバーライドする position プロパティがあります。
|
||||
|
||||
ある要素の position が `relative` に設定されていると、その要素を今の通常フローでの位置を基準に *相対的に* どのように CSS で動かすかを指定することができます。 これは CSS のオフセットプロパティの `left` または `right`, および `top` または `bottom` とセットで使います。 これらは要素を通常の位置から何ピクセル、何 %、または何 em *離す* かを表しています。 下記の例は、段落を下から 10 ピクセル離すように移動します。
|
||||
|
||||
```css
|
||||
p {
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
要素の position を relative に変更しても、その要素は通常フローからは削除されません。周りにある要素は、その要素がデフォルトの位置にあるかのように動作します。
|
||||
|
||||
**注:** position の変更により、ページの視覚的なレイアウトを柔軟にそして強力に変更できます。 要素の位置がどうであれ、基礎となる HTML のマークアップは整理され、上から下に向かって読んだときに意味が通るようになっているべきであることを覚えておくと良いでしょう。 視覚障害を持つユーザー (スクリーンリーダーのような支援機器を頼りにしているユーザー) があなたのコンテンツにアクセスする際、そのように読みます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`h2` の `position` を `relative` に変更し、CSS オフセットを使用して、通常フローでの位置の `top` から 15 ピクセル離すように移動させましょう。 周りにある h1 と p 要素の位置には影響がないことを確認してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 要素の `position` プロパティを `relative` に設定してください。
|
||||
|
||||
```js
|
||||
assert($('h2').css('position') == 'relative');
|
||||
```
|
||||
|
||||
CSS オフセットを使用して、`h2` を通常の位置の `top` から相対的に 15px 離して配置する必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').css('top') == '15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
top: 15px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae7
|
||||
title: キーワードでアニメーションのタイミングを変更する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cJKvwCM'
|
||||
forumTopicId: 301045
|
||||
dashedName: change-animation-timing-with-keywords
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS アニメーションでは、`animation-timing-function` プロパティにより、アニメーション要素がアニメーションの継続時間中に変化する速度を制御します。 車が A 地点から B 地点へ与えられた時間 (`animation-duration` の値) で移動するアニメーションであれば、`animation-timing-function` は車がドライブの過程でどのように加減速するかを示します。
|
||||
|
||||
よく使われるオプションに対しては、あらかじめ定義されたキーワードがいくつか用意されています。 たとえば、デフォルト値は `ease` で、これは最初はゆっくりスタートし、途中でスピードを上げ、最終的に再び減速します。 他のオプションとしては、速く始まって減速する `ease-out`、遅く始まって最終的に加速する `ease-in`、全体を通じて一定速度のアニメーションが適用される `linear` が含まれます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
id `ball1` と `ball2` の要素に対してそれぞれ `animation-timing-function` プロパティを追加し、`#ball1` に対しては `linear` を、`#ball2` に対しては `ease-out` を設定します。 アニメーション中の要素の動き方の違いに注目してください。`animation-duration` 2 秒の設定は共通しているため、アニメーションは同じタイミングで終了します。
|
||||
|
||||
# --hints--
|
||||
|
||||
id `ball1` 要素の `animation-timing-function` プロパティの値は `linear` でなければなりません。
|
||||
|
||||
```js
|
||||
const ball1Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball1').css('animation-timing-function')
|
||||
);
|
||||
assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
|
||||
```
|
||||
|
||||
id `ball2` 要素の `animation-timing-function` プロパティの値は `ease-out` でなければなりません。
|
||||
|
||||
```js
|
||||
const ball2Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball2').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left:27%;
|
||||
|
||||
}
|
||||
#ball2 {
|
||||
left:56%;
|
||||
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left:27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#ball2 {
|
||||
left:56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512acf
|
||||
title: 重なっている要素の位置を z-index プロパティで変更する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cM94aHk'
|
||||
forumTopicId: 301046
|
||||
dashedName: change-the-position-of-overlapping-elements-with-the-z-index-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
要素が重なり合うように配置されたとき (例: `position: absolute | relative | fixed | sticky` を使う場合)、HTML マークアップのより後にある要素は、デフォルトでは他の要素の上に表示されます。 ところが、`z-index` プロパティで要素が重なり合う順番を指定することができます。 値は整数でなければならず (小数は不可)、`z-index` プロパティの値が高いほど、低い値を持つ要素よりも上に重ねられます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`z-index` プロパティをクラス名 `first` の要素 (赤色の長方形) に追加し、値を 2 に設定して、他の要素 (青色の長方形) の上に重なるようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
クラスが `first` の要素の `z-index` の値は 2 である必要があります。
|
||||
|
||||
```js
|
||||
assert($('.first').css('z-index') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 60%;
|
||||
height: 200px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
|
||||
}
|
||||
.second {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 60%;
|
||||
height: 200px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.first {
|
||||
background-color: red;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
.second {
|
||||
background-color: blue;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
<div class="first"></div>
|
||||
<div class="second"></div>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad6
|
||||
title: CSS の線形グラデーションを作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4dpt9'
|
||||
forumTopicId: 301047
|
||||
dashedName: create-a-gradual-css-linear-gradient
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML 要素に適用できる色は 1 色のフラットな色相だけではありません。 CSS では、グラデーションとも呼ばれる色の移り変わりを要素の色に使う機能を提供しています。 そのためには `background` プロパティの `linear-gradient()` 関数を使用します。 一般的な構文は次のとおりです:
|
||||
|
||||
```css
|
||||
background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
|
||||
```
|
||||
|
||||
最初の引数は、色の遷移が始まる方向を指定します。角度で記述することができ、`90deg` なら水平方向のグラデーションを (左から右に) 作り、`45deg` なら斜めのグラデーションを (左下から右上に) 作ります。 その後に続く引数はグラデーションで使用される色の順序を指定します。
|
||||
|
||||
例:
|
||||
|
||||
```css
|
||||
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`div` 要素の `background` に `linear-gradient()` を使用し、35 度の方向に色が `#CCFFFF` から `#FFCCCC` に変わるように設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` 要素は、指定の方向と色の `linear-gradient` の `background` を持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('div')
|
||||
.css('background-image')
|
||||
.match(
|
||||
/linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50px auto;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512add
|
||||
title: CSS を使ってグラフィックを作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cEDWPs6'
|
||||
forumTopicId: 301048
|
||||
dashedName: create-a-graphic-using-css
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
さまざまなセレクターやプロパティを操作することで、面白い形を作ることができます。 比較的簡単に試せるものの一つは三日月の形です。 このチャレンジでは、要素に影を設定する `box-shadow` プロパティと、要素の角の丸みをコントロールする `border-radius` プロパティを使います。
|
||||
|
||||
あなたは、透明な丸いオブジェクトと、少し横にずれたくっきりした影を作ります。実際にはこの影が目に見える月の形になります。
|
||||
|
||||
丸いオブジェクトを作るには、`border-radius` プロパティが 50% に設定される必要があります。
|
||||
|
||||
以前のチャレンジで学んだことを覚えているかもしれませんが、`box-shadow` プロパティは `offset-x`, `offset-y`, `blur-radius`, `spread-radius` そして色の値を、この順番で取ります。 `blur-radius` と `spread-radius` の値は省略可能です。
|
||||
|
||||
# --instructions--
|
||||
|
||||
エディタに表示されている正方形の要素を操作して、月の形を作りましょう。 まず `background-color` を `transparent` に変更し、次に `border-radius` プロパティを 50% に設定し、円の形を作ります。 最後に、`box-shadow` プロパティを変更して `offset-x` を 25px、`offset-y` を 10px、`blur-radius` を 0、`spread-radius` を 0、色を `blue` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`background-color` プロパティの値は `transparent` に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/background-color:\s*?transparent;/gi));
|
||||
```
|
||||
|
||||
`border-radius` プロパティの値は `50%` に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||
```
|
||||
|
||||
`box-shadow` プロパティの値は `offset-x` が 25px、`offset-y` が 10px、`blur-radius` が 0、`spread-radius` が 0、最後に色が `blue` に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.center {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
border-radius: 0px;
|
||||
box-shadow: 25px 10px 10px 10px green;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="center"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.center {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: transparent;
|
||||
border-radius: 50%;
|
||||
box-shadow: 25px 10px 0 0 blue;
|
||||
}
|
||||
</style>
|
||||
<div class="center"></div>
|
||||
```
|
||||
@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512abb
|
||||
title: hr 要素で水平線を作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3bR8t7'
|
||||
forumTopicId: 301049
|
||||
dashedName: create-a-horizontal-line-using-the-hr-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`hr` タグを使用すると、それを囲む要素の幅を横切る水平線を追加できます。 これは、トピックの変更を表したり、コンテンツをグループごとに視覚的に区切ったりするために使用できます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
カードのタイトルを含んでいる `h4` の下に、`hr` タグを追加してください。
|
||||
|
||||
**注:** HTML では `hr` は自己終了タグであり、終了タグは必要ありません。
|
||||
|
||||
# --hints--
|
||||
|
||||
コード内でマークアップに `hr` タグを 1 つ追加する必要があります。
|
||||
|
||||
```js
|
||||
assert($('hr').length == 1);
|
||||
```
|
||||
|
||||
`hr` タグはタイトルと段落の間にある必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s>Alphabet</h4>
|
||||
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,146 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512ade
|
||||
title: CSS と HTML を使ってより複雑な形を作る
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPpz4fr'
|
||||
forumTopicId: 301050
|
||||
dashedName: create-a-more-complex-shape-using-css-and-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
世界で最もポピュラーな形の一つはハート形でしょう。このチャレンジでは純粋な CSS を使ってハート形を作ります。 まず、疑似要素の `::before` と `::after` を理解する必要があります。 `::before` は選択された要素の最初の子要素である疑似要素を作成し、`::after` は選択された要素の最後の子要素である疑似要素を作成します。 下記の例では、クラス `heart` を持つ要素に長方形を追加するのに `::before` 疑似要素が使われています。
|
||||
|
||||
```css
|
||||
.heart::before {
|
||||
content: "";
|
||||
background-color: yellow;
|
||||
border-radius: 25%;
|
||||
position: absolute;
|
||||
height: 50px;
|
||||
width: 70px;
|
||||
top: -50px;
|
||||
left: 5px;
|
||||
}
|
||||
```
|
||||
|
||||
`::before` や `::after` の疑似要素が正しく機能するためには、`content` プロパティの定義が必要です。 このプロパティは通常、写真やテキストなどを選択された要素に追加するために使用されます。 `::before` や `::after` の疑似要素が図形を作るために使われるときにも `content` プロパティは必要ですが、空文字列に設定します。 上の例では、クラス `heart` の要素は、高さ `50px` 幅 `70px` の黄色の長方形を生成する `::before` 疑似要素を持っています。 この長方形は、25% の `border-radius` が設定されているので丸い角を持っています。また、左端から `5px`、上端より `50px` 上に絶対位置指定で配置されています。
|
||||
|
||||
# --instructions--
|
||||
|
||||
画面に表示されている要素をハート形に変換しましょう。 `heart::after` セレクターで、`background-color` を `pink` に、`border-radius` を 50% に変更してください。
|
||||
|
||||
次に、クラス `heart` (`heart` のみ) の要素に対し、`transform` プロパティを入力します。 `rotate()` 関数を -45deg を指定して使用してください。
|
||||
|
||||
最後に、`heart::before` セレクターの中で `content` プロパティを空文字列に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`heart::after` セレクターの `background-color` プロパティは `pink` である必要があります。
|
||||
|
||||
```js
|
||||
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
||||
assert(
|
||||
/({|;)\s*background-color\s*:\s*pink\s*(;|})/g.test(heartAfter)
|
||||
);
|
||||
```
|
||||
|
||||
`heart::after` セレクターの `border-radius` は 50% である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
```
|
||||
|
||||
`heart` クラスの `transform` プロパティは `rotate()` 関数を使用し、-45deg に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
```
|
||||
|
||||
`heart::before` セレクターの `content` は空文字列である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: ;
|
||||
}
|
||||
.heart::after {
|
||||
background-color: blue;
|
||||
content: "";
|
||||
border-radius: 25%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart::before {
|
||||
content: ;
|
||||
background-color: pink;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.heart::after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart::before {
|
||||
content: "";
|
||||
background-color: pink;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae1
|
||||
title: CSS アニメーションを使って動きを作る
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7amZfW'
|
||||
forumTopicId: 301051
|
||||
dashedName: create-movement-using-css-animation
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
要素に `fixed` や `relative` のような `position` が指定されているとき、CSS オフセットプロパティ `right`、`left`、`top`、`bottom` を使ってアニメーションのルールで動きを付けることができます。
|
||||
|
||||
下記の例のように、`50%` のキーフレームで `top` プロパティを 50px に設定し、最初 (`0%`) と最後 (`100%`) のキーフレームでは 0px を設定することで、要素を上下に動かすことができます。
|
||||
|
||||
```css
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`div` のアニメーションに水平方向の動きを追加しましょう。 `@keyframes` ルールに `left` オフセットプロパティを追加し、rainbow のアニメーションが `0%` で 0 ピクセルから始まり、`50%` で 25 ピクセルになり、`100%` で -25 ピクセルで終わるようにしてください。 エディタにある `top` プロパティは書き換えないようにしてください。アニメーションは垂直方向と水平方向両方の動きを持つ必要があります。
|
||||
|
||||
# --hints--
|
||||
|
||||
`0%` の `@keyframes` ルールは、`left` オフセットが 0px である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
`50%` の `@keyframes` ルールは、`left` オフセットが 25px である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/50%\s*?{[\s\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
`100%` の `@keyframes` ルールは、`left` オフセットが -25px である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{[\s\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="rect"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
top: 50px;
|
||||
left: 25px;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
top: 0px;
|
||||
left: -25px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad8
|
||||
title: 背景画像としてかすかなパターンを追加してテクスチャを作る
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cQdwJC8'
|
||||
forumTopicId: 301052
|
||||
dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
背景に質感やおもしろさを加えて目立つようにする一つの方法は、かすかなパターンを追加することです。 鍵となるのはバランスです。背景が目立ちすぎて前面から注意がそれることは避けたいでしょう。 `background` プロパティは、テクスチャやパターンの画像にリンクするための `url()` 関数をサポートしています。 リンクアドレスは引用符で囲んで括弧内に入れます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png` の URL を使用して、ページ全体の `background` を `body` セレクターに設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`body` 要素の `background` プロパティを、与えられたリンクとともに `url()` で設定してください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/background(-image)?:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\2\s*\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d7791367417b2b2512ab3
|
||||
title: text-align プロパティで見た目のバランスを作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c3b4EAp'
|
||||
forumTopicId: 301053
|
||||
dashedName: create-visual-balance-using-the-text-align-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
本カリキュラムのこのセクションでは、ビジュアルデザインの応用に焦点を当てます。 最初のいくつかのチャレンジでは、例として与えられたカードのレイアウトを見ながらいくつかの原則を説明します。
|
||||
|
||||
テキストは多くの場合、ウェブコンテンツの大部分を占めます。 CSS には、テキストをどのように整列させるかによって `text-align` プロパティにいくつかのオプションがあります。
|
||||
|
||||
`text-align: justify;` は、各行が等しい幅になるようにテキストの語間を開けます。
|
||||
|
||||
`text-align: center;` は、テキストを中央揃えにします。
|
||||
|
||||
`text-align: right;` は、テキストを右揃えにします。
|
||||
|
||||
そして `text-align: left;` (デフォルト) は、テキストを左揃えにします。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`h4` タグのテキスト "Google" を中央揃えにしてください。 次に、Google の設立についての情報が書かれた段落タグを両端揃え (justify) にしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h4` タグの text-align プロパティを使用し、`center` に設定してください。
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-align') == 'center');
|
||||
```
|
||||
|
||||
`p` タグの text-align プロパティを使用し、`justify` に設定してください。
|
||||
|
||||
```js
|
||||
assert($('p').css('text-align') == 'justify');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
|
||||
}
|
||||
p {
|
||||
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
.fullCard {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
margin-right: 20px;
|
||||
|
||||
}
|
||||
.fullCard {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae2
|
||||
title: 要素を左から右にフェードアウトさせて視覚的な方向を表現する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cGJqqAE'
|
||||
forumTopicId: 301054
|
||||
dashedName: create-visual-direction-by-fading-an-element-from-left-to-right
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
このチャレンジでは、アニメーションされている要素の `opacity` を変更し、画面の右側に行くにつれて徐々に薄くなるようにします。
|
||||
|
||||
このアニメーションでは、グラデーション背景の丸い要素は、`@keyframes` ルールに従ってアニメーションの 50% 時点まで右に移動します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`ball` という id を持つ要素を対象に、`50%` 時点の `opacity` プロパティを 0.1 に設定して、要素が右に動く際にフェードするようにします。
|
||||
|
||||
# --hints--
|
||||
|
||||
fade 用の `keyframes` ルールは、50％ の時点で `opacity` プロパティを 0.1 に設定します。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
#ball {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 50px auto;
|
||||
position: fixed;
|
||||
left: 20%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: fade;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
50% {
|
||||
left: 60%;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="ball"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#ball {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 50px auto;
|
||||
position: fixed;
|
||||
left: 20%;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
animation-name: fade;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes fade {
|
||||
50% {
|
||||
left: 60%;
|
||||
opacity: 0.1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="ball"></div>
|
||||
```
|
||||
@ -0,0 +1,134 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512abf
|
||||
title: 要素の不透明度を下げる
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7aKqu4'
|
||||
forumTopicId: 301055
|
||||
dashedName: decrease-the-opacity-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSSの `opacity` プロパティは、アイテムの不透明度を調整したり、逆に透明度を調整するために使用されます。
|
||||
|
||||
<blockquote>値 1 は完全に不透明です。<br>値 0.5 は半分透過します。<br>値 0 は完全に透明です。</blockquote>
|
||||
|
||||
与えられた値は、元々透明度のある画像であろうと、テキストの文字色や背景の色であろうと関係なく、要素全体に適用されます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`links` クラスを使用してアンカータグを選択し、その `opacity` を 0.7 に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`links` のクラスを選択して、アンカータグの `opacity` プロパティを 0.7 に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
/\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test(
|
||||
$('style').text()
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ad1
|
||||
title: 補色について学ぶ
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MD3Tr'
|
||||
forumTopicId: 301056
|
||||
dashedName: learn-about-complementary-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
色彩理論とそのデザインへの影響は深い話であり、このチャレンジでは基礎のみを取り上げます。 ウェブサイトでは、色を使ってコンテンツに注意を引いたり、感情を呼び起こしたり、視覚的な調和を作ったりすることができます。 異なる色の組み合わせを使うとウェブサイトの外観を大きく変えることができるため、あなたのコンテンツに合うカラーパレットを選ぶには多くのことを考慮することになるでしょう。
|
||||
|
||||
色相環は、似たような色相を持つ色は近く、異なる色相を持つ色は遠くに配置された円で、色がお互いにどのような関係にあるかを視覚化するのに便利なツールです。 二つの色が円の反対側にあるとき、それらは補色と呼ばれます。 その二色は混合するとお互いを打ち消し灰色になるという特徴を持っています。 しかし、並べて配置するとより鮮やかに見え、強力な視覚的コントラストを作り出します。
|
||||
|
||||
いくつかの補色とその 16 進数コードの例:
|
||||
|
||||
<blockquote>赤 (#FF0000) とシアン (#00FFFF)<br>緑 (#00FF00) とマゼンタ (#FF00FF)<br>青 (#0000FF) と黄色 (#FFFF00)</blockquote>
|
||||
|
||||
これは、私達の多くが学校で教えられた旧式の RYB カラーモデルとは原色や補色が異なります。 現代の色彩理論では、加法混合の RGB モデル (コンピュータ画面など) や減法混合の CMY(K) モデル (印刷など) を使います。 これは複雑な話になるので詳しくは [こちら](https://en.wikipedia.org/wiki/Color_model) を参照してください。
|
||||
|
||||
補色を見つけるための機能を持ったカラーピッキングツールがオンラインでもたくさんあります。
|
||||
|
||||
**注:** 色を使うことはページに視覚的なおもしろさを加える強力な方法です。 しかし、色だけで重要な情報を伝えるような使い方をするべきではありません。視覚障害を持つユーザーが内容を理解できない可能性があるためです。 この問題は、応用アクセシビリティのチャレンジで詳しく取り上げます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`blue` と `yellow` のクラスの `background-color` プロパティを、それぞれ対応した色に変更してください。 これらの色を並べると、白い背景と比べた時と見え方が違うことに注目してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
クラスが `blue` の `div` 要素の `background-color` は青である必要があります。
|
||||
|
||||
```js
|
||||
assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
|
||||
```
|
||||
|
||||
クラスが `yellow` の `div` 要素の `background-color` は黄色である必要があります。
|
||||
|
||||
```js
|
||||
assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.blue {
|
||||
background-color: #000000;
|
||||
}
|
||||
.yellow {
|
||||
background-color: #000000;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="blue"></div>
|
||||
<div class="yellow"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
.blue {
|
||||
background-color: blue;
|
||||
}
|
||||
.yellow {
|
||||
background-color: yellow;
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<div class="blue"></div>
|
||||
<div class="yellow"></div>
|
||||
```
|
||||
@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 587d78a4367417b2b2512ad2
|
||||
title: 三次色について学ぶ
|
||||
challengeType: 0
|
||||
forumTopicId: 301057
|
||||
dashedName: learn-about-tertiary-colors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
コンピュータのモニタやデバイスの画面は、赤、緑、青の光の量を組み合わせることによって異なる色を生成します。 これは現代の色彩理論では RGB 加法カラーモデルとして知られています。 赤 (R)、緑 (G)、青 (B) は原色と呼ばれます。 2 つの原色を混合すると、シアン (G + B)、マゼンタ (R + B)、黄色 (R + G) が生成されます。 これらの色は補色のチャレンジに出てきました。 これら二次色は、その色を作る時に使わなかった原色の補色にあたり、色相環ではその原色の反対側に位置します。 例えばマゼンタは赤と青でできており、緑の補色です。
|
||||
|
||||
三次色は、ある原色と色相環上で隣合う二次色のどちらかを混合した結果です。 例えば、RGB カラーモデルでは、赤 (原色) と黄色 (二次色) でオレンジ (三次色) が作られます。 これでシンプルな色相環に更に 6 色を加え、12 色になります。
|
||||
|
||||
デザインに調和のとれた組み合わせをもたらす色を選択する方法は色々あります。 三次色を使用する一つの例は分裂補色配色 (スプリットコンプリメンタリー) と呼ばれます。 この方法はあるベースカラーから始まり、その補色と隣り合う 2 色とペアにします。 その三色はデザインに強い視覚的コントラストを与えますが、2 つの補色を使うよりも繊細になります。
|
||||
|
||||
こちらが分裂補色配色を使用して作成した三色です。
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>色</th><th>16 進数カラーコード</th></tr></thead><thead></thead><tbody><tr><td>オレンジ</td><td>#FF7F00</td></tr><tr><td>シアン</td><td>#00FFFF</td></tr><tr><td>ラズベリー</td><td>#FF007F</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
`orange`, `cyan`, `raspberry` クラスの `background-color` プロパティをそれぞれ対応した色に変更してください。 色の名前ではなく、16 進数コードを使用するようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
クラスが `orange` の `div` 要素の `background-color` はオレンジである必要があります。
|
||||
|
||||
```js
|
||||
assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
|
||||
```
|
||||
|
||||
クラスが `cyan` の `div` 要素の `background-color` はシアンである必要があります。
|
||||
|
||||
```js
|
||||
assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
クラスが `raspberry` の `div` 要素の `background-color` はラズベリーである必要があります。
|
||||
|
||||
```js
|
||||
assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
|
||||
```
|
||||
|
||||
色を表すクラスの全ての `background-color` の値は、色の名前ではなく 16 進数コードである必要があります。
|
||||
|
||||
```js
|
||||
assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.raspberry {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="orange"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="raspberry"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.orange {
|
||||
background-color: #FF7F00;
|
||||
}
|
||||
|
||||
.cyan {
|
||||
background-color: #00FFFF;
|
||||
}
|
||||
|
||||
.raspberry {
|
||||
background-color: #FF007F;
|
||||
}
|
||||
|
||||
div {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
<div class="orange"></div>
|
||||
<div class="cyan"></div>
|
||||
<div class="raspberry"></div>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae8
|
||||
title: ベジェ曲線の仕組みを学ぶ
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bDrs8'
|
||||
forumTopicId: 301058
|
||||
dashedName: learn-how-bezier-curves-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回のチャレンジでは、`animation-timing-function` プロパティと、アニメーションのスピードを時間に伴って変更するキーワードをいくつか紹介しました。 CSS はキーワード以外のオプションも提供しており、ベジェ曲線を使用してアニメーションの動作を細かく制御できます。
|
||||
|
||||
CSS アニメーションでは、ベジェ曲線は `cubic-bezier` 関数とともに使用されます。 曲線の形状は、アニメーションがどのように再生されるかを表します。 曲線は、1 × 1 の座標系に配置されます。 この座標系の X 軸はアニメーションの持続時間です (時間軸と考えてください)。そして、Y 軸はアニメーションの変化です。
|
||||
|
||||
`cubic-bezier` 関数は 1 × 1 グリッド上の `p0`、`p1`、`p2`、`p3` の 4 つの点で構成されます。 `p0` と `p3` は固定されています。これらは開始点と終了点であり、常に原点 (0, 0) と (1, 1) にそれぞれ配置されます。 あなたが設定するのは残りの2点の x, y の値です。これらをグリッド上のどこに配置するかでアニメーションの曲線の形状が決まります。 CSSでこの設定を行うには、「アンカー」ポイントと呼ばれる 2 点 `p1` と `p2` の x, y の値を次の形式で宣言します: `(x1, y1, x2, y2)`。 まとめると、CSS コードにおけるベジェ曲線の例はこのようになります。
|
||||
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||
```
|
||||
|
||||
上の例では、x と y の値は点ごとに等価です (x1 = 0.25 = y1, x2 = 0.75 = y2)。もし幾何学の授業を覚えているなら、これは原点から点 (1, 1) までの直線になることが分かります。 このアニメーションは、アニメーションの継続時間全体を通して要素を線形変化させるもので、`linear` キーワードを使用するのと同じです。 言い換えると、一定の速度で変化するということです。
|
||||
|
||||
# --instructions--
|
||||
|
||||
id が `ball1` の要素について、`animation-timing-function` プロパティの値を `linear` から、 同等の `cubic-bezier` 関数の値に変更してください。 上記の例で与えられた値を使用してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
id `ball1` を持つ要素の `animation-timing-function` プロパティの値は、線形 (linear) と等価の `cubic-bezier` 関数でなければなりません。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#ball1').css('animation-timing-function') ==
|
||||
'cubic-bezier(0.25, 0.25, 0.75, 0.75)'
|
||||
);
|
||||
```
|
||||
|
||||
id `ball2` を持つ要素の `animation-timing-function` プロパティの値は変更しないでください。
|
||||
|
||||
```js
|
||||
const ball2Animation = __helpers.removeWhiteSpace(
|
||||
$('#ball2').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left: 27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#ball2 {
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#ball1 {
|
||||
left: 27%;
|
||||
animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
|
||||
}
|
||||
#ball2 {
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="ball1"></div>
|
||||
<div class="balls" id="ball2"></div>
|
||||
```
|
||||
@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512adf
|
||||
title: CSS の @keyframes とアニメーションプロパティの仕組みを学ぶ
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cakprhv'
|
||||
forumTopicId: 301059
|
||||
dashedName: learn-how-the-css-keyframes-and-animation-properties-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
要素をアニメーションさせるには、アニメーションプロパティと `@keyframes` のルールについて知る必要があります。 アニメーションプロパティはアニメーションがどのように振る舞うべきかを制御し、`@keyframes` ルールはそのアニメーション中に何が起こるかを制御します。 アニメーションプロパティは全部で 8 つあります。 このチャレンジではシンプルな内容にとどめ、最も重要な 2 つのプロパティを取り上げます。
|
||||
|
||||
`animation-name` はアニメーションの名前を設定します。この名前は後に続く `@keyframes` で、どのルールがどのアニメーションに適用されるかを CSS に伝えるために使われます。
|
||||
|
||||
`animation-duration` はアニメーションの時間の長さを設定します。
|
||||
|
||||
`@keyframes` はアニメーション内で時間の経過とともに何が起こるかを指定する方法です。 これは、0% から 100% の範囲で表されるアニメーション中の特定の「フレーム」に対し、CSS プロパティを与えることによって行われます。 これを映画で考えると、0％ の CSS プロパティは要素がオーニングのシーンでどのように表示されるかにあたります。 100% の CSS プロパティは最後、エンドロールの直前に要素がどのように表示されるかです。 そして、CSS は魔法のように要素を与えられた時間の長さを通して変化させ、シーンを再生します。 以下は `@keyframes` とアニメーションプロパティの使い方を説明する例です:
|
||||
|
||||
```css
|
||||
#anim {
|
||||
animation-name: colorful;
|
||||
animation-duration: 3s;
|
||||
}
|
||||
|
||||
@keyframes colorful {
|
||||
0% {
|
||||
background-color: blue;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
`anim` という id を持つ要素に対し、上記のコードスニペットは `animation-name` を `colorful` に、`animation-duration` を 3 秒に設定します。 次に、`@keyframes` のルールが `colorful` という名前のアニメーションプロパティにリンクされています。 このルールでアニメーションの開始時点 (0%) での色は青に設定されており、終了時点 (100%) までに黄色に移り変わります。 設定できるのは最初と最後の変化だけではなく、0% から 100% の任意のパーセンテージで要素のプロパティを設定できます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`rect` という id をもつ要素に対し、`animation-name` を `rainbow` に、`animation-duration` を 4 秒に設定してアニメーションを作成しましょう。 次に、`@keyframes` ルールを宣言します。アニメーション開始時点 (`0%`) の `background-color` は青、中間時点 (`50%`) では緑、終了時点 (`100%`) では黄色に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
id が `rect` の要素には、値が `rainbow` の `animation-name` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert($('#rect').css('animation-name') == 'rainbow');
|
||||
```
|
||||
|
||||
id が `rect` の要素には、値が 4s の `animation-duration` プロパティが必要です。
|
||||
|
||||
```js
|
||||
assert($('#rect').css('animation-duration') == '4s');
|
||||
```
|
||||
|
||||
`@keyframes` ルールは `rainbow` という `animation-name` を使う必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
|
||||
```
|
||||
|
||||
`rainbow` に対する `@keyframes` ルールは、0% 時点で `blue` の `background-color` を使っている必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
|
||||
```
|
||||
|
||||
`rainbow` に対する `@keyframes` ルールは、50% 時点で `green` の `background-color` を使っている必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
|
||||
```
|
||||
|
||||
rainbow に対する `@keyframes` ルールは、100% 時点で `yellow` の `background-color` を使っている必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#rect {
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
height: 40px;
|
||||
width: 70%;
|
||||
background: black;
|
||||
margin: 50px auto;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#rect {
|
||||
animation-name: rainbow;
|
||||
animation-duration: 4s;
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-color: blue;
|
||||
}
|
||||
50% {
|
||||
background-color: green;
|
||||
}
|
||||
100% {
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div id="rect"></div>
|
||||
```
|
||||
@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acb
|
||||
title: 絶対位置指定で要素を親要素に固定する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLJ7c3'
|
||||
forumTopicId: 301060
|
||||
dashedName: lock-an-element-to-its-parent-with-absolute-positioning
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS の `position` プロパティの次のオプションは `absolute` です。これは、要素を親コンテナからの相対的な位置に固定します。 `relative` の配置と異なり、このオプションは要素をドキュメントの通常フローから削除するため、周りの項目はその要素を無視します。 CSS オフセットプロパティ (top または bottom および left または right) は位置を調整するために使われます。
|
||||
|
||||
絶対位置指定の注意点の一つは、最も近い *position 指定がされている* 祖先要素に対して固定されることです。 親となる項目に position ルールを追加する (一般的に `position: relative;` が使われます) ことをもし忘れると、ブラウザは一連の要素を辿って探し続け、最終的には `body` タグがデフォルトとして使われます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`#searchbar` 要素の `position` を `absolute` と宣言して、親の `section` の右上に固定してください。 `top` と `right` にそれぞれ 50 ピクセルのオフセットを設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#searchbar` 要素の `position` を `absolute` に設定してください。
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('position') == 'absolute');
|
||||
```
|
||||
|
||||
50 ピクセルの `top` CSS オフセットを `#searchbar` 要素に使用する必要があります。
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('top') == '50px');
|
||||
```
|
||||
|
||||
50 ピクセルの `right` CSS オフセットを `#searchbar` 要素に使用する必要があります。
|
||||
|
||||
```js
|
||||
assert($('#searchbar').css('right') == '50px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#searchbar {
|
||||
|
||||
|
||||
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>Welcome!</h1>
|
||||
<section>
|
||||
<form id="searchbar">
|
||||
<label for="search">Search:</label>
|
||||
<input type="search" id="search" name="search">
|
||||
<input type="submit" name="submit" value="Go!">
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#searchbar {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<h1>Welcome!</h1>
|
||||
<section>
|
||||
<form id="searchbar">
|
||||
<label for="search">Search:</label>
|
||||
<input type="search" id="search" name="search">
|
||||
<input type="submit" name="submit" value="Go!">
|
||||
</form>
|
||||
</section>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512acc
|
||||
title: 固定位置指定で要素をブラウザウィンドウに固定する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MDNUR'
|
||||
forumTopicId: 301061
|
||||
dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS が提供する次のレイアウトスキームは `fixed` ポジションです。これは絶対位置指定の一種で、要素をブラウザウィンドウに対して相対的に固定します。 絶対位置指定と同様に、固定位置指定も CSS オフセットプロパティとともに使用され、要素をドキュメントの通常フローから削除します。 他のアイテムは固定位置指定された要素がどこに配置されているか知ることができないため、何か他の方法でレイアウトを調整することが必要になる場合があります。
|
||||
|
||||
`fixed` と `absolute` ポジションの重要な違いは、ユーザーがスクロールしたときに、固定位置指定された要素は移動しないことです。
|
||||
|
||||
# --instructions--
|
||||
|
||||
コード内のナビゲーションバーに `navbar` という id が付けられています。 その `position` を `fixed` に変更し、オフセットを `top` から 0 ピクセル、`left` から 0 ピクセルに設定してください。 コードを追加したら、プレビューウィンドウをスクロールしてナビゲーションが同じ位置にとどまることを確認してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#navbar` 要素の `position` を `fixed` に設定してください。
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('position') == 'fixed');
|
||||
```
|
||||
|
||||
0 ピクセルの `top` CSS オフセットを `#navbar` 要素に使用する必要があります。
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('top') == '0px');
|
||||
```
|
||||
|
||||
0 ピクセルの `left` CSS オフセットを `#navbar` 要素に使用する必要があります。
|
||||
|
||||
```js
|
||||
assert($('#navbar').css('left') == '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
min-height: 150vh;
|
||||
}
|
||||
#navbar {
|
||||
|
||||
|
||||
|
||||
width: 100%;
|
||||
background-color: #767676;
|
||||
}
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
<nav id="navbar">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
min-height: 150vh;
|
||||
}
|
||||
#navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #767676;
|
||||
}
|
||||
nav ul {
|
||||
margin: 0px;
|
||||
padding: 5px 0px 5px 30px;
|
||||
}
|
||||
nav li {
|
||||
display: inline;
|
||||
margin-right: 20px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
<nav id="navbar">
|
||||
<ul>
|
||||
<li><a href="">Home</a></li>
|
||||
<li><a href="">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<p>I shift up when the #navbar is fixed to the browser window.</p>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,181 @@
|
||||
---
|
||||
id: 587d78a8367417b2b2512ae4
|
||||
title: アニメーションの回数を無限にして CSS でハートを鼓動させる
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cDZpDUr'
|
||||
forumTopicId: 301062
|
||||
dashedName: make-a-css-heartbeat-using-an-infinite-animation-count
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`animation-iteration-count` プロパティを使った連続アニメーションの例として、前回のチャレンジで作成したハートを使う例を紹介します。
|
||||
|
||||
長さ 1 秒のハートビートアニメーションは、2 つのアニメーションで構成されています。 `heart` 要素 (`:before` と `:after` 部分も含む) は `transform` を使ってサイズの変更をアニメーションし、背景の `div` は `background` プロパティを使って背景色の変更をアニメーションします。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`back` クラスと `heart` クラス両方に `animation-iteration-count` プロパティを追加し、値に `infinite` を設定することで、ハートを鼓動させ続けましょう。 `heart:before` と `heart:after` セレクターにはアニメーションプロパティは必要ありません。
|
||||
|
||||
# --hints--
|
||||
|
||||
`heart` クラスの `animation-iteration-count` プロパティは `infinite` の値を持つ必要があります。
|
||||
|
||||
```js
|
||||
assert($('.heart').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
`back` クラスの `animation-iteration-count` プロパティは `infinite` の値を持つ必要があります。
|
||||
|
||||
```js
|
||||
assert($('.back').css('animation-iteration-count') == 'infinite');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
animation-name: backdiv;
|
||||
animation-duration: 1s;
|
||||
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
animation-name: beat;
|
||||
animation-duration: 1s;
|
||||
|
||||
}
|
||||
.heart:after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart:before {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes backdiv {
|
||||
50% {
|
||||
background: #ffe6f2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
0% {
|
||||
transform: scale(1) rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.6) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
<div class="back"></div>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.back {
|
||||
position: fixed;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
animation-name: backdiv;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.heart {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: pink;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
transform: rotate(-45deg);
|
||||
animation-name: beat;
|
||||
animation-duration: 1s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.heart:after {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 0px;
|
||||
left: 25px;
|
||||
}
|
||||
.heart:before {
|
||||
background-color: pink;
|
||||
content: "";
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: -25px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
@keyframes backdiv {
|
||||
50% {
|
||||
background: #ffe6f2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes beat {
|
||||
0% {
|
||||
transform: scale(1) rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.6) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="back"></div>
|
||||
<div class="heart"></div>
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512aea
|
||||
title: ベジェ曲線を使用して動きをもっと自然にする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c7akWUv'
|
||||
forumTopicId: 301063
|
||||
dashedName: make-motion-more-natural-using-a-bezier-curve
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
このチャレンジでは、ボールがジャグリングされている様子を再現する要素をアニメーション化します。 ここまでのチャレンジでは `linear` と `ease-out` の三次ベジェ曲線を取り上げましたが、どちらも投げ上げる動きを正確に表現できていません。 このためにベジェ曲線をカスタマイズする必要があります。
|
||||
|
||||
`animation-iteration-count` が infinite に設定されていると、`animation-timing-function` は各キーフレームで自動的にループします。 アニメーション時間の真ん中 (`50%` 時点) にキーフレームルールが設定されているので、ボールの上向きと下向きの動きは同じように進行します。
|
||||
|
||||
次の三次ベジェ曲線はジャグリングの動きをシミュレートします。
|
||||
|
||||
```css
|
||||
cubic-bezier(0.3, 0.4, 0.5, 1.6);
|
||||
```
|
||||
|
||||
y2 の値が 1 より大きいことに注意してください。 三次ベジェ曲線は 1×1 の座標系にマッピングされていて、x の値は 0〜1 までしか設定できませんが、y の値は1以上の数値も設定することができます。 これでジャグリングボールをシミュレーションするのに最適なはずむ動きになります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
id `green` の要素の `animation-timing-function` プロパティを、x1, y1, x2, y2 の値がそれぞれ 0.311, 0.441, 0.444, 1.649 である `cubic-bezier` 関数に変更します。
|
||||
|
||||
# --hints--
|
||||
|
||||
id `green` の要素の `animation-timing-function` プロパティは、指定の x1, y1, x2, y2 の値を持つ `cubic-bezier` 関数でなければなりません。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#green').css('animation-timing-function') ==
|
||||
'cubic-bezier(0.311, 0.441, 0.444, 1.649)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 60%;
|
||||
animation-name: jump;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 25%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 50%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
#green {
|
||||
background: green;
|
||||
left: 75%;
|
||||
animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1);
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
50% {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="red"></div>
|
||||
<div class="balls" id="blue"></div>
|
||||
<div class="balls" id="green"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls {
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 60%;
|
||||
animation-name: jump;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 25%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 50%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
#green {
|
||||
background: green;
|
||||
left: 75%;
|
||||
animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
50% {
|
||||
top: 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id="red"></div>
|
||||
<div class="balls" id="blue"></div>
|
||||
<div class="balls" id="green"></div>
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 58a7a6ebf9a6318348e2d5aa
|
||||
title: アニメーションの Fill モードを変更する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJDmcE'
|
||||
forumTopicId: 301064
|
||||
dashedName: modify-fill-mode-of-an-animation
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
素晴らしい！でも、まだうまくいきませんね。 `500ms` が過ぎるとアニメーションがリセットされ、ボタンが元の色に戻ることに注目してください。 ボタンをハイライト表示のままにしたいと思うでしょう。
|
||||
|
||||
`animation-fill-mode` プロパティを `forwards` に設定すると、そのようにできます。 `animation-fill-mode` は、アニメーションが終わった時に要素に適用されるスタイルを指定します。 次のように設定できます:
|
||||
|
||||
```css
|
||||
animation-fill-mode: forwards;
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`button:hover` の `animation-fill-mode` プロパティを `forwards` に設定して、ユーザーがボタンにホバーするとボタンがハイライトされたままになるようにしましょう。
|
||||
|
||||
# --hints--
|
||||
|
||||
`button:hover` は、値が `forwards` の `animation-fill-mode` プロパティを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi
|
||||
) &&
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi
|
||||
) &&
|
||||
code.match(
|
||||
/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
/* Only change code below this line */
|
||||
|
||||
/* Only change code above this line */
|
||||
}
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 587d781e367417b2b2512aca
|
||||
title: 相対位置指定要素を CSS オフセットで移動させる
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c9bQEA4'
|
||||
forumTopicId: 301065
|
||||
dashedName: move-a-relatively-positioned-element-with-css-offsets
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`top` または `bottom`, および `left` または `right` の CSS オフセットは、あるアイテムが通常フローで配置される位置から相対的にオフセットする距離をブラウザに伝えます。 要素を指定された場所から離れるようにオフセットしているので、要素は指定された側から離れるように (事実上、反対方向に) 動きます。 ひとつ前のチャレンジで、`top` オフセットを使うと `h2` は下方向に動くことを確認しました。 同様に、`left` のオフセットを使うとアイテムは右に移動します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
CSS オフセットを使用して、`h2` を 15 ピクセル右方向に、10 ピクセル上方向に移動してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` を相対的に 10px 上に配置する CSS オフセットを使用する必要があります。 言い換えれば、通常配置される場所の `bottom` から 10px 離れたところに移動させてください。
|
||||
|
||||
```js
|
||||
assert($('h2').css('bottom') == '10px');
|
||||
```
|
||||
|
||||
`h2` を相対的に 15px 右に配置する CSS オフセットを使用する必要があります。 言い換えれば、通常配置される場所の `left` から 15px 離れたところに移動させてください。
|
||||
|
||||
```js
|
||||
assert($('h2').css('left') == '15px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
h2 {
|
||||
position: relative;
|
||||
left: 15px;
|
||||
bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>On Being Well-Positioned</h1>
|
||||
<h2>Move me!</h2>
|
||||
<p>I still think the h2 is where it normally sits.</p>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 587d78a3367417b2b2512ace
|
||||
title: float プロパティで要素を左右に押しやる
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MDqu2'
|
||||
forumTopicId: 301066
|
||||
dashedName: push-elements-left-or-right-with-the-float-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
次の位置指定の方法では `position` は使用せず、要素の `float` プロパティを設定します。 フローティング要素はドキュメントの通常フローから削除され、その要素を内包する親要素の `left` または `right` に押しやられます。 フローティング要素が必要とする水平方向の幅を指定するために、よく `width` プロパティと共に使用されます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
与えられた HTML のマークアップは、`section` と `aside` の要素が隣り合うように 2 カラムレイアウトにするのが良さそうです。 `#left` の要素の `float` を `left` に、`#right` の要素の `float` を `right` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
id が `left` の要素の `float` の値は `left` に設定してください。
|
||||
|
||||
```js
|
||||
assert($('#left').css('float') == 'left');
|
||||
```
|
||||
|
||||
id が `right` の要素の `float` の値は `right` に設定してください。
|
||||
|
||||
```js
|
||||
assert($('#right').css('float') == 'right');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
#left {
|
||||
|
||||
width: 50%;
|
||||
}
|
||||
#right {
|
||||
|
||||
width: 40%;
|
||||
}
|
||||
aside, section {
|
||||
padding: 2px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
</header>
|
||||
<section id="left">
|
||||
<h2>Content</h2>
|
||||
<p>Good stuff</p>
|
||||
</section>
|
||||
<aside id="right">
|
||||
<h2>Sidebar</h2>
|
||||
<p>Links</p>
|
||||
</aside>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<head>
|
||||
<style>
|
||||
#left {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
#right {
|
||||
float: right;
|
||||
width: 40%;
|
||||
}
|
||||
aside, section {
|
||||
padding: 2px;
|
||||
background-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Welcome!</h1>
|
||||
</header>
|
||||
<section id="left">
|
||||
<h2>Content</h2>
|
||||
<p>Good stuff</p>
|
||||
</section>
|
||||
<aside id="right">
|
||||
<h2>Sidebar</h2>
|
||||
<p>Links</p>
|
||||
</aside>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac2
|
||||
title: 複数の見出し要素の font-size を設定する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cPpQNT3'
|
||||
forumTopicId: 301067
|
||||
dashedName: set-the-font-size-for-multiple-heading-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`font-size` プロパティは、指定された要素内のテキストの大きさを指定するために使われます。 このルールは色々な要素に使うことができ、ページ上のテキストの視覚的な一貫性を作成するために使われます。 このチャレンジでは、見出しのサイズのバランスをとるために `h1` から `h6` タグすべての値を設定してみましょう。
|
||||
|
||||
# --instructions-- <p><code>style</code> タグの中で、以下の <code>font-size</code> を設定してください。</p>
|
||||
|
||||
<ul>
|
||||
<li><code>h1</code> タグを 68px に</li>
|
||||
<li><code>h2</code> タグを 52px に</li>
|
||||
<li><code>h3</code> タグを 40px に</li>
|
||||
<li><code>h4</code> タグを 32px に</li>
|
||||
<li><code>h5</code> タグを 21px に</li>
|
||||
<li><code>h6</code> タグを 14px に</li>
|
||||
</ul>
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` タグの `font-size` プロパティを 68 ピクセルに設定してください。
|
||||
|
||||
```js
|
||||
const fontSizeOfh1 = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size');
|
||||
assert(fontSizeOfh1 === '68px');
|
||||
```
|
||||
|
||||
`h2` タグの `font-size` プロパティを 52 ピクセルに設定してください。
|
||||
|
||||
```js
|
||||
const fontSizeOfh2 = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size');
|
||||
assert(fontSizeOfh2 === '52px');
|
||||
```
|
||||
|
||||
`h3` タグの `font-size` プロパティを 40 ピクセルに設定してください。
|
||||
|
||||
```js
|
||||
const fontSizeOfh3 = new __helpers.CSSHelp(document).getStyle('h3')?.getPropertyValue('font-size');
|
||||
assert(fontSizeOfh3 === '40px');
|
||||
```
|
||||
|
||||
`h4` タグの `font-size` プロパティを 32 ピクセルに設定してください。
|
||||
|
||||
```js
|
||||
const fontSizeOfh4 = new __helpers.CSSHelp(document).getStyle('h4')?.getPropertyValue('font-size');
|
||||
assert(fontSizeOfh4 === '32px');
|
||||
```
|
||||
|
||||
`h5` タグの `font-size` プロパティを 21 ピクセルに設定してください。
|
||||
|
||||
```js
|
||||
const fontSizeOfh5 = new __helpers.CSSHelp(document).getStyle('h5')?.getPropertyValue('font-size');
|
||||
assert(fontSizeOfh5 === '21px');
|
||||
```
|
||||
|
||||
`h6` タグの `font-size` プロパティを 14 ピクセルに設定してください。
|
||||
|
||||
```js
|
||||
const fontSizeOfh6 = new __helpers.CSSHelp(document).getStyle('h6')?.getPropertyValue('font-size');
|
||||
assert(fontSizeOfh6 === '14px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
@ -0,0 +1,52 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac4
|
||||
title: 段落テキストの font-size を設定する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJ36Cr'
|
||||
forumTopicId: 301068
|
||||
dashedName: set-the-font-size-of-paragraph-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS の `font-size` プロパティは見出しだけでなく、テキストを含むあらゆる要素に適用できます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
段落の `font-size` プロパティの値を 16px に変更し、読みやすくしましょう。
|
||||
|
||||
# --hints--
|
||||
|
||||
`p` タグの `font-size` は 16 ピクセルに設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert($('p').css('font-size') == '16px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 10px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
@ -0,0 +1,132 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac3
|
||||
title: 複数の見出し要素の font-weight を設定する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVWRHq'
|
||||
forumTopicId: 301069
|
||||
dashedName: set-the-font-weight-for-multiple-heading-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ひとつ前のチャレンジでは各見出しタグの `font-size` を設定しました。次は `font-weight` を調整してみましょう。
|
||||
|
||||
`font-weight` プロパティは、文字の太さまたは細さを設定します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
<ul><li><code>h1</code> タグの <code>font-weight</code> を 800 に設定してください。</li><li><code>h2</code> タグの <code>font-weight</code> を 600 に設定してください。</li><li><code>h3</code> タグの <code>font-weight</code> を 500 に設定してください。</li><li><code>h4</code> タグの <code>font-weight</code> を 400 に設定してください。</li><li><code>h5</code> タグの <code>font-weight</code> を 300 に設定してください。</li><li><code>h6</code> タグの <code>font-weight</code> を 200 に設定してください。</li></ul>
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` タグの `font-weight` プロパティは 800 に設定される必要があります。
|
||||
|
||||
```js
|
||||
assert($('h1').css('font-weight') == '800');
|
||||
```
|
||||
|
||||
`h2` タグの `font-weight` プロパティは 600 に設定される必要があります。
|
||||
|
||||
```js
|
||||
assert($('h2').css('font-weight') == '600');
|
||||
```
|
||||
|
||||
`h3` タグの `font-weight` プロパティは 500 に設定される必要があります。
|
||||
|
||||
```js
|
||||
assert($('h3').css('font-weight') == '500');
|
||||
```
|
||||
|
||||
`h4` タグの `font-weight` プロパティは 400 に設定される必要があります。
|
||||
|
||||
```js
|
||||
assert($('h4').css('font-weight') == '400');
|
||||
```
|
||||
|
||||
`h5` タグの `font-weight` プロパティは 300 に設定される必要があります。
|
||||
|
||||
```js
|
||||
assert($('h5').css('font-weight') == '300');
|
||||
```
|
||||
|
||||
`h6` タグの `font-weight` プロパティは 200 に設定される必要があります。
|
||||
|
||||
```js
|
||||
assert($('h6').css('font-weight') == '200');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
font-weight: 800;
|
||||
}
|
||||
h2 {
|
||||
font-size: 52px;
|
||||
font-weight: 600;
|
||||
}
|
||||
h3 {
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
}
|
||||
h4 {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
}
|
||||
h5 {
|
||||
font-size: 21px;
|
||||
font-weight: 300;
|
||||
}
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
}
|
||||
</style>
|
||||
<h1>This is h1 text</h1>
|
||||
<h2>This is h2 text</h2>
|
||||
<h3>This is h3 text</h3>
|
||||
<h4>This is h4 text</h4>
|
||||
<h5>This is h5 text</h5>
|
||||
<h6>This is h6 text</h6>
|
||||
```
|
||||
@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 587d781d367417b2b2512ac5
|
||||
title: 段落の line-height を設定する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/crVWdcv'
|
||||
forumTopicId: 301070
|
||||
dashedName: set-the-line-height-of-paragraphs
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS でテキストブロック内の各行の高さを変更するために `line-height` プロパティが提供されています。 名前が示すように、テキストの各行が取る垂直方向のスペースの量を変更するプロパティです。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`line-height` プロパティを `p` タグに追加し、25px に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`p` タグの `line-height` を 25 ピクセルに設定してください。
|
||||
|
||||
```js
|
||||
assert($('p').css('line-height') == '25px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
}
|
||||
</style>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</p>
|
||||
```
|
||||
@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 587d78a9367417b2b2512ae9
|
||||
title: ベジェ曲線を使ってグラフィックを動かす
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bnRCK'
|
||||
forumTopicId: 301071
|
||||
dashedName: use-a-bezier-curve-to-move-a-graphic
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
前回の課題では、アニメーションの変更を記述した `ease-out` キーワードについて説明しました。このキーワードは、最初にスピードを上げ、アニメーションの終わりにスローダウンします。 右側に `ease-out` キーワード (青色の要素用) と `linear` キーワード (赤色の要素用) の違いを示します。 `ease-out` キーワードと同様のアニメーションの動きは、カスタム三次ベジェ曲線関数を使用することで実現できます。
|
||||
|
||||
一般的に、`p1` と `p2` のアンカーポイントを変更すると異なるベジェ曲線が作成され、時間の経過と共にアニメーションがどのように進むかを制御します。 以下は、ease-out スタイルを模倣する値を使用したベジェ曲線の例です。
|
||||
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
```
|
||||
|
||||
`cubic-bezier` 関数はすべて始点 `p0` が (0, 0) から始まり、終点 `p3` が (1, 1) で終わることを思い出してください。 この例では、ベジェ曲線は Y 軸方向 (0 から開始して `p1` の y の値 0 へ移動し、 `p2` で 1 に移動する) の方が、X 軸方向 (0から開始して `p1` で 0、`p2` で 0.58 に移動する) よりも速く変化します。 その結果、アニメーションされる要素の変化は、その区間のアニメーションの時間よりも速く進行します。 カーブの終わりに向かって x と y の値の変化の関係は逆になります。y の値は (変わらず) 1 から 1 へ移動しますが、x の値は 0.58 から 1 に移動し、アニメーションの進行時間に比べて変化が遅くなります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
このベジェ曲線の効果を確認するには `red` の id を持つ要素の `animation-timing-function` を `cubic-bezier` 関数に変更し、x1, y1, x2, y2 の値をそれぞれ 0, 0, 0.58, 1 に設定します。 これで両方の要素のアニメーションが同じように進行します。
|
||||
|
||||
# --hints--
|
||||
|
||||
id `red` の要素の `animation-timing-function` プロパティは x1, y1, x2, y2 の値がそれぞれ 0, 0, 0.58, 1 に設定された `cubic-bezier` 関数でなければなりません。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)'
|
||||
);
|
||||
```
|
||||
|
||||
id `red` の要素は `animation-timing-function` のプロパティとして `linear` を持たないようにします。
|
||||
|
||||
```js
|
||||
assert($('#red').css('animation-timing-function') !== 'linear');
|
||||
```
|
||||
|
||||
id `blue` の要素の `animation-timing-function` プロパティの値は変更しないでください。
|
||||
|
||||
```js
|
||||
const blueBallAnimation = __helpers.removeWhiteSpace(
|
||||
$('#blue').css('animation-timing-function')
|
||||
);
|
||||
assert(
|
||||
blueBallAnimation == 'ease-out' ||
|
||||
blueBallAnimation == 'cubic-bezier(0,0,0.58,1)'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 27%;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id= "red"></div>
|
||||
<div class="balls" id= "blue"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.balls{
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: 50px;
|
||||
animation-name: bounce;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
#red {
|
||||
background: red;
|
||||
left: 27%;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
}
|
||||
#blue {
|
||||
background: blue;
|
||||
left: 56%;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
@keyframes bounce {
|
||||
0% {
|
||||
top: 0px;
|
||||
}
|
||||
100% {
|
||||
top: 249px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="balls" id= "red"></div>
|
||||
<div class="balls" id= "blue"></div>
|
||||
```
|
||||
@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad7
|
||||
title: CSS の線形グラデーションでストライプを作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c6bmQh2'
|
||||
forumTopicId: 301072
|
||||
dashedName: use-a-css-linear-gradient-to-create-a-striped-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`repeating-linear-gradient()` 関数は `linear-gradient()` とよく似ており、大きな違いは指定のグラデーションのパターンを繰り返すことです。 `repeating-linear-gradient()` は様々な値を受け付けますが、簡略化のために、このチャレンジでは角度の値と色経由点の値を扱います。
|
||||
|
||||
角度の値はグラデーションの方向です。 色経由点は、色が変化する場所を指定する幅の値のようなもので、パーセンテージまたはピクセルで与えられます。
|
||||
|
||||
コードエディタに表示されている例では、グラデーションは `yellow` の色で 0 ピクセルの位置からスタートし、溶け込んでスタートから 40 ピクセルの位置で 2 つ目の色 `blue` になります。 次の色経由点が同じ 40 ピクセルの位置にあるため、グラデーションはすぐに 3 つ目の色 `green` に変わり、溶け込んでグラデーションの開始位置から 80 ピクセルの場所で 4 つ目の色 `red` になります。
|
||||
|
||||
この例では、色経由点をペアとしてそれぞれ二つの色が混ざりあう場所と考えるのが役立つでしょう。
|
||||
|
||||
```css
|
||||
0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
|
||||
```
|
||||
|
||||
2 個ごとの色経由点が同じ色ならば、色の混合は同じ色同士になるため目に見えず、次の色にすぐに変わることでストライプが作れます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`repeating-linear-gradient()` を変更して `45deg` のグラデーションの角度を設定し、最初の二つの色経由点を `yellow` に、 次の 2 つの色経由点を `black` に設定してストライプを作りましょう。
|
||||
|
||||
# --hints--
|
||||
|
||||
`repeating-linear-gradient()` の角度は 45deg である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
|
||||
```
|
||||
|
||||
`repeating-linear-gradient()` の角度が 90deg ではないようにしてください。
|
||||
|
||||
```js
|
||||
assert(!code.match(/90deg/gi));
|
||||
```
|
||||
|
||||
0 ピクセルの色経由点の色は `yellow` である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?0(px)?/gi));
|
||||
```
|
||||
|
||||
40 ピクセルの 1 つめの色経由点の色は `yellow` である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px/gi));
|
||||
```
|
||||
|
||||
40 ピクセルの 2 つめの色経由点の色は `black` である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
|
||||
```
|
||||
|
||||
最後の、80 ピクセルの色経由点の色は `black` である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/black\s+?80px/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
|
||||
div{
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50 auto;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
yellow 0px,
|
||||
blue 40px,
|
||||
green 40px,
|
||||
red 80px
|
||||
);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div{
|
||||
border-radius: 20px;
|
||||
width: 70%;
|
||||
height: 400px;
|
||||
margin: 50 auto;
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
yellow 0px,
|
||||
yellow 40px,
|
||||
black 40px,
|
||||
black 80px
|
||||
);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 587d78a7367417b2b2512ae0
|
||||
title: CSS アニメーションを使用してボタンのホバー状態を変更する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cg4vZAa'
|
||||
forumTopicId: 301073
|
||||
dashedName: use-css-animation-to-change-the-hover-state-of-a-button
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS の `@keyframes` を使ってホバー状態の時にボタンの色を変えることができます。
|
||||
|
||||
下記は画像の幅をホバー時に変更する例です:
|
||||
|
||||
```html
|
||||
<style>
|
||||
img {
|
||||
width: 30px;
|
||||
}
|
||||
img:hover {
|
||||
animation-name: width;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
@keyframes width {
|
||||
100% {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/applied-visual-design/google-logo.png" alt="Google's Logo" />
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`ms` はミリ秒を表すので、1000 ms で 1 秒となることに注意してください。
|
||||
|
||||
CSS の `@keyframes` を使用して `button` 要素の `background-color` を変更し、ユーザーがボタンにホバーすると `#4791d0` になるようにしてください。 `@keyframes` ルールには `100%` の項目のみ記載されているようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
@keyframes ルールは background-color という `animation-name` を使う必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/@keyframes\s+?background-color\s*?{/g));
|
||||
```
|
||||
|
||||
`@keyframes` には、100% 時点で `background-color` を `#4791d0` に変更するルール 1 つだけがあるようにしてください。
|
||||
|
||||
```js
|
||||
assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<button>Register</button>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
button {
|
||||
border-radius: 5px;
|
||||
color: white;
|
||||
background-color: #0F5897;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
animation-name: background-color;
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
@keyframes background-color {
|
||||
100% {
|
||||
background-color: #4791d0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button>Register</button>
|
||||
```
|
||||
@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adb
|
||||
title: CSS の Transform プロパティ skewX を使用して要素を X 軸に沿ってゆがめる
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLP8Sr'
|
||||
forumTopicId: 301074
|
||||
dashedName: use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`transform` プロパティの次の関数は `skewX()` です。これは選択された要素を X 軸 (水平方向) に沿って指定された角度だけゆがめます。
|
||||
|
||||
次のコードは、段落要素を X 軸に沿って -32 度傾けます。
|
||||
|
||||
```css
|
||||
p {
|
||||
transform: skewX(-32deg);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`transform` プロパティを使って、id `bottom` を持つ要素を X 軸に沿って 24 度傾けてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
id が `bottom` の要素は X 軸に沿って 24 度傾けられている必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 587d78a6367417b2b2512adc
|
||||
title: CSS の Transform プロパティ skewY を使用して要素を Y 軸に沿ってゆがめる
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MZ2uB'
|
||||
forumTopicId: 301075
|
||||
dashedName: use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`skewX()` 関数が要素を X 軸に沿って指定の度数だけ傾けるのであれば、`skewY()` プロパティが要素を Y 軸 (垂直方向) に沿って傾けることは当然に思えるでしょう。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`transform` プロパティを使って、id `top` の要素を Y 軸に沿って -10 度傾けてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
id が `top` の要素は Y 軸に沿って -10 度傾けられている必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
#top {
|
||||
background-color: red;
|
||||
transform: skewY(-10deg);
|
||||
}
|
||||
#bottom {
|
||||
background-color: blue;
|
||||
transform: skewX(24deg);
|
||||
}
|
||||
</style>
|
||||
<div id="top"></div>
|
||||
<div id="bottom"></div>
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ad9
|
||||
title: CSS の Transform scale プロパティを使用して要素のサイズを変更する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/c2MZVSg'
|
||||
forumTopicId: 301076
|
||||
dashedName: use-the-css-transform-scale-property-to-change-the-size-of-an-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
要素の大きさを変更するために、CSS には `transform` プロパティと `scale()` 関数があります。 以下のコードの例は、ページ上のすべての段落要素のサイズを 2 倍にします。
|
||||
|
||||
```css
|
||||
p {
|
||||
transform: scale(2);
|
||||
}
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
id が `ball2` の要素のサイズを、元のサイズの 1.5 倍の大きさにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#ball2` の `transform` プロパティを、サイズが 1.5 倍に拡大するように設定してください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.ball {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50 auto;
|
||||
position: fixed;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#ball1 {
|
||||
left: 20%;
|
||||
}
|
||||
#ball2 {
|
||||
left: 65%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div class="ball" id= "ball1"></div>
|
||||
<div class="ball" id= "ball2"></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.ball {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 50 auto;
|
||||
position: fixed;
|
||||
background: linear-gradient(
|
||||
35deg,
|
||||
#ccffff,
|
||||
#ffcccc
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
#ball1 {
|
||||
left: 20%;
|
||||
}
|
||||
#ball2 {
|
||||
left: 65%;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
</style>
|
||||
<div class="ball" id= "ball1"></div>
|
||||
<div class="ball" id= "ball2"></div>
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 587d78a5367417b2b2512ada
|
||||
title: CSS の Transform scale プロパティを使用してホバー時に要素を拡大する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cyLPJuM'
|
||||
forumTopicId: 301077
|
||||
dashedName: use-the-css-transform-scale-property-to-scale-an-element-on-hover
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`transform` プロパティは要素の拡大縮小、移動、回転、傾斜などができる様々な関数を備えています。 要素の特定の状態を指定する `:hover` のような疑似クラスと一緒に使えば、`transform` プロパティは簡単にあなたの要素にインタラクティブ性を追加することができます。
|
||||
|
||||
ユーザーがカーソルを合わせたとき、段落要素を元のサイズの 2.1 倍に拡大する例をこちらに示します:
|
||||
|
||||
```css
|
||||
p:hover {
|
||||
transform: scale(2.1);
|
||||
}
|
||||
```
|
||||
|
||||
**注:** transform を `div` 要素に適用すると、その div 要素に含まれる子要素にも影響します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`div` の `hover` 状態用の CSS ルールを追加し、`transform` プロパティを使用して、ユーザーがカーソルを合わせたときに `div` 要素が 1.1 倍に拡大されるようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`div` 要素のサイズは、ユーザーがその上にカーソルを置いた時に 1.1 倍になる必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(
|
||||
53deg,
|
||||
#ccfffc,
|
||||
#ffcccf
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
<div></div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
div {
|
||||
width: 70%;
|
||||
height: 100px;
|
||||
margin: 50px auto;
|
||||
background: linear-gradient(
|
||||
53deg,
|
||||
#ccfffc,
|
||||
#ffcccf
|
||||
);
|
||||
}
|
||||
div:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
<div></div>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab9
|
||||
title: em タグでテキストを斜体にする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cVJRBtp'
|
||||
forumTopicId: 301078
|
||||
dashedName: use-the-em-tag-to-italicize-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
テキストを強調するには `em` タグを使用します。 これによりブラウザは CSS の `font-style: italic;` を要素に適用し、テキストを斜体で表示します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
段落タグの内容を `em` タグで囲み、強調表示してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コード内でマークアップに `em` タグを 1 つ追加する必要があります。
|
||||
|
||||
```js
|
||||
assert($('em').length == 1);
|
||||
```
|
||||
|
||||
`em` タグは `p` タグの内容を囲む必要がありますが、`p` タグ自体は含めないようにしてください。
|
||||
|
||||
```js
|
||||
assert($('p').children().length == 1 && $('em').children().length == 2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 587d781b367417b2b2512aba
|
||||
title: s タグでテキストに取り消し線を引く
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
forumTopicId: 301079
|
||||
dashedName: use-the-s-tag-to-strikethrough-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
テキストの文字を水平線で横切って取り消し線を引くには `s` タグを使用することができます。 これは、テキストのその部分が無効になったことを示します。 `s` タグを使うと、ブラウザは CSS の `text-decoration: line-through;` を要素に適用します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`h4` タグの中の `Google` の周りを `s` タグで囲んでください。次にその隣に、`Alphabet` という文字を取り消し線が無い状態で追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コード内でマークアップに `s` タグを 1 つ追加する必要があります。
|
||||
|
||||
```js
|
||||
assert($('s').length == 1);
|
||||
```
|
||||
|
||||
`s` タグは `h4` タグ内の `Google` のテキストを囲む必要があります。 これには単語 `Alphabet` を含めないでください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h4 > s')
|
||||
.text()
|
||||
.match(/Google/gi) &&
|
||||
!$('h4 > s')
|
||||
.text()
|
||||
.match(/Alphabet/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`h4` タグの中に、`Alphabet` という単語が取り消し線がない状態で含まれている必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('h4')
|
||||
.html()
|
||||
.match(/Alphabet/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4><s>Google</s> Alphabet</h4>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab7
|
||||
title: strong タグでテキストを太字にする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/ceJNBSb'
|
||||
forumTopicId: 301080
|
||||
dashedName: use-the-strong-tag-to-make-text-bold
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
テキストを太字にするには `strong` タグを使用します。 これは、テキストに注目させ、重要であることを示すためによく使われます。 `strong` タグを使うと、ブラウザは CSS の `font-weight: bold;` を要素に適用します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`p` タグの中のテキスト `Stanford University` を、`strong` タグで囲みましょう (ピリオドは含まないようにしてください)。
|
||||
|
||||
# --hints--
|
||||
|
||||
コード内でマークアップに `strong` タグを 1 つ追加する必要があります。
|
||||
|
||||
```js
|
||||
assert($('strong').length == 1);
|
||||
```
|
||||
|
||||
`strong` タグは `p` タグの内側にあるようにしてください。
|
||||
|
||||
```js
|
||||
assert($('p').children('strong').length == 1);
|
||||
```
|
||||
|
||||
`strong` タグが `Stanford University` の語句を囲むようにしてください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('strong')
|
||||
.text()
|
||||
.match(/^Stanford University\.?$/gi)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 587d781c367417b2b2512ac0
|
||||
title: text-transform プロパティでテキストを大文字にする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cvVZQSP'
|
||||
forumTopicId: 301081
|
||||
dashedName: use-the-text-transform-property-to-make-text-uppercase
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS の `text-transform` プロパティはテキストの外観を変更するために使用されます。 実際の HTML 要素のテキストを変更することなく、ウェブページ上のテキストが一貫した形で表示されるようにするための便利な方法です。
|
||||
|
||||
以下の表は、異なる `text-transform` の値がどのように "Transform me" の例文を変化させるかを示しています。
|
||||
|
||||
<table class='table table-striped'><thead><tr><th>値</th><th>結果</th></tr></thead><tbody><tr><td><code>lowercase</code></td><td>"transform me"</td></tr><tr><td><code>uppercase</code></td><td>"TRANSFORM ME"</td></tr><tr><td><code>capitalize</code></td><td>"Transform Me"</td></tr><tr><td><code>initial</code></td><td>デフォルト値が使用される</td></tr><tr><td><code>inherit</code></td><td>親要素の <code>text-transform</code> の値が使用される</td></tr><tr><td><code>none</code></td><td><strong>デフォルト:</strong> 元のテキストを使用する</td></tr></tbody></table>
|
||||
|
||||
# --instructions--
|
||||
|
||||
`h4` のテキストを、`text-transform` プロパティを使用して大文字に変換してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h4` のテキストは `uppercase` でなければなりません。
|
||||
|
||||
```js
|
||||
assert($('h4').css('text-transform') === 'uppercase');
|
||||
```
|
||||
|
||||
h4 の元のテキストは変更しないようにしてください。
|
||||
|
||||
```js
|
||||
assert($('h4').text() !== $('h4').text().toUpperCase());
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
background-color: rgba(45, 45, 45, 0.1);
|
||||
padding: 10px;
|
||||
font-size: 27px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
#thumbnail {
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard" id="thumbnail">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Alphabet</h4>
|
||||
<hr>
|
||||
<p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 587d781a367417b2b2512ab8
|
||||
title: u タグでテキストに下線を引く
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/c/cN6aQCL'
|
||||
forumTopicId: 301082
|
||||
dashedName: use-the-u-tag-to-underline-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
テキストに下線を引くには `u` タグを使用します。 これは、テキストの一部が重要であること、または覚えておくべきであることを示すためによく用いられます。 `u` タグを使うと、ブラウザは CSS の `text-decoration: underline;` を要素に適用します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`u` タグで `Ph.D. students` のテキストだけを囲んでください。
|
||||
|
||||
**注:** リンクと混同する可能性がある場合には、`u` タグを使うのは避けるようにしましょう。 アンカータグもデフォルトで下線付きで表示されるためです。
|
||||
|
||||
# --hints--
|
||||
|
||||
コード内でマークアップに `u` タグを 1 つ追加する必要があります。
|
||||
|
||||
```js
|
||||
assert($('u').length === 1);
|
||||
```
|
||||
|
||||
`u` タグが `Ph.D. students` のテキストを囲むようにしてください。
|
||||
|
||||
```js
|
||||
assert($('u').text() === 'Ph.D. students');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
h4 {
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
}
|
||||
p {
|
||||
text-align: justify;
|
||||
}
|
||||
.links {
|
||||
text-align: left;
|
||||
color: black;
|
||||
}
|
||||
.fullCard {
|
||||
width: 245px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
margin: 10px 5px;
|
||||
padding: 4px;
|
||||
}
|
||||
.cardContent {
|
||||
padding: 10px;
|
||||
}
|
||||
.cardText {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<div class="fullCard">
|
||||
<div class="cardContent">
|
||||
<div class="cardText">
|
||||
<h4>Google</h4>
|
||||
<p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
|
||||
</div>
|
||||
<div class="cardLinks">
|
||||
<a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
|
||||
<a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
Reference in New Issue
Block a user