Skip to content

Commit 5fc59db

Browse files
camperbotcamperbot
authored
chore(i18n,learn): processed translations (freeCodeCamp#47415)
1 parent 57695d7 commit 5fc59db

File tree

3 files changed

+242
-0
lines changed

3 files changed

+242
-0
lines changed

‎curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
id: 5f07be6ef7412fbad0c5626b
3+
title: ステップ 15
4+
challengeType: 0
5+
dashedName: step-15
6+
---
7+
8+
# --description--
9+
10+
新しいコンテンツを追加する前に、`section` 要素を利用して猫の写真とこれから追加するコンテンツを分けましょう。
11+
12+
現在 `main` 要素内にあるすべての要素を、`section` 要素の中にネストしましょう。
13+
14+
# --hints--
15+
16+
`section` 要素には開始タグが必要です。 開始タグは `<elementName>` のような形式の構文です。
17+
18+
```js
19+
assert(document.querySelector('section'));
20+
```
21+
22+
`section` 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。
23+
24+
```js
25+
assert(code.match(/<\/section\>/));
26+
```
27+
28+
`section` 要素全体が、`main` 要素の開始タグと終了タグの間にあるようにしてください。
29+
30+
```js
31+
assert(document.querySelector('section').parentNode.nodeName === 'MAIN');
32+
```
33+
34+
既存の `h2` 要素、コメント、`p` 要素、アンカー (`a`) 要素が、`section` 要素の開始タグと終了タグの間にあるようにしてください。
35+
36+
```js
37+
const childrenOfSection = [...document.querySelector('section').childNodes];
38+
const foundElems = childrenOfSection.filter((child) => {
39+
return ['H2', 'A', 'P'].includes(child.nodeName);
40+
});
41+
assert(foundElems.length === 3);
42+
```
43+
44+
# --seed--
45+
46+
## --seed-contents--
47+
48+
```html
49+
<html>
50+
<body>
51+
<h1>CatPhotoApp</h1>
52+
--fcc-editable-region--
53+
<main>
54+
<h2>Cat Photos</h2>
55+
<!-- TODO: Add link to cat photos -->
56+
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
57+
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
58+
</main>
59+
--fcc-editable-region--
60+
</body>
61+
</html>
62+
```
63+

‎curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
---
2+
id: 5f07c98cdb9413cbd4b16750
3+
title: ステップ 16
4+
challengeType: 0
5+
dashedName: step-16
6+
---
7+
8+
# --description--
9+
10+
では新しいセクションを追加しましょう。 既存の `section` 要素の下に、2 つ目の `section` 要素を追加してください。
11+
12+
# --hints--
13+
14+
`section` 要素には開始タグが必要です。 開始タグは `<elementName>` のような形式の構文です。
15+
16+
```js
17+
assert(document.querySelectorAll('section').length >= 2);
18+
```
19+
20+
`section` の開始タグは 1 つだけ追加してください。 余分なものは削除してください。
21+
22+
```js
23+
assert(document.querySelectorAll('section').length === 2);
24+
```
25+
26+
`section` 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。
27+
28+
```js
29+
assert(code.match(/<\/section>/g).length >= 2);
30+
```
31+
32+
`section` の終了タグは 1 つだけ追加してください。 余分なものは削除してください。
33+
34+
```js
35+
assert(code.match(/<\/section>/g).length === 2);
36+
```
37+
38+
2 つ目の `section` 要素を 1 つ目の `section` 要素の中にネストしないでください。
39+
40+
```js
41+
const childrenOf1stSection = [
42+
...document.querySelector('main > section').children
43+
];
44+
const foundElems = childrenOf1stSection.filter((child) => {
45+
return child.nodeName === 'SECTION';
46+
});
47+
assert(foundElems.length === 0);
48+
```
49+
50+
両方の `section` 要素が、`main` 要素の開始タグと終了タグの間にあるようにしてください。
51+
52+
```js
53+
const childrenOfMain = [...document.querySelector('main').children];
54+
const foundElems = childrenOfMain.filter((child) => {
55+
return child.nodeName === 'SECTION';
56+
});
57+
assert(foundElems.length === 2);
58+
```
59+
60+
# --seed--
61+
62+
## --seed-contents--
63+
64+
```html
65+
<html>
66+
<body>
67+
<h1>CatPhotoApp</h1>
68+
<main>
69+
--fcc-editable-region--
70+
<section>
71+
<h2>Cat Photos</h2>
72+
<!-- TODO: Add link to cat photos -->
73+
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
74+
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
75+
</section>
76+
--fcc-editable-region--
77+
</main>
78+
</body>
79+
</html>
80+
```
81+

‎curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
id: 5f07fb1579dc934717801375
3+
title: ステップ 32
4+
challengeType: 0
5+
dashedName: step-32
6+
---
7+
8+
# --description--
9+
10+
では新しいセクションを追加しましょう。 3 つ目の `section` 要素を、2 つ目の `section` 要素の下に追加してください。
11+
12+
# --hints--
13+
14+
`section` 要素には開始タグが必要です。 開始タグは `<elementName>` のような形式の構文です。
15+
16+
```js
17+
assert(document.querySelectorAll('section').length >= 3);
18+
```
19+
20+
`section` の開始タグは 1 つだけ追加してください。 余分なものは削除してください。
21+
22+
```js
23+
assert(document.querySelectorAll('section').length === 3);
24+
```
25+
26+
`section` 要素には終了タグが必要です。 終了タグは `<` の直後に `/` があります。
27+
28+
```js
29+
assert(code.match(/<\/section>/g).length >= 3);
30+
```
31+
32+
`section` の終了タグは 1 つだけ追加してください。 余分なものは削除してください。
33+
34+
```js
35+
assert(code.match(/<\/section>/g).length === 3);
36+
```
37+
38+
すべての `section` 要素が、`main` 要素の開始タグと終了タグの間にあるようにしてください。
39+
40+
```js
41+
const childrenOfMain = [...document.querySelector('main').children];
42+
const sectionElemsFound = childrenOfMain.filter((child) => {
43+
return child.nodeName === 'SECTION';
44+
});
45+
assert(sectionElemsFound.length === 3);
46+
```
47+
48+
最後の `section` 要素には中身がないようにしてください。 最後の `section` 要素の中の HTML 要素やテキストは削除してください。
49+
50+
```js
51+
assert($('main > section')[2].children.length === 0);
52+
```
53+
54+
# --seed--
55+
56+
## --seed-contents--
57+
58+
```html
59+
<html>
60+
<body>
61+
<h1>CatPhotoApp</h1>
62+
<main>
63+
<section>
64+
<h2>Cat Photos</h2>
65+
<!-- TODO: Add link to cat photos -->
66+
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
67+
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
68+
</section>
69+
--fcc-editable-region--
70+
<section>
71+
<h2>Cat Lists</h2>
72+
<h3>Things cats love:</h3>
73+
<ul>
74+
<li>cat nip</li>
75+
<li>laser pointers</li>
76+
<li>lasagna</li>
77+
</ul>
78+
<figure>
79+
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
80+
<figcaption>Cats <em>love</em> lasagna.</figcaption>
81+
</figure>
82+
<h3>Top 3 things cats hate:</h3>
83+
<ol>
84+
<li>flea treatment</li>
85+
<li>thunder</li>
86+
<li>other cats</li>
87+
</ol>
88+
<figure>
89+
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
90+
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
91+
</figure>
92+
</section>
93+
--fcc-editable-region--
94+
</main>
95+
</body>
96+
</html>
97+
```
98+

0 commit comments

Comments
 (0)