サンプルサイトでは「新着情報」を3つ掲載してしますが、新着情報がさらに増えていくとすれば、その分だけ縦に長いページになっていきます。
縦長のウェブページになっても情報が探しやすいようにサブメニューを設置して、そこからページ内リンクを指定しましょう。
ページ内リンクを指定する場合にも、他のウェブページへ移動するリンクと同様にa要素で移動先を指定します。
ただし、a要素のhref属性に指定する値の書式が異なり、先頭にナンバーサイン（ # ）を付けてリンク先箇所の名前（id名）を指定します。
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>新商品のご案内</h3>
<p>
<img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/index0001.png" alt="新商品のイメージ画像" class="infoimg_index">
あいうえおかきくけこさしすせそ（中略）
</p>
<hr>
<h3>展示会への出展</h3>
<p>
<img src="https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/index0002.png" alt="展示会への出展のイメージ画像" class="infoimg_index">
あいうえおかきくけこさしすせそ（中略）
</p>
<hr>
<h3>環境への取り組み</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>
保存をしたらブラウザで表示してみましょう。
「新着情報」という見出しのサブメニューが追加されれば成功です。
上記のHTMLソースでは、a要素でウェブページ内の特定個所をリンク先として指定しています。
ウェブページ内の特定個所をリンク先に指定する場合、先頭にナンバーサイン（ # ）を付けてリンク先箇所の名前（id名）を指定します。
まだ、ウェブページ内にinfo0001、info0002、info0003というid名を付けていないので、この時点ではサブメニューのリンクをクリックしてもどこへも移動しません。
次回、ウェブページ内のそれぞれの箇所にこれらのid名を付けてやりましょう。
| <前へ | 目次へ | 次へ> |