---
id: 5dc23991f86c76b9248c6eb8
title: ステップ 6
challengeType: 0
dashedName: step-6
---

# --description--

前のステップで、 `h1` 要素、`h2` 要素、コメント、`p` 要素を `main` 要素の中に入れました。 これを「*ネストする*」といいます。 ネストされた要素は、外側の要素よりもスペース 2 つ分右に配置するようにしましょう。 このスペースはインデント (字下げ) と呼ばれ、HTML を読みやすくする目的で使われます。

以下のコードでは、`h1` 要素、`h2` 要素およびコメントは、`main` 要素よりもスペース 2 つ分インデントされています。 同様に、`p` 要素の前にもキーボードのスペースキーを使ってスペースを 2 つ追加して、適切にインデントしてください。

# --hints--

コード内には、テキストが `Cat Photos` の `h2` 要素が必要です。 誤って削除されたか、開始タグや終了タグが欠けているか、テキストが変更された可能性があります。

```js
assert(
  document.querySelector('h2') &&
    code.match(/<\/h2\>/) &&
    document.querySelector('h2').innerText.toLowerCase() === 'cat photos'
);
```

例示されたコード内の `ul` 要素や `li` 要素は追加しないでください。

```js
assert(
  !document.querySelector('ul') && !document.querySelector('li')
);
```

`h2` 要素の行のインデントは変更しないでください。 その行の開始タグは行頭から 6 つのスペースを空けて書き始める必要があります。 ステップをリセットすると元のインデントを復元することができます。

```js
assert(code.toLowerCase().match(/<\/h1\>\s*\n\s{6}<h2>/));
```

コード内にはコメントが必要です。 前のステップで追加されたコメントが削除されているようです。

```js
assert(code.match(/<!--.*-->/));
```

コメントのテキストは `TODO: Add link to cat photos` でなければなりません。 コメントのテキストやスペースを変更しないでください。

```js
assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i));
```

コメント要素の行のインデントは変更しないでください。 その行の開始タグは行頭から 6 つのスペースを空けて書き始める必要があります。 ステップをリセットすると元のインデントを復元することができます。

```js
assert(
  code
    .toLowerCase()
    .match(/<\/h2>\s*\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/)
);
```

コードには `p` 要素が 1 つ必要です。 前のステップで追加された `p` 要素が削除されているようです。

```js
assert(document.querySelector('p'));
```

`p` 要素のテキストは `See more cat photos in our gallery.` でなければなりません。 `p` 要素のテキストやスペース、句読点を変更しないでください。

```js
assert(
  document
    .querySelector('p')
    .innerText.toLowerCase()
    .match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
);
```

`p` の開始タグには、`h2` 要素とコメント要素と同じインデントを設定する必要があります。 この開始タグは行頭から 6 つのスペースを空けて書き始める必要があります。

```js
assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
```

# --seed--

## --seed-contents--

```html
<html>
  <body>
    --fcc-editable-region--
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
    <p>See more cat photos in our gallery.</p>
    </main>
--fcc-editable-region--
  </body>
</html>
```

