「おさる旅館」では別ページへ移動するリンクを学習しました。
「ZOO」ではページ内リンクを覚えましょう。（同じページで上下にスクロール）
❶ 飛びたい位置のタグにidを指定する
<h2 id="lion">これは見出しです。</h2>
ここではid名を「lion」としましたが、自分の好きな名前でOK。
数字を入れる場合は必ずアルファベットの後に入れてください。
❷ ジャンプボタンを作る
アンカー要素（aタグ）のhref属性の属性値に指定したidを#（半角シャープ）を付けて指定する
01 <h1>タグに「id」を指定する
Brackets ➡ ファイル ➡ フォルダーを開く／07zoo
index.htmlページを開く。
タグのどこへでもidを指定できますが、ここでは見出しタグに指定します。
まずは<head>内にある<h1>～</h1>タグにidをつける。
<header>
<h1 id="top">ZOO</h1>
</header>
02 各<h2>タグに「id」を指定する
各<h2>に id 名を「d1～d4」までつけました。自由に好きな名前をそれぞれの<h2>つけてください。
※同じ名前は使えません。
<h2 id="d1">ライオン</h2>
<h2 id="d2">ゾウ</h2>
<h2 id="d3">キリン</h2>
<h2 id="d4">クマ</h2>
03 id をつかってリンクを指定する
リストの箇所にリンクを指定していきます。idを#（半角シャープ）を付けて指定
<ul>
<li>～</li>
</ul>
「#」＋「id名」
HTML
<ul class="zoo">
<li><a href="#d1">ライオン</a></li>
<li><a href="#d2">ゾウ</a></li>
<li><a href="#d3">キリン</a></li>
<li><a href="#d4">クマ</a></li>
</ul>
04 「PAGE TOP」ボタンもリンクさせる
ページ下部の「PAGE TOP」もリンクさせましょう。
リンク先はheader内の<h1>とします。
HTML
<p class="naka"><a href="#top">PAGE TOP</a></p>
リンクが指定通り移動できるかを確認しましょう。
05 スムーズスクロールを設定
現在のページ内ジャンプにスムーズスクロールの動きを入れてみましょう。
zoo.cssを開いて以下のコードを入れます。
CSS
html{
scroll-behavior: smooth;
}
これでページ内リンク完成です。
06 CSSで背景画像を変更、HTMLで動物の画像を変更
最後にこのページの背景画像（background-image）の変更をしてみましょう。
imgフォルダーに「bg2.png」という画像が入っているのでそれと変更しましょう。
その他に動物のイラストも入っていますので変更してみましょう。
CSS
body {
margin: 0;
font-family: sans-serif;
color:#252525;
font-size:16px;
background-image: url(../img/bg2.png);
background-repeat: repeat;
}
出来たかな？