gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(i18n,learn): processed translations (#45555)

Browse Source
This commit is contained in:
camperbot
2022-03-29 01:44:21 +05:30
committed by GitHub
parent 0ec459d7ff
commit 43496432d6
22 changed files with 137 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md
View File

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

8
curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md
View File

@@ -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));

6
curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md
View File

@@ -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(

10
curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md
View File

@@ -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));

2
curriculum/challenges/japanese/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md
View File

@@ -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);