chore(i18n,learn): processed translations (#44851)
This commit is contained in:
camperbot
GitHub
@ -0,0 +1,113 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08830
|
||||
title: フォームに送信ボタンを追加する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
|
||||
forumTopicId: 16627
|
||||
dashedName: add-a-submit-button-to-a-form
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`submit` (送信) ボタンをフォームに追加しましょう。 このボタンをクリックすると、フォームの `action` 属性で指定した URL にフォームのデータが送信されます。
|
||||
|
||||
こちらが送信ボタンの例です:
|
||||
|
||||
```html
|
||||
<button type="submit">this button submits the form</button>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`form` 要素内の最後の要素として `submit` タイプのボタンを追加してください。ボタンのテキストは `Submit` としてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`form` の中に `button` が必要です。
|
||||
|
||||
```js
|
||||
assert($('form').children('button').length > 0);
|
||||
```
|
||||
|
||||
送信ボタンは `type` 属性を `submit` に設定する必要があります。
|
||||
|
||||
```js
|
||||
assert($('button').attr('type') === 'submit');
|
||||
```
|
||||
|
||||
送信ボタンのテキストは `Submit` にしてください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('button')
|
||||
.text()
|
||||
.match(/^\s*submit\s*$/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`button` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/button>/g) &&
|
||||
code.match(/<button/g) &&
|
||||
code.match(/<\/button>/g).length === code.match(/<button/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,92 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08812
|
||||
title: ウェブサイトに画像を追加する
|
||||
challengeType: 0
|
||||
forumTopicId: 16640
|
||||
dashedName: add-images-to-your-website
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`img` 要素を使用し、特定の画像に対するURLを `src` 属性で指定することで、ウェブサイトに画像を追加することができます。
|
||||
|
||||
この例は次のとおりです:
|
||||
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg">
|
||||
```
|
||||
|
||||
`img` 要素は終了タグを持たないことに注意してください。
|
||||
|
||||
すべての `img` 要素は **必ず** `alt` 属性を持たなければなりません。 `alt` 属性内のテキストは、アクセシビリティを向上させるためにスクリーンリーダーが使用します。また、画像の読み込みに失敗した場合にも表示されます。
|
||||
|
||||
**注:** 単なる装飾目的の画像である場合には、空の `alt` 属性を使用することがベストプラクティスです。
|
||||
|
||||
理想的には、必要がない限り `alt` 属性には特殊文字を含まないようにしてください。
|
||||
|
||||
上の例の `img` に `alt` 属性を追加してみましょう:
|
||||
|
||||
```html
|
||||
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
私達のウェブサイトに画像を追加しましょう。
|
||||
|
||||
既存の `main` 要素内の `p` 要素の前に `img` 要素を挿入します。
|
||||
|
||||
次に `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg` という url を指すように `src` 属性を設定します。
|
||||
|
||||
最後に、`img` 要素に適切なテキストを持つ `alt` 属性を与えることを忘れないでください。
|
||||
|
||||
# --hints--
|
||||
|
||||
ページに画像要素が必要です。
|
||||
|
||||
```js
|
||||
assert($('img').length);
|
||||
```
|
||||
|
||||
画像には、子猫の画像を指す `src` 属性が必要です。
|
||||
|
||||
```js
|
||||
assert(/^https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg$/i.test($('img').attr('src')));
|
||||
```
|
||||
|
||||
画像要素の `alt` 属性は空であってはいけません。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('img').attr('alt') &&
|
||||
$('img').attr('alt').length &&
|
||||
/<img\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(
|
||||
__helpers.removeWhiteSpace(code)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,108 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08830
|
||||
title: テキストフィールドにプレイスホルダ―テキストを追加する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
|
||||
forumTopicId: 16647
|
||||
dashedName: add-placeholder-text-to-a-text-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
プレイスホルダ―テキストは、ユーザーが何かを入力する前に `input` 要素に表示されているテキストです。
|
||||
|
||||
次のようにしてプレイスホルダ―テキストを作成できます。
|
||||
|
||||
```html
|
||||
<input type="text" placeholder="this is placeholder text">
|
||||
```
|
||||
|
||||
**注:** `input` 要素は終了タグを持たないことを忘れないでください。
|
||||
|
||||
# --instructions--
|
||||
|
||||
テキストタイプの `input` の `placeholder` の値に "cat photo URL" を指定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
既存のテキストタイプの `input` 要素に、`placeholder` 属性を追加してください。
|
||||
|
||||
```js
|
||||
assert($('input[placeholder]').length > 0);
|
||||
```
|
||||
|
||||
`placeholder` 属性の値を `cat photo URL` に設定してください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input') &&
|
||||
$('input').attr('placeholder') &&
|
||||
$('input')
|
||||
.attr('placeholder')
|
||||
.match(/cat\s+photo\s+URL/gi)
|
||||
);
|
||||
```
|
||||
|
||||
完成した `input` 要素は終了タグを持たないはずです。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<input.*\/?>.*<\/input>/gi));
|
||||
```
|
||||
|
||||
完成した `input` 要素は正しい構文でなければなりません。
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text">
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,116 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedd08835
|
||||
title: ラジオボタンやチェックボックスをデフォルトでオンにする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6'
|
||||
forumTopicId: 301094
|
||||
dashedName: check-radio-buttons-and-checkboxes-by-default
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`checked` 属性を使用して、チェックボックスやラジオボタンをデフォルトで選択された状態にすることができます。
|
||||
|
||||
そのためには、`checked` という単語を input 要素の内部に追加します。 例:
|
||||
|
||||
```html
|
||||
<input type="radio" name="test-name" checked>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
一番目のラジオボタンと一番目のチェックボックスがデフォルトで選択されるように設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
フォームの一番目のラジオボタンがデフォルトで選択されている必要があります。
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').prop('checked'));
|
||||
```
|
||||
|
||||
フォームの一番目のチェックボックスがデフォルトで選択されている必要があります。
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').prop('checked'));
|
||||
```
|
||||
|
||||
`Indoor` ラベルの内部テキストを変更しないようにしてください。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('label[for="indoor"]')?.innerText?.trim(), 'Indoor');
|
||||
```
|
||||
|
||||
`Loving` ラベルの内部テキストを変更しないようにしてください。
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('label[for="loving"]')?.innerText?.trim(), 'Loving');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08804
|
||||
title: HTML をコメントアウトする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cGyGbca'
|
||||
forumTopicId: 16782
|
||||
dashedName: comment-out-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
コメントを開始するには `<!--` を使用し、終了するには `-->` を使用することを思い出してください。
|
||||
|
||||
ここでは、`h2` 要素が始まる前にコメントを終了するようにします。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`h1` 要素と `p` 要素をコメントアウトし、`h2` 要素はコメントアウトしないようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 要素がページに表示されないようにコメントアウトする必要があります。
|
||||
|
||||
```js
|
||||
assert($('h1').length === 0);
|
||||
```
|
||||
|
||||
`h2` 要素は、ページに表示されるようにコメントアウトしないでください。
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
`p` 要素がページに表示されないようにコメントアウトする必要があります。
|
||||
|
||||
```js
|
||||
assert($('p').length === 0);
|
||||
```
|
||||
|
||||
それぞれのコメントは `-->` で閉じる必要があります
|
||||
|
||||
```js
|
||||
assert(code.match(/[^fc]-->/g).length > 1);
|
||||
```
|
||||
|
||||
コード内の `h1` `h2` または `p` の順序を変更してはいけません。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[0] === '<h1>' &&
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[1] === '<h2>' &&
|
||||
code.match(/<([a-z0-9]){1,2}>/g)[2] === '<p>'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!--<h1>Hello World</h1>-->
|
||||
<h2>CatPhotoApp</h2>
|
||||
<!--<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> -->
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08827
|
||||
title: 順序なしの箇条書きを作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
|
||||
forumTopicId: 16814
|
||||
dashedName: create-a-bulleted-unordered-list
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML には<dfn>順序なしリスト (unordered lists) </dfn> または箇条書きと呼ばれるリストを作成するための特別な要素があります。
|
||||
|
||||
順序なしリストは `<ul>` 要素で始まり、その後に任意の数の `<li>` 要素が続きます。 最後に、`</ul>` で閉じます。
|
||||
|
||||
例:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li>cheese</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
上の例は `milk` と `cheese` の箇条書きリストを作成します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
最後の 2 つの `p` 要素を削除し、ページの下部に猫が好きな 3 つの物の順序なしリストを作成しましょう。
|
||||
|
||||
# --hints--
|
||||
|
||||
`ul` 要素を作成してください。
|
||||
|
||||
```js
|
||||
assert($('ul').length > 0);
|
||||
```
|
||||
|
||||
`ul` 要素の中に、3 つの `li` 要素を入れてください。
|
||||
|
||||
```js
|
||||
assert($('ul li').length > 2);
|
||||
```
|
||||
|
||||
`ul` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ul>/gi) &&
|
||||
code.match(/<ul/gi) &&
|
||||
code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length
|
||||
);
|
||||
```
|
||||
|
||||
それぞれの `li` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/li>/gi) &&
|
||||
code.match(/<li[\s>]/gi) &&
|
||||
code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length
|
||||
);
|
||||
```
|
||||
|
||||
`li` 要素は、空の文字列または空白のみを含めた状態ではいけません。
|
||||
|
||||
```js
|
||||
assert($('ul li').filter((_, item) => !$(item).text().trim()).length === 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li>mice</li>
|
||||
<li>catnip</li>
|
||||
</ul>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,106 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08830
|
||||
title: フォーム要素を作成する
|
||||
challengeType: 0
|
||||
forumTopicId: 16817
|
||||
dashedName: create-a-form-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
純粋な HTML だけで、実際にデータをサーバーに送信するウェブフォームを作成できます。 そのためには、`form` 要素に `action` 属性を指定します。
|
||||
|
||||
例:
|
||||
|
||||
```html
|
||||
<form action="/url-where-you-want-to-submit-form-data">
|
||||
<input>
|
||||
</form>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
既存の `input` 要素を `form` 要素の内側にネストし、`form` 要素の `action` 属性に `"https://www.freecatphotoapp.com/submit-cat-photo"` を設定してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
既存の `input` 要素が `form` 要素内にネストされる必要があります。
|
||||
|
||||
```js
|
||||
const inputElem = document.querySelector('form input');
|
||||
assert(
|
||||
inputElem.getAttribute('type') === 'text' &&
|
||||
inputElem.getAttribute('placeholder') === 'cat photo URL'
|
||||
);
|
||||
```
|
||||
|
||||
`form` の `action` 属性は `https://www.freecatphotoapp.com/submit-cat-photo` に設定される必要があります。
|
||||
|
||||
```js
|
||||
const action = $('form').attr('action');
|
||||
assert(action.match(/^https:\/\/(www\.)?freecatphotoapp\.com\/submit-cat-photo$/i))
|
||||
```
|
||||
|
||||
`form` 要素には適切な開始タグと終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/form>/g) &&
|
||||
code.match(/<form [^<]*>/g) &&
|
||||
code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,135 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08835
|
||||
title: チェックボックスのセットを作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
|
||||
forumTopicId: 16821
|
||||
dashedName: create-a-set-of-checkboxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
フォームでは一般的に、複数の回答がある可能性のある質問には<dfn>チェックボックス</dfn>を使用します。
|
||||
|
||||
チェックボックスは `input` の一種です。
|
||||
|
||||
1 つ 1 つのチェックボックスは、対応する `label` 要素内にネストすることができます。 `input` 要素を `label` 要素の中に入れることにより、チェックボックスがそれを囲んでいるラベル要素と自動的に関連付けられます。
|
||||
|
||||
すべての関係するチェックボックスは同じ `name` 属性を持つようにします。
|
||||
|
||||
`label` 要素の `for` 属性に `input` 要素の `id` 属性と一致する値を設定し、チェックボックスの `input` と対応する `label` 要素との関係を明示的に定義することがベストプラクティスと考えられています。
|
||||
|
||||
こちらがチェックボックスの例です:
|
||||
|
||||
```html
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
フォームに 3 つのチェックボックスを追加しましょう。 各チェックボックスは、それぞれの `label` 要素内に入れ子にしてください。 3 つとも `name` 属性を `personality` としてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
ページにはチェックボックス要素が 3 つ必要です。
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').length > 2);
|
||||
```
|
||||
|
||||
3 つのチェックボックス要素は、それぞれ対応する `label` 要素にネストされている必要があります。
|
||||
|
||||
```js
|
||||
assert($('label > input[type="checkbox"]:only-child').length > 2);
|
||||
```
|
||||
|
||||
それぞれの `label` 要素に終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/label>/g) &&
|
||||
code.match(/<label/g) &&
|
||||
code.match(/<\/label>/g).length === code.match(/<label/g).length
|
||||
);
|
||||
```
|
||||
|
||||
チェックボックスの `name` 属性は `personality` に設定してください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label > input[type="checkbox"]').filter('[name="personality"]').length > 2
|
||||
);
|
||||
```
|
||||
|
||||
各チェックボックスは、`form` タグ内に追加する必要があります。
|
||||
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label for="playful"><input id="playful" type="checkbox" name="personality">Playful</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox"
|
||||
name="personality">Lazy</label>
|
||||
<label for="evil"><input id="evil" type="checkbox"
|
||||
name="personality">Evil</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,160 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08834
|
||||
title: ラジオボタンのセットを作成する
|
||||
challengeType: 0
|
||||
forumTopicId: 16822
|
||||
dashedName: create-a-set-of-radio-buttons
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ユーザーに複数の選択肢から 1 つだけ回答を選んでほしい質問には<dfn>ラジオボタン</dfn>を使うことができます。
|
||||
|
||||
ラジオボタンは `input` の一種です。
|
||||
|
||||
1 つ 1 つのラジオボタンは、対応する `label` 要素内にネストすることができます。 `input` 要素を `label` 要素の中に入れることにより、ラジオボタンがそれを囲んでいるラベル要素と自動的に関連付けられます。
|
||||
|
||||
ラジオボタングループを作成するために、すべての関係するラジオボタンには同じ `name` 属性を設定します。 ラジオボタングループを作成することにより、どれか 1 つのラジオボタンを選択すると同じグループ内の他のラジオボタンの選択が自動的に解除されるようになり、ユーザーから回答が 1 つだけ提供されることが保証されます。
|
||||
|
||||
こちらがラジオボタンの例です:
|
||||
|
||||
```html
|
||||
<label>
|
||||
<input type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
```
|
||||
|
||||
`label` 要素の `for` 属性に、`input` 要素の `id` 属性と一致する値を設定することがベストプラクティスと考えられています。 そうすることにより、アシスティブ・テクノロジーがラベルと対応する `input` 要素を関連付けることができるようになります。 例:
|
||||
|
||||
```html
|
||||
<input id="indoor" type="radio" name="indoor-outdoor">
|
||||
<label for="indoor">Indoor</label>
|
||||
```
|
||||
|
||||
`input` 要素を `label` タグの中にネストすることもできます:
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
フォームに、それぞれが `label` 要素の中にネストされた 2 つのラジオボタンを追加してください。 1 つは `indoor` の選択肢、もう一つは `outdoor` の選択肢を持つようにしてください。 ラジオボタングループを作成するために、両方とも `name` 属性は `indoor-outdoor` としてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
ページには `radio` ボタン要素が 2 つ必要です。
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').length > 1);
|
||||
```
|
||||
|
||||
ラジオボタンの `name` 属性は `indoor-outdoor` に設定してください。
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
|
||||
```
|
||||
|
||||
2 つのラジオボタン要素は、それぞれ対応する `label` 要素にネストされている必要があります。
|
||||
|
||||
```js
|
||||
assert($('label > input[type="radio"]:only-child').length > 1);
|
||||
```
|
||||
|
||||
それぞれの `label` 要素に終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/label>/g) &&
|
||||
code.match(/<label/g) &&
|
||||
code.match(/<\/label>/g).length === code.match(/<label/g).length
|
||||
);
|
||||
```
|
||||
|
||||
ラジオボタンの 1 つに `indoor` というラベルを付けてください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label')
|
||||
.text()
|
||||
.match(/indoor/gi)
|
||||
);
|
||||
```
|
||||
|
||||
ラジオボタンの 1 つに `outdoor` というラベルを付けてください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label')
|
||||
.text()
|
||||
.match(/outdoor/gi)
|
||||
);
|
||||
```
|
||||
|
||||
各ラジオボタン要素は `form` タグ内に追加する必要があります。
|
||||
|
||||
```js
|
||||
assert($('label').parent().get(0).tagName.match('FORM'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08829
|
||||
title: テキストフィールドを作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
|
||||
forumTopicId: 16823
|
||||
dashedName: create-a-text-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
では、ウェブフォームを作成しましょう。
|
||||
|
||||
`input` 要素はユーザーからの入力を得る便利な方法です。
|
||||
|
||||
次のようにしてテキスト入力欄を作成できます。
|
||||
|
||||
```html
|
||||
<input type="text">
|
||||
```
|
||||
|
||||
`input` 要素は終了タグを持たないことに注意してください。
|
||||
|
||||
# --instructions--
|
||||
|
||||
リストの下に `text` タイプの `input` 要素を作成してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`text` タイプの `input` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert($('input[type=text]').length > 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
|
||||
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form>
|
||||
<input type="text">
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,157 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08828
|
||||
title: 順序付きリストを作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cQ3B8TM'
|
||||
forumTopicId: 16824
|
||||
dashedName: create-an-ordered-list
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML にはもう一つ、<dfn>順序付きリスト (ordered lists)</dfn> または番号付きリストを作成するための特別な要素があります。
|
||||
|
||||
順序付きリストは `<ol>` 要素で始まり、その後に任意の数の `<li>` 要素が続きます。 最後に、順序付きリストを `</ol>` タグで閉じます。
|
||||
|
||||
例:
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Garfield</li>
|
||||
<li>Sylvester</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
上の例は `Garfield` と `Sylvester` の番号付きリストを作成します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
猫が嫌いな物トップ 3 の順序付きリストを作成しましょう。
|
||||
|
||||
# --hints--
|
||||
|
||||
`Top 3 things cats hate:` の下に順序付きリストを作成してください。
|
||||
|
||||
```js
|
||||
assert(/Top 3 things cats hate:/i.test($('ol').prev().text()));
|
||||
```
|
||||
|
||||
`Things cats love:` の下には順序なしリストが必要です。
|
||||
|
||||
```js
|
||||
assert(/Things cats love:/i.test($('ul').prev().text()));
|
||||
```
|
||||
|
||||
`ul` 要素が 1 つだけ必要です。
|
||||
|
||||
```js
|
||||
assert.equal($('ul').length, 1);
|
||||
```
|
||||
|
||||
`ol` 要素が 1 つだけ必要です。
|
||||
|
||||
```js
|
||||
assert.equal($('ol').length, 1);
|
||||
```
|
||||
|
||||
`ul` 要素の中に `li` 要素が 3 つ必要です。
|
||||
|
||||
```js
|
||||
assert.equal($('ul li').length, 3);
|
||||
```
|
||||
|
||||
`ol` 要素の中に `li` 要素が 3 つ必要です。
|
||||
|
||||
```js
|
||||
assert.equal($('ol li').length, 3);
|
||||
```
|
||||
|
||||
`ul` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ul>/g) &&
|
||||
code.match(/<\/ul>/g).length === code.match(/<ul>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
`ol` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/ol>/g) &&
|
||||
code.match(/<\/ol>/g).length === code.match(/<ol>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
`li` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/li>/g) &&
|
||||
code.match(/<li>/g) &&
|
||||
code.match(/<\/li>/g).length === code.match(/<li>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
順序なしリストの `li` 要素は空にしないでください。
|
||||
|
||||
```js
|
||||
$('ul li').each((i, val) =>
|
||||
assert(__helpers.removeWhiteSpace(val.textContent))
|
||||
);
|
||||
```
|
||||
|
||||
順序付きリストの `li` 要素は空にしないでください。
|
||||
|
||||
```js
|
||||
$('ol li').each((i, val) =>
|
||||
assert(!!__helpers.removeWhiteSpace(val.textContent))
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>hate 1</li>
|
||||
<li>hate 2</li>
|
||||
<li>hate 3</li>
|
||||
</ol>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aed
|
||||
title: HTML ドキュメントの Doctype を宣言する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cra98AJ'
|
||||
forumTopicId: 301095
|
||||
dashedName: declare-the-doctype-of-an-html-document
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
これまでのチャレンジでは、特定の HTML 要素とその使い方を学んできました。 しかし、ページ全体の構造を示すため、すべての HTML ドキュメントに含めるべき要素がいくつかあります。
|
||||
|
||||
ドキュメントの最上部で、あなたのページが使用している HTML のバージョンをブラウザに伝える必要があります。 HTML は進化する言語であり、定期的に更新されています。 ほとんどの主要なブラウザは最新の仕様 (HTML5) をサポートしています。 ただし、古いウェブページでは以前のバージョンの言語を使用していることがあります。
|
||||
|
||||
この情報をブラウザに伝えるには `<!DOCTYPE ...>` タグを 1 行目に追加します。`...`の部分が HTML のバージョンになります。 HTML5 の場合は `<!DOCTYPE html>` を使用します。
|
||||
|
||||
古いブラウザでは特に `!` と大文字の `DOCTYPE` が重要です。 ここでの `html` は大文字と小文字を区別しません。
|
||||
|
||||
次に、残りの HTML コードを `html` タグで囲む必要があります。 開始タグ `<html>` は `<!DOCTYPE html>` の行のすぐ下に、終了タグ `</html>` はページの一番最後に置きます。
|
||||
|
||||
こちらがページの構造の例です。 あなたの HTML コードは 2 つの `html` タグの間に入ります。
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
HTML5 の `DOCTYPE` タグを、コードエディタに表示されている空白の HTML ドキュメントの先頭に追加してください。 その下に、`html` の開始タグと終了タグを追加して、`h1` 要素を囲むようにしてください。 見出しのテキストは何でも構いません。
|
||||
|
||||
# --hints--
|
||||
|
||||
あなたのコードには `<!DOCTYPE html>` タグが含まれている必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
|
||||
```
|
||||
|
||||
`html` 要素が 1 つ必要です。
|
||||
|
||||
```js
|
||||
assert($('html').length == 1);
|
||||
```
|
||||
|
||||
`html` タグは 1 つの `h1` 要素を囲む必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<h1> Hello world </h1>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 587d78aa367417b2b2512aec
|
||||
title: HTML ドキュメントのヘッダーと本文を定義する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
|
||||
forumTopicId: 301096
|
||||
dashedName: define-the-head-and-body-of-an-html-document
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`head` 要素と `body` 要素で、`html` タグ内にもう一段階の構造を追加することができます。 あなたのページに関する情報のマークアップは `head` タグの中に入ります。 そして、ページのコンテンツ (ユーザーに表示されるもの) のマークアップは `body` タグの中に入ります。
|
||||
|
||||
メタデータ要素、例えば `link`, `meta`, `title`, `style` などは、一般的に `head` 要素に入れます。
|
||||
|
||||
こちらがページのレイアウトの例です:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
マークアップを編集して `head` と `body` を作りましょう。 `head` 要素には `title` だけを含め、`body` 要素には `h1` と `p` だけを含めるようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
ページに `head` 要素が 1 つだけあるようにしてください。
|
||||
|
||||
```js
|
||||
const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
|
||||
assert(headElems && headElems.length === 1);
|
||||
```
|
||||
|
||||
ページに `body` 要素が 1 つだけあるようにしてください。
|
||||
|
||||
```js
|
||||
const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
|
||||
assert(bodyElems && bodyElems.length === 1);
|
||||
```
|
||||
|
||||
`head` 要素は、`html` 要素の子要素である必要があります。
|
||||
|
||||
```js
|
||||
const htmlChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<html\s*>(?<children>.*)<\/html\s*>/);
|
||||
let foundHead;
|
||||
if (htmlChildren) {
|
||||
const { children } = htmlChildren.groups;
|
||||
|
||||
foundHead = children.match(/<head\s*>.*<\/head\s*>/);
|
||||
}
|
||||
assert(foundHead);
|
||||
```
|
||||
|
||||
`body` 要素は、`html` 要素の子要素である必要があります。
|
||||
|
||||
```js
|
||||
const htmlChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<html\s*>(?<children>.*?)<\/html\s*>/);
|
||||
let foundBody;
|
||||
if (htmlChildren) {
|
||||
const { children } = htmlChildren.groups;
|
||||
foundBody = children.match(/<body\s*>.*<\/body\s*>/);
|
||||
}
|
||||
assert(foundBody);
|
||||
```
|
||||
|
||||
`head` 要素は、`title` 要素を囲む必要があります。
|
||||
|
||||
```js
|
||||
const headChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<head\s*>(?<children>.*?)<\/head\s*>/);
|
||||
let foundTitle;
|
||||
if (headChildren) {
|
||||
const { children } = headChildren.groups;
|
||||
foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
|
||||
}
|
||||
assert(foundTitle);
|
||||
```
|
||||
|
||||
`body` 要素は `h1` と `p` 要素の両方を囲む必要があります。
|
||||
|
||||
```js
|
||||
const bodyChildren = code
|
||||
.replace(/\n/g, '')
|
||||
.match(/<body\s*>(?<children>.*?)<\/body\s*>/);
|
||||
let foundElems;
|
||||
if (bodyChildren) {
|
||||
const { children } = bodyChildren.groups;
|
||||
const h1s = children.match(/<h1\s*>.*<\/h1\s*>/g);
|
||||
const ps = children.match(/<p\s*>.*<\/p\s*>/g);
|
||||
const numH1s = h1s ? h1s.length : 0;
|
||||
const numPs = ps ? ps.length : 0;
|
||||
foundElems = numH1s === 1 && numPs === 1;
|
||||
}
|
||||
assert(foundElems);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>The best page ever</title>
|
||||
|
||||
<h1>The best page ever</h1>
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>The best page ever</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>The best page ever</h1>
|
||||
<p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,56 @@
|
||||
---
|
||||
id: bad87fed1348bd9aedf08833
|
||||
title: HTML 要素を削除する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/ckK73C9'
|
||||
forumTopicId: 17559
|
||||
dashedName: delete-html-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
私たちのスマートフォンには、縦のスペースは多くありません。
|
||||
|
||||
不要な要素を削除して、猫の写真アプリを作り始めましょう。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`h1` 要素を削除して、表示をシンプルにしましょう。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 要素を削除する必要があります。
|
||||
|
||||
```js
|
||||
assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
|
||||
```
|
||||
|
||||
`h2` 要素が表示されている必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
|
||||
```
|
||||
|
||||
`p` 要素が表示されている必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<p>[\w\W]*<\/p>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
@ -0,0 +1,50 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08833
|
||||
title: プレイスホルダ―テキストで空白を埋める
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cgR7Dc7'
|
||||
forumTopicId: 18178
|
||||
dashedName: fill-in-the-blank-with-placeholder-text
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Web 開発者は慣習的に <dfn>lorem ipsum</dfn> テキストをプレイスホルダ―テキストとして使用します。 lorem ipsum テキストとは、古代ローマの哲学者キケロの書いた有名な文章をランダムに抜粋したものです。
|
||||
|
||||
lorem ipsum テキストはプレイスホルダ―テキストとして 16 世紀から植字工たちに使用されており、この伝統がウェブに引き継がれています。
|
||||
|
||||
5 世紀も使われていれば十分でしょう。 私たちは今猫の写真アプリを作っているので、「kitty ipsum」というテキストを使ってみましょう。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`p` 要素に囲まれたテキストを、以下の kitty ipsum テキスト冒頭の数単語で置き換えてください: `Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.`
|
||||
|
||||
# --hints--
|
||||
|
||||
`p` 要素には、与えられた「kitty ipsum」テキスト冒頭の数単語を含める必要があります。
|
||||
|
||||
```js
|
||||
assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Hello Paragraph</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff</p>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf0887a
|
||||
title: h2 要素を使った見出し
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gqf3'
|
||||
forumTopicId: 18196
|
||||
dashedName: headline-with-the-h2-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ここからいくつかのレッスンを通して、HTML5 で猫の写真を表示するウェブアプリを作ります。
|
||||
|
||||
このステップで追加する `h2` 要素は、ウェブページにレベル 2 の見出し要素を追加します。
|
||||
|
||||
この要素は、あなたのウェブサイトの構造をブラウザに伝えます。 `h1` 要素はメインの見出しに、`h2` 要素は小見出しに使われることが多いです。 他に `h3`, `h4`, `h5`, `h6` 要素があり、異なるレベルの小見出しを表します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
"CatPhotoApp" のテキストを持つ `h2`タグを追加して、"Hello World" の `h1` 要素の下に2つ目のHTML要素を作成してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h2` 要素を作成してください。
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
`h2` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/h2>/g) &&
|
||||
code.match(/<\/h2>/g).length === code.match(/<h2>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
`h2` 要素のテキストは `CatPhotoApp` でなければなりません。
|
||||
|
||||
```js
|
||||
assert.isTrue(/cat(\s)?photo(\s)?app/gi.test($('h2').text()));
|
||||
```
|
||||
|
||||
`h1` 要素のテキストは `Hello World` でなければなりません。
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
`h1` 要素は `h2` 要素の前に置く必要があります。
|
||||
|
||||
```js
|
||||
assert(code.match(/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
```
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08801
|
||||
title: 段落要素で情報を伝える
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/ceZ7DtN'
|
||||
forumTopicId: 18202
|
||||
dashedName: inform-with-the-paragraph-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`p` 要素はウェブサイト上で文章の段落を示すのに適した要素です。 `p` は "paragraph" (段落) の略です。
|
||||
|
||||
段落の要素は以下のように作成できます。
|
||||
|
||||
```html
|
||||
<p>I'm a p tag!</p>
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
`p` 要素を `h2` 要素の下に作成し、段落のテキストは `Hello Paragraph` にしてください。
|
||||
|
||||
**注:** 慣習的に、HTMLタグは小文字で書かれます。例えば `<P></P>` ではなく `<p></p>` となります。
|
||||
|
||||
# --hints--
|
||||
|
||||
正しい `p` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
`p` 要素には `Hello Paragraph` というテキストが必要です。
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+paragraph/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
`p` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
<h2>CatPhotoApp</h2>
|
||||
<p>Hello Paragraph</p>
|
||||
```
|
||||
@ -0,0 +1,98 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecf08801
|
||||
title: HTML5 要素入門
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7'
|
||||
forumTopicId: 301097
|
||||
dashedName: introduction-to-html5-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
HTML5 では、より説明的な HTML タグが導入されています。 例えば `main`, `header`, `footer`, `nav`, `video`, `article`, `section` など。これ以外にもあります。
|
||||
|
||||
これらのタグは HTML の文章に記述的な構造を与え、HTML を読みやすくし、SEO (検索エンジン最適化) やアクセシビリティを向上させます。 HTML5 の `main` タグは、検索エンジンや他の開発者があなたのページのメインコンテンツを見つけるのに役立ちます。
|
||||
|
||||
例えば、2 つの子要素が入れ子にされた `main` 要素は次のようになります:
|
||||
|
||||
```html
|
||||
<main>
|
||||
<h1>Hello World</h1>
|
||||
<p>Hello Paragraph</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
**注:** 新しい HTML5 タグとその利点については、応用アクセシビリティのセクションで詳細に解説します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
次の kitty ipsum テキストを持つ 2 つ目の `p` 要素を作成してください: `Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`
|
||||
|
||||
次に、`main` 要素を作成し、2 つの `p` 要素を `main` 要素の中に入れ子で配置してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
Kitty Ipsum テキストを持つ 2 つの `p` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert($('p').length > 1);
|
||||
```
|
||||
|
||||
それぞれの `p` 要素に終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
`p` 要素には、追加で与えられた `kitty ipsum` テキストの、はじめの数単語を含む必要があります。
|
||||
|
||||
```js
|
||||
assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
|
||||
```
|
||||
|
||||
コードには `main` 要素が1つ必要です。
|
||||
|
||||
```js
|
||||
assert($('main').length === 1);
|
||||
```
|
||||
|
||||
`main` 要素は、子要素として 2 つの段落要素を持つ必要があります。
|
||||
|
||||
```js
|
||||
assert($('main').children('p').length === 2);
|
||||
```
|
||||
|
||||
`main` の開始タグは、最初の段落タグの前になければなりません。
|
||||
|
||||
```js
|
||||
assert(code.match(/<main>\s*?<p>/g));
|
||||
```
|
||||
|
||||
`main` の終了タグは、2 番目の段落の終了タグの後になければなりません。
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/p>\s*?<\/main>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,78 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08816
|
||||
title: アンカー要素で外部ページにリンクする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/c8EkncB'
|
||||
forumTopicId: 18226
|
||||
dashedName: link-to-external-pages-with-anchor-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`a` (*アンカー*) 要素を使用して、あなたのウェブページ外のコンテンツへリンクすることができます。
|
||||
|
||||
`a` 要素には、`href` 属性と呼ばれるリンク先のウェブアドレスが必要です。 また、アンカーテキストも必要です。 例:
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
これで、あなたのブラウザは `this links to freecodecamp.org` というテキストをクリック可能なリンクとして表示することができます。 そして、そのリンクをクリックするとウェブアドレス `https://www.freecodecamp.org` に移動することができます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
リンク先が `https://www.freecatphotoapp.com`、アンカーテキストが "cat photos" の `a` 要素を作成してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`a` 要素は、`cat photos` というアンカーテキストを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(/cat photos/gi.test($('a').text()));
|
||||
```
|
||||
|
||||
`https://www.freecatphotoapp.com` にリンクする `a` 要素が必要です。
|
||||
|
||||
```js
|
||||
assert(/^https?:\/\/(www\.)?freecatphotoapp\.com\/?$/i.test($('a').attr('href')));
|
||||
```
|
||||
|
||||
`a` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<a href="https://www.freecatphotoapp.com">cat photos</a>
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: bad88fee1348bd9aedf08816
|
||||
title: アンカー要素でページ内部のセクションにリンクする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
|
||||
forumTopicId: 301098
|
||||
dashedName: link-to-internal-sections-of-a-page-with-anchor-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`a` (*アンカー*) 要素は、ウェブページ内の異なるセクションにジャンプする内部リンク作成にも使用することができます。
|
||||
|
||||
内部リンクを作成するには、リンクの `href` 属性に、ハッシュ記号 `#` に続けて内部リンク先にする要素の `id` 属性の値を設定します。ページの下の方の要素をリンク先にするような使われ方が一般的です。 そして、リンク先の要素に同じ `id` 属性を追加します。 `id` は、要素を一意に表す属性です。
|
||||
|
||||
以下は内部アンカーリンクとそのターゲット要素の例です。
|
||||
|
||||
```html
|
||||
<a href="#contacts-header">Contacts</a>
|
||||
...
|
||||
<h2 id="contacts-header">Contacts</h2>
|
||||
```
|
||||
|
||||
ユーザーが `Contacts` リンクをクリックすると、ウェブページ内の **Contacts** という見出し要素があるセクションに移動します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
外部リンクを内部リンクに変更するために、`href` 属性を `#footer` に変更し、またテキストを `cat photos` から `Jump to Bottom` へ変更してください。
|
||||
|
||||
アンカータグから `target="_blank"` 属性を削除してください。この属性があるとリンクされたドキュメントが新しいタブで開かれるためです。
|
||||
|
||||
次に、ページの一番下の `<footer>` 要素に、`footer` という値の `id` 属性を追加してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
ページにアンカータグが 1 つだけあるようにしてください。
|
||||
|
||||
```js
|
||||
assert($('a').length == 1);
|
||||
```
|
||||
|
||||
ページに `footer` タグが 1 つだけあるようにしてください。
|
||||
|
||||
```js
|
||||
assert($('footer').length == 1);
|
||||
```
|
||||
|
||||
`a` タグの `href` 属性は "#footer" に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert($('a').eq(0).attr('href') == '#footer');
|
||||
```
|
||||
|
||||
`a` タグが `target` 属性を持たないようにしてください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
typeof $('a').eq(0).attr('target') == typeof undefined ||
|
||||
$('a').eq(0).attr('target') == true
|
||||
);
|
||||
```
|
||||
|
||||
`a` タグのテキストは "Jump to Bottom" である必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.eq(0)
|
||||
.text()
|
||||
.match(/Jump to Bottom/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`footer` タグの `id` 属性は "footer" に設定されている必要があります。
|
||||
|
||||
```js
|
||||
assert($('footer').eq(0).attr('id') == 'footer');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
|
||||
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>Copyright Cat Photo App</footer>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="#footer">Jump to Bottom</a>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
<p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
|
||||
<p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer id="footer">Copyright Cat Photo App</footer>
|
||||
```
|
||||
@ -0,0 +1,58 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08817
|
||||
title: ハッシュ記号を使用してデッドリンクを作成する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cMdkytL'
|
||||
forumTopicId: 18230
|
||||
dashedName: make-dead-links-using-the-hash-symbol
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
時々、リンク先をどこにするか決める前に `a` 要素を追加したいことがあります。
|
||||
|
||||
この方法は、`JavaScript` を使用してリンクの動作を変更する場合にも便利です。こちらは後ほど学習します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`href` 属性の現在の値は "`https://www.freecatphotoapp.com`" を指すリンクです。 `href` 属性の値をハッシュ記号 `#` に置き換え、デッドリンクを作成してください。
|
||||
|
||||
例: `href="#"`
|
||||
|
||||
# --hints--
|
||||
|
||||
`a` 要素は、`href` 属性の値が "#" に設定されたデッドリンクである必要があります。
|
||||
|
||||
```js
|
||||
assert($('a').attr('href') === '#');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>.</p>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#" target="_blank">cat photos</a>.</p>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,163 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08817
|
||||
title: アンカー要素を段落内にネストする
|
||||
challengeType: 0
|
||||
forumTopicId: 18244
|
||||
dashedName: nest-an-anchor-element-within-a-paragraph
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
リンクは他のテキスト要素内にネストする (入れ子にする) ことができます。
|
||||
|
||||
```html
|
||||
<p>
|
||||
Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
|
||||
</p>
|
||||
```
|
||||
|
||||
上の例を詳しく見てみましょう。 通常のテキストが `p` 要素に囲まれています。
|
||||
|
||||
```html
|
||||
<p> Here's a ... for you to follow. </p>
|
||||
```
|
||||
|
||||
次は*アンカー*要素 `<a>` です。 (終了タグ `</a>` が必要です):
|
||||
|
||||
```html
|
||||
<a> ... </a>
|
||||
```
|
||||
|
||||
`target` は、リンクをどこで開くかを指定するアンカータグの属性です。 `_blank` という値は、新しいタブでリンクを開くように指定します。 `href` は、リンクの URL を入れるアンカータグの属性です。
|
||||
|
||||
```html
|
||||
<a href="https://www.freecodecamp.org" target="_blank"> ... </a>
|
||||
```
|
||||
|
||||
`a` 要素の中にあるテキスト `link to www.freecodecamp.org` は <dfn>アンカーテキスト</dfn> と呼ばれ、クリック可能なリンクとして表示されます。
|
||||
|
||||
```html
|
||||
<a href=" ... " target="...">link to freecodecamp.org</a>
|
||||
```
|
||||
|
||||
上の例の最終的な出力は次のようになります。
|
||||
|
||||
Here's a <a href="https://www.freecodecamp.org" target="_blank">link to www.freecodecamp.org</a> for you to follow.
|
||||
|
||||
# --instructions--
|
||||
|
||||
既存の `a` 要素を、新しい `p` 要素の中にネストしてください。 新しいアンカータグは作成しないようにしてください。 新しい段落要素は `View more cat photos` というテキストを持ち、`cat photos` はリンク、残りは通常のテキストになるようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`a` 要素が 1 つだけあるようにしてください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a').length === 1
|
||||
);
|
||||
```
|
||||
|
||||
`a` 要素は "`https://www.freecatphotoapp.com`" にリンクする必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://www.freecatphotoapp.com"]').length === 1
|
||||
);
|
||||
```
|
||||
|
||||
`a` 要素は、`cat photos` というアンカーテキストを持つ必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a')
|
||||
.text()
|
||||
.match(/cat\sphotos/gi)
|
||||
);
|
||||
```
|
||||
|
||||
新しい `p` 要素を作成してください。 HTML コードには、`p` タグが少なくとも合計 3 つあるはずです。
|
||||
|
||||
```js
|
||||
assert($('p') && $('p').length > 2);
|
||||
```
|
||||
|
||||
`a` 要素は新しく作成した `p` 要素の中にネストされている必要があります。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://www.freecatphotoapp.com"]').parent().is('p')
|
||||
);
|
||||
```
|
||||
|
||||
`p` 要素には `View more` (その後に半角スペース) というテキストが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('a[href="https://www.freecatphotoapp.com"]')
|
||||
.parent()
|
||||
.text()
|
||||
.match(/View\smore\s/gi)
|
||||
);
|
||||
```
|
||||
|
||||
`a` 要素には `View more` というテキストが含まれ<em>ない</em>ようにしてください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
!$('a')
|
||||
.text()
|
||||
.match(/View\smore/gi)
|
||||
);
|
||||
```
|
||||
|
||||
それぞれの `p` 要素に終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/p>/g) &&
|
||||
code.match(/<p/g) &&
|
||||
code.match(/<\/p>/g).length === code.match(/<p/g).length
|
||||
);
|
||||
```
|
||||
|
||||
それぞれの `a` 要素に終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<a/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
|
||||
<a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>View more <a target="_blank" href="https://www.freecatphotoapp.com">cat photos</a></p>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: bad87fee1348bd9aede08835
|
||||
title: 1 つの div 要素に多くの要素をネストする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cNW4kC3'
|
||||
forumTopicId: 18246
|
||||
dashedName: nest-many-elements-within-a-single-div-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
`div` 要素は、division (分割) 要素とも呼ばれ、他の要素を入れる入れ物として汎用的に使われます。
|
||||
|
||||
`div` 要素はおそらくもっともよく使われる HTML 要素です。
|
||||
|
||||
終了タグを必要とする他の要素と同じように、`div` 要素は `<div>` で開始し、別の行で `</div>` で終了します。
|
||||
|
||||
# --instructions--
|
||||
|
||||
"Things cats love" と "Top 3 things cats hate" のリストを全て、1 つの `div` 要素の中にネストしてください。
|
||||
|
||||
ヒント: "Things cats love" の `p` 要素の上に `div` の開始タグを、`ol` の終了タグの後に `div` の終了タグを配置して、両方のリストが 1 つの `div` の中に入るようにしてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`p` 要素は、`div` 要素の中にネストする必要があります。
|
||||
|
||||
```js
|
||||
assert($('div').children('p').length > 1);
|
||||
```
|
||||
|
||||
`ul` 要素は、`div` 要素の中にネストする必要があります。
|
||||
|
||||
```js
|
||||
assert($('div').children('ul').length > 0);
|
||||
```
|
||||
|
||||
`ol` 要素は、`div` 要素の中にネストする必要があります。
|
||||
|
||||
```js
|
||||
assert($('div').children('ol').length > 0);
|
||||
```
|
||||
|
||||
`div` 要素には終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/div>/g) &&
|
||||
code.match(/<\/div>/g).length === code.match(/<div>/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
<div>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,60 @@
|
||||
---
|
||||
id: bd7123c8c441eddfaeb5bdef
|
||||
title: はじめての HTML 要素
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gpt2'
|
||||
forumTopicId: 18276
|
||||
dashedName: say-hello-to-html-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
freeCodeCamp の HTML コーディングチャレンジへようこそ。 このチャレンジを通じてウェブ開発を一歩ずつ学んでいきましょう。
|
||||
|
||||
まず、HTML を使ってシンプルなウェブページを作ることから始めましょう。 このページに埋め込まれているコードエディタでコードを編集できます。
|
||||
|
||||
コードエディタに `<h1>Hello</h1>` というコードが表示されていますか？ これが HTML 要素です。
|
||||
|
||||
ほとんどの HTML 要素には開始タグと終了タグがあります。
|
||||
|
||||
開始タグはこのようなタグです。
|
||||
|
||||
```html
|
||||
<h1>
|
||||
```
|
||||
|
||||
終了タグはこのようなタグです。
|
||||
|
||||
```html
|
||||
</h1>
|
||||
```
|
||||
|
||||
開始タグと終了タグの違いは、終了タグは最初の括弧の後にスラッシュがあることです。
|
||||
|
||||
各チャレンジにはテストがあり、「Run tests」ボタンをクリックしていつでも実行できます。 全てのテストにパスすると、解答を提出して次のチャレンジに進むことができます。
|
||||
|
||||
# --instructions--
|
||||
|
||||
このチャレンジのテストをパスするには、`h1` 要素のテキストを `Hello World` に書き換えてください。
|
||||
|
||||
# --hints--
|
||||
|
||||
`h1` 要素のテキストは `Hello World` でなければなりません。
|
||||
|
||||
```js
|
||||
assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h1>Hello</h1>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
```
|
||||
@ -0,0 +1,80 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08820
|
||||
title: 画像をリンクにする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cRdBnUr'
|
||||
forumTopicId: 18327
|
||||
dashedName: turn-an-image-into-a-link
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ある要素を `a` 要素内にネストすることで、その要素をリンクにすることができます。
|
||||
|
||||
画像を `a` 要素内にネストしてみましょう。 例:
|
||||
|
||||
```html
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Three kittens running towards the camera."></a>
|
||||
```
|
||||
|
||||
デッドリンクにするには `a` 要素の `href` プロパティとして `#` を使うことを忘れないでください。
|
||||
|
||||
# --instructions--
|
||||
|
||||
既存の画像要素を `a` (*アンカー*) 要素で囲んでください。
|
||||
|
||||
それができたら、マウスカーソルを画像の上に持っていってみましょう。 マウスカーソルがリンクをクリックするときの形に変わるはずです。 これで画像がリンクになりました。
|
||||
|
||||
# --hints--
|
||||
|
||||
既存の `img` 要素が `a` 要素内にネストされている必要があります。
|
||||
|
||||
```js
|
||||
assert($('a').children('img').length > 0);
|
||||
```
|
||||
|
||||
`a` 要素は、`href` 属性が `#` に設定されたデッドリンクである必要があります。
|
||||
|
||||
```js
|
||||
assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
|
||||
```
|
||||
|
||||
それぞれの `a` 要素に終了タグが必要です。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/a>/g) &&
|
||||
code.match(/<a/g) &&
|
||||
code.match(/<\/a>/g).length === code.match(/<a/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,70 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedf08802
|
||||
title: HTML のコメントを解除する
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cBmG9T7'
|
||||
forumTopicId: 18329
|
||||
dashedName: uncomment-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
コメントは、エンドユーザーに表示される最終的な出力に影響を与えることなく、コード内に他の開発者へのコメントを残す方法です。
|
||||
|
||||
また、コメントはコードを完全に削除せずに無効化するための便利な方法でもあります。
|
||||
|
||||
HTML のコメントは `<!--` で始まり、`-->` で終わります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
`h1`, `h2` と `p` 要素のコメントを解除してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
コメントを解除すると `h1` 要素はページに表示されるはずです。
|
||||
|
||||
```js
|
||||
assert($('h1').length > 0);
|
||||
```
|
||||
|
||||
コメントを解除すると `h2` 要素はページに表示されるはずです。
|
||||
|
||||
```js
|
||||
assert($('h2').length > 0);
|
||||
```
|
||||
|
||||
コメントを解除すると `p` 要素はページに表示されるはずです。
|
||||
|
||||
```js
|
||||
assert($('p').length > 0);
|
||||
```
|
||||
|
||||
コメントタグの末尾がページに表示されてはいけません (例: `-->`) 。
|
||||
|
||||
```js
|
||||
assert(!$('*:contains("-->")')[1]);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!--
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
-->
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h1>Hello World</h1>
|
||||
|
||||
<h2>CatPhotoApp</h2>
|
||||
|
||||
<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
|
||||
```
|
||||
@ -0,0 +1,86 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08830
|
||||
title: HTML5 を使用してフィールドを必須にする
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVMPUv/cMd4EcQ'
|
||||
forumTopicId: 18360
|
||||
dashedName: use-html5-to-require-a-field
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
ユーザーがその項目を入力するまでフォームを送信できないように、特定のフォームフィールドを必須とすることができます。
|
||||
|
||||
例えば、テキスト入力フィールドを必須にしたい場合、次のように `required` 属性を `input` 要素に追加します: `<input type="text" required>`
|
||||
|
||||
# --instructions--
|
||||
|
||||
テキスト入力フィールド `input` を必須 `required` にして、ユーザーがこのフィールドを入力しなければフォームを送信できないようにしてください。
|
||||
|
||||
そして、テキストを入力せずにフォームを送信してみてください。 HTML5 のフォームがどのようにしてそのフィールドが必須であることを知らせるか確認できましたか？
|
||||
|
||||
# --hints--
|
||||
|
||||
テキスト入力フィールドの `input` 要素に `required` 属性が必要です。
|
||||
|
||||
```js
|
||||
assert($('input').prop('required'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<input type="text" required placeholder="cat photo URL">
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
@ -0,0 +1,148 @@
|
||||
---
|
||||
id: 5c6c06847491271903d37cfd
|
||||
title: ラジオボタンとチェックボックスの value 属性を使用する
|
||||
challengeType: 0
|
||||
forumTopicId: 301099
|
||||
dashedName: use-the-value-attribute-with-radio-buttons-and-checkboxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
フォームが送信されると、データがサーバーに送信され、そのデータには選択されたオプションの入力内容が含まれます。 `radio` と `checkbox` タイプの input 要素は、`value` 属性の値を送信します。
|
||||
|
||||
例えば:
|
||||
|
||||
```html
|
||||
<label for="indoor">
|
||||
<input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
|
||||
</label>
|
||||
<label for="outdoor">
|
||||
<input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
|
||||
</label>
|
||||
```
|
||||
|
||||
この例では、2 つの `radio` タイプの input 要素があります。 ユーザーが `indoor` オプションを選択してフォームを送信すると、フォームデータには次の行が含まれます: `indoor-outdoor=indoor` これは、"indoor" の input 要素の `name` と `value` 属性から取られたものです。
|
||||
|
||||
`value` 属性を省略すると、送信されるフォームデータにはデフォルト値である `on` が使用されます。 この場合、ユーザーが "indoor" の選択肢をクリックしてフォームを送信すると結果のフォームデータは `indoor-outdoor=on` になりますが、これでは役に立ちません。 したがって、`value` 属性には選択肢を区別できる内容を設定する必要があります。
|
||||
|
||||
# --instructions--
|
||||
|
||||
既存の `radio` と `checkbox` の input 要素に、それぞれ `value` 属性を設定してください。 新しいラジオボタン、チェックボックスは作成しないようにしてください。 value 属性の値には、ラベルのテキストを小文字にしたものを使用してください。
|
||||
|
||||
# --hints--
|
||||
|
||||
ラジオボタンの 1 つに `indoor` という `value` 属性を設定してください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']")
|
||||
.length > 0
|
||||
);
|
||||
```
|
||||
|
||||
ラジオボタンの 1 つに `outdoor` という `value` 属性を設定してください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Outdoor") > input[type="radio"]').filter(
|
||||
"[value='outdoor']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
チェックボックスの 1 つに `loving` という `value` 属性を設定してください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Loving") > input[type="checkbox"]').filter(
|
||||
"[value='loving']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
チェックボックスの 1 つに `lazy` という `value` 属性を設定してください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']")
|
||||
.length > 0
|
||||
);
|
||||
```
|
||||
|
||||
チェックボックスの 1 つに `energetic` という `value` 属性を設定してください。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('label:contains("Energetic") > input[type="checkbox"]').filter(
|
||||
"[value='energetic']"
|
||||
).length > 0
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<h2>CatPhotoApp</h2>
|
||||
<main>
|
||||
<p>Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
|
||||
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
|
||||
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
|
||||
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
|
||||
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
Reference in New Issue
Block a user