---
id: 61408f155e798909b6908712
title: ステップ 12
challengeType: 0
dashedName: step-12
---
# --description--
ページ上を移動できるようにするために、以下の 3 つの項目を持つ順序なしリストを加えてください:
- `INFO`
- `HTML`
- `CSS`
各項目のテキストはアンカータグで囲む必要があります。
# --hints--
`nav` 要素の中に `ul` 要素を 1 つネストする必要があります。
```js
assert.equal(document.querySelectorAll('nav > ul')?.length, 1);
```
3 つの `li` 要素を `ul` 要素の中にネストする必要があります。
```js
assert.equal(document.querySelectorAll('nav > ul > li')?.length, 3);
```
`a` 要素を各 `li` 要素の中に 1 つずつネストする必要があります。
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3);
```
最初の `a` 要素のテキストを `INFO` にする必要があります。
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO');
```
2 番目の `a` 要素のテキストを `HTML` にする必要があります。
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML');
```
3 番目の `a` 要素のテキストを `CSS` にする必要があります。
```js
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS');
```
# --seed--
## --seed-contents--
```html
Accessibility Quiz
HTML/CSS Quiz
--fcc-editable-region--
--fcc-editable-region--
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
```