nav はメニュー、section は話題、article は1作品
既存の中身は残し、header の nav に4リンクを置き、main は同じ順の4つの section に分けます。works の div 直下には article を3つ置きます。
<header><!-- 既存の h1 と肩書きは nav の前に残す -->
<nav><ul>
<nav>4リンクのメニュー <li><a href="#about">自己紹介</a></li><li><a href="#hobby">趣味</a></li>
<li><a href="#history">経歴</a></li><li><a href="#works">作品</a></li>
</ul></nav></header>
<main><!-- about / hobby / history も section にする -->
<section id="works"><h2>作品</h2>
<section id="works">作品という話題 <div><article><h3>作品名</h3><p>説明</p></article><!-- article は合計3つ --></div>
<article>切り出せる1作品 </section></main>
<header><!-- 既存の h1 と肩書きは nav の前に残す -->
<nav><ul>
4リンクのメニュー
<li><a href="#about">自己紹介</a></li><li><a href="#hobby">趣味</a></li>
<li><a href="#history">経歴</a></li><li><a href="#works">作品</a></li>
</ul></nav></header>
<main><!-- about / hobby / history も section にする -->
<section id="works"><h2>作品</h2>
作品という話題
<div><article><h3>作品名</h3><p>説明</p></article><!-- article は合計3つ --></div>
切り出せる1作品
</section></main>
1 / 3
HTML入門 - navで移動先を結び、sectionとarticleで中身を分ける
href の # のあとと id が同じ場所へ飛ぶ
メニューと id の書き方を切り替え、完全一致・1文字違い・重複で飛び先がどう変わるか比べます。
- href="#hobby" は id="hobby" と完全一致した section を探す
- 綴り違いでは一致先がなく、同じ id が複数なら最初の要素が選ばれて後の要素を直接指せない
2 / 3
考えてみよう外しても進めます
作品へのメニューと、作品一覧・1作品の組み合わせとして正しいものはどれですか。
選ぶと、この枚の中で答えと理由を確かめられます。
3 / 3