前回、a要素でページ内リンクを指定しました。
今回は、ウェブページ内のそれぞれの箇所にこれらのリンク先となるid名を付けてやりましょう。
要素にid名を付けることで、リンクの移動先として指定できるようになります。
id属性はHTMLソース中のほとんどの要素に指定することができますが、このサンプルではh3要素に付けることにします。
index に以下の記述を追加してください。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="base.css"> <title>ウェブサンプル株式会社</title> </head> <body> <div id="pagebody"> <!-- ヘッダ --> <div id="header"> <h1><a href="index "><img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/logo.png" alt="ウェブサンプル株式会社"></a></h1> </div> <!-- メインメニュー --> <ul id="menu"> <li><a href="index ">ホーム</a></li> <li><a href="product ">製品紹介</a></li> <li><a href="profile ">会社概要</a></li> <li><a href="contact ">お問合せ</a></li> </ul> <!-- ヘッダ画像 --> <div id="img_index"> <img src="./images/img_index.png" alt="あしたをみつめるウェブサンプル株式会社"> </div> <!-- サブメニュー --> <h2>新着情報</h2> <ul> <li><a href="#info0001">新商品のご案内</a></li> <li><a href="#info0002">展示会への出展</a></li> <li><a href="#info0003">環境への取り組み</a></li> </ul> <!-- インフォメーション --> <h3 id="info0001">新商品のご案内</h3> <p> <img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/index0001.png" alt="新商品のイメージ画像" class="infoimg_index"> あいうえおかきくけこさしすせそ（中略） </p> <hr> <h3 id="info0002">展示会への出展</h3> <p> <img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/index0002.png" alt="展示会への出展のイメージ画像" class="infoimg_index"> あいうえおかきくけこさしすせそ（中略） </p> <hr> <h3 id="info0003">環境への取り組み</h3> <p> <img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/index0003.png" alt="環境への取り組みのイメージ画像" class="infoimg_index"> あいうえおかきくけこさしすせそ（中略） </p> <hr> <!-- フッタ --> <small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small> </div> </body> </html>
保存をしたらブラウザで表示してみましょう。
見た目は何も変わりませんが、今度はサブメニューのリンクをクリックすると、それぞれの該当個所へ移動するようになっているはずです。
リンクをクリックしても移動しない場合には、id名をタイプミスしていないかなどを確認してみてください。
ここまでの制作段階で、サンプルサイトは以下の状態となっています。
| <前へ | 目次へ | 次へ> |
