chore(i18n,learn): processed translations (#45555)
This commit is contained in:
camperbot
GitHub
@@ -11,14 +11,14 @@ dashedName: add-a-box-shadow-to-a-card-like-element
|
||||
|
||||
`box-shadow` プロパティは要素に 1 つ以上の影をつけます。
|
||||
|
||||
`box-shadow` プロパティは以下の値をとります。
|
||||
`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>
|
||||
<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` の値は省略可能です。
|
||||
@@ -33,7 +33,7 @@ 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` を追加してください。
|
||||
要素に `thumbnail` の id が追加されました。 このセレクターと、上記で例示した CSS の値を使用して、カードに `box-shadow` を追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: adjust-the-hue-of-a-color
|
||||
|
||||
# --description--
|
||||
|
||||
色は色相、彩度、明度など、いくつかの特性を持っています。 CSS3 はこれらの特性を直接指定して色を選択する方法として `hsl()` プロパティを導入しました。
|
||||
色は色相、彩度、明度など、いくつかの特性を持っています。 CSS3 はこれらの特性を直接指定して色を選択する方法として `hsl()` 関数を導入しました。
|
||||
|
||||
**Hue** (色相) は一般的に人々が「色」と考えるものです。 左端が赤から始まり、真ん中が緑、右端が青の色のスペクトルを思い浮かべた時、ある色がこの線のどこに位置するかを表すのが色相です。 `hsl()` では、色相はスペクトルの代わりに色相環の概念を使用し、円上のその色の角度が 0 から 360 の間の値として与えられます。
|
||||
|
||||
@@ -27,19 +27,19 @@ dashedName: adjust-the-hue-of-a-color
|
||||
|
||||
# --hints--
|
||||
|
||||
`hsl()` プロパティを使って、`green` の色を宣言してください。
|
||||
`hsl()` 関数を使って、`green` の色を宣言してください。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
`hsl()` プロパティを使って、`cyan` の色を宣言してください。
|
||||
`hsl()` 関数を使って、`cyan` の色を宣言してください。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
```
|
||||
|
||||
`hsl()` プロパティを使って、`blue` の色を宣言してください。
|
||||
`hsl()` 関数を使って、`blue` の色を宣言してください。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
|
||||
|
||||
@@ -15,11 +15,11 @@ dashedName: create-a-graphic-using-css
|
||||
|
||||
丸いオブジェクトを作るには、`border-radius` プロパティが 50% に設定される必要があります。
|
||||
|
||||
以前のチャレンジで学んだことを覚えているかもしれませんが、`box-shadow` プロパティは `offset-x`, `offset-y`, `blur-radius`, `spread-radius` そして色の値を、この順番で取ります。 `blur-radius` と `spread-radius` の値は省略可能です。
|
||||
以前のチャレンジで学んだことを覚えているかもしれませんが、`box-shadow` プロパティは `offset-x`, `offset-y`, `blur-radius`, `spread-radius` そして `color` の値を、この順番で取ります。 `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` に設定してください。
|
||||
エディタに表示されている正方形の要素を操作して、月の形を作りましょう。 まず `background-color` を `transparent` に変更し、次に `border-radius` プロパティを 50% に設定し、円の形を作ります。 最後に、`box-shadow` プロパティを変更して `offset-x` を 25px、`offset-y` を 10px、`blur-radius` を 0、`spread-radius` を 0、`color` を `blue` に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -35,7 +35,7 @@ assert(code.match(/background-color:\s*?transparent;/gi));
|
||||
assert(code.match(/border-radius:\s*?50%;/gi));
|
||||
```
|
||||
|
||||
`box-shadow` プロパティの値は `offset-x` が 25px、`offset-y` が 10px、`blur-radius` が 0、`spread-radius` が 0、最後に色が `blue` に設定されている必要があります。
|
||||
`box-shadow` プロパティの値は `offset-x` が 25px、`offset-y` が 10px、`blur-radius` が 0、`spread-radius` が 0、最後に `color` が `blue` に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -28,15 +28,15 @@ dashedName: create-a-more-complex-shape-using-css-and-html
|
||||
|
||||
# --instructions--
|
||||
|
||||
画面に表示されている要素をハート形に変換しましょう。 `heart::after` セレクターで、`background-color` を `pink` に、`border-radius` を 50% に変更してください。
|
||||
画面に表示されている要素をハート形に変換しましょう。 `.heart::after` セレクターで、`background-color` を `pink` に、`border-radius` を 50% に変更してください。
|
||||
|
||||
次に、クラス `heart` (`heart` のみ) の要素に対し、`transform` プロパティを入力します。 `rotate()` 関数を -45deg を指定して使用してください。
|
||||
|
||||
最後に、`heart::before` セレクターの中で `content` プロパティを空文字列に設定してください。
|
||||
最後に、`.heart::before` セレクターの中で `content` プロパティを空文字列に設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`heart::after` セレクターの `background-color` プロパティは `pink` である必要があります。
|
||||
`.heart::after` セレクターの `background-color` プロパティは `pink` である必要があります。
|
||||
|
||||
```js
|
||||
const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
|
||||
@@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`heart::after` セレクターの `border-radius` は 50% である必要があります。
|
||||
`.heart::after` セレクターの `border-radius` は 50% である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
@@ -57,7 +57,7 @@ assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
|
||||
assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
|
||||
```
|
||||
|
||||
`heart::before` セレクターの `content` は空文字列である必要があります。
|
||||
`.heart::before` セレクターの `content` は空文字列である必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: use-a-bezier-curve-to-move-a-graphic
|
||||
|
||||
前回の課題では、アニメーションの変更を記述した `ease-out` キーワードについて説明しました。このキーワードは、最初にスピードを上げ、アニメーションの終わりにスローダウンします。 右側に `ease-out` キーワード (青色の要素用) と `linear` キーワード (赤色の要素用) の違いを示します。 `ease-out` キーワードと同様のアニメーションの動きは、カスタム三次ベジェ曲線関数を使用することで実現できます。
|
||||
|
||||
一般的に、`p1` と `p2` のアンカーポイントを変更すると異なるベジェ曲線が作成され、時間の経過と共にアニメーションがどのように進むかを制御します。 以下は、ease-out スタイルを模倣する値を使用したベジェ曲線の例です。
|
||||
一般的に、`p1` と `p2` のアンカーポイントを変更すると異なるベジェ曲線が作成され、時間の経過と共にアニメーションがどのように進むかを制御します。 以下は、`ease-out` スタイルを模倣する値を使用したベジェ曲線の例です。
|
||||
|
||||
```css
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: change-a-variable-for-a-specific-area
|
||||
|
||||
`:root` で変数を作成すると、その変数の値がページ全体に設定されます。
|
||||
|
||||
これらの変数を特定の要素内で再度設定して上書きすることができます。
|
||||
これらの変数を特定のセレクター内で再度設定して上書きすることができます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ CSS 変数を作成するには、2 つのハイフンで始まる名前を付
|
||||
--penguin-skin: gray;
|
||||
```
|
||||
|
||||
これで `--penguin-skin` という名前の変数が作成され、`gray` の値が代入されます。 今では CSS の他の場所でその変数を使用して、他の要素の値を gray に変更できるようになりました。
|
||||
これで `--penguin-skin` という名前の変数が作成され、`gray` の値が代入されます。 CSS の他の場所でこの変数を使用して、他のプロパティの値を gray に変更できます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -77,7 +77,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`h1` 要素は、`body` 要素から緑の文字色を継承しているはずです。
|
||||
`h1` 要素は、`body` 要素から文字色 `green` を継承しているはずです。
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
|
||||
|
||||
@@ -27,7 +27,7 @@ class="class1 class2"
|
||||
|
||||
**注:** HTML 要素にクラスを並べる順番は関係ありません。
|
||||
|
||||
しかし、`<style>` セクション内での `class` 宣言の順番が重要になります。 2 番目の宣言は常に最初の宣言よりも優先されます。 `.blue-text` は 2 番目に宣言されているため、`.pink-text` の属性をオーバーライドします。
|
||||
しかし、`<style>` セクション内での `class` 宣言の順番が重要になります。 2 番目の宣言は常に最初の宣言よりも優先されます。 `.blue-text` は2番目に宣言されているため、 `.pink-text` の属性をオーバーライドします。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@ CSS 変数は、メディアクエリの使い方をシンプルにできます
|
||||
|
||||
# --instructions--
|
||||
|
||||
`media query` の `:root` セレクターの中で、`--penguin-size` を再定義して値が `200px` となるように変更してください。 また、`--penguin-skin` も再定義し、`black` の値を設定してください。 その後、プレビューの表示サイズを変更して、この変更が動作していることを確認してください。
|
||||
メディアクエリの `:root` セレクターの中で、`--penguin-size` を再定義して値が `200px` となるように変更してください。 また、`--penguin-skin` も再定義し、`black` の値を設定してください。 その後、プレビューの表示サイズを変更して、この変更が動作していることを確認してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@ dashedName: use-abbreviated-hex-code
|
||||
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
赤を指定するために、16 進数コード `#FF0000` の代わりに短縮形の `hex code` を使用してください。
|
||||
赤を指定するために、16 進数コード `#FF0000` の代わりに短縮形の 16 進数コードを使用してください。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
||||
@@ -41,7 +41,7 @@ assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
|
||||
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
|
||||
```
|
||||
|
||||
緑を指定するために、16 進数コード `#00FF00` の代わりに短縮形の `hex code` を使用してください。
|
||||
緑を指定するために、16 進数コード `#00FF00` の代わりに短縮形の 16 進数コードを使用してください。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
||||
@@ -53,7 +53,7 @@ assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
|
||||
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
|
||||
```
|
||||
|
||||
シアンを指定するために、16 進数コード `#00FFFF` の代わりに短縮形の `hex code` を使用してください。
|
||||
シアンを指定するために、16 進数コード `#00FFFF` の代わりに短縮形の 16 進数コードを使用してください。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
||||
@@ -65,7 +65,7 @@ assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
|
||||
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
|
||||
```
|
||||
|
||||
フューシャを指定するために、16 進数コード `#FF00FF` の代わりに短縮形の `hex code` を使用してください。
|
||||
フューシャを指定するために、16 進数コード `#FF00FF` の代わりに短縮形の 16 進数コードを使用してください。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
|
||||
|
||||
@@ -27,13 +27,13 @@ body {
|
||||
|
||||
# --hints--
|
||||
|
||||
`body` 要素は background-color を黒に設定されている必要があります。
|
||||
`body` 要素は `background-color` を黒に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
|
||||
```
|
||||
|
||||
`black` という単語の代わりに、黒を表す `hex code` (16 進数コード) を使用します。
|
||||
`black` という単語の代わりに、黒を表す 16 進数コードを使用します。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -11,7 +11,7 @@ dashedName: check-radio-buttons-and-checkboxes-by-default
|
||||
|
||||
`checked` 属性を使用して、チェックボックスやラジオボタンをデフォルトで選択された状態にすることができます。
|
||||
|
||||
そのためには、`checked` という単語を input 要素の内部に追加します。 例:
|
||||
そのためには、`checked` という単語を `input` 要素の内部に追加します。 例:
|
||||
|
||||
```html
|
||||
<input type="radio" name="test-name" checked>
|
||||
|
||||
@@ -43,7 +43,7 @@ assert($('p').length === 0);
|
||||
assert(code.match(/[^fc]-->/g).length > 1);
|
||||
```
|
||||
|
||||
コード内の `h1` `h2` または `p` の順序を変更してはいけません。
|
||||
コード内の `h1`、`h2`、または `p` 要素の順序を変更してはいけません。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
|
||||
|
||||
# --description--
|
||||
|
||||
CSS の flexbox には、フレックスアイテムを複数の行 (または列) に分割する機能があります。 デフォルトでは、フレックスコンテナはすべてのフレックスアイテムが1つに収まるように格納します。 例えば、行はすべて1行になります。
|
||||
CSS の flexbox には、フレックスコンテナを複数の行 (または列) に分割する機能があります。 デフォルトでは、フレックスコンテナはすべてのフレックスアイテムが1つに収まるように格納します。 例えば、行はすべて1行になります。
|
||||
|
||||
しかし、`flex-wrap` プロパティを使用することでアイテムを折り返すように CSS に指示できます。 これにより、はみ出したアイテムは新しい行または列に移動します。 折り返す際のブレークポイントは、アイテムのサイズとコンテナのサイズによって決まります。
|
||||
|
||||
|
||||
@@ -17,7 +17,7 @@ dashedName: place-items-in-grid-areas-using-the-grid-area-property
|
||||
}
|
||||
```
|
||||
|
||||
これにより、`item1` クラスを `header` という名前のエリアに移動させることができます。 この場合、行全体が header エリアと名付けられているため、アイテムは一番上の行全体を使用します。
|
||||
これにより、`item1` クラスを `header` という名前のエリアに移動させることができます。 この場合、行全体が `header` エリアと名付けられているため、アイテムは一番上の行全体を使用します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -31,7 +31,7 @@ grid-template-columns: auto 50px 10% 2fr 1fr;
|
||||
|
||||
# --hints--
|
||||
|
||||
`container` クラスは幅が `1fr, 100px, and 2fr` の 3 列を生成する `grid-template-columns` プロパティを持つ必要があります。
|
||||
`container` クラスは幅が `1fr`、`100px`、`2fr` の 3 列を生成する `grid-template-columns` プロパティを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Reference in New Issue
Block a user