トップページ  > ウェブ制作チュートリアル  > リンク先の指定
第12章 ページ内リンク

★リンク先の指定

リンク先の指定

広告

サンプルサイトでは「新着情報」を3つ掲載してしますが、新着情報がさらに増えていくとすれば、その分だけ縦に長いページになっていきます。 縦長のウェブページになっても情報が探しやすいようにサブメニューを設置して、そこからページ内リンクを指定しましょう。

ページ内リンクを指定する場合にも、他のウェブページへ移動するリンクと同様にa要素で移動先を指定します。 ただし、a要素のhref属性に指定する値の書式が異なり、先頭にナンバーサイン( # )を付けてリンク先箇所の名前(id名)を指定します。

index.htmlに以下の記述を追加してください。

HTMLソース(index.html)

<!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.html"><img src="images/logo.png" alt="ウェブサンプル株式会社"></a></h1>
	</div>

	<!-- メインメニュー -->
	<ul id="menu">
	<li><a href="index.html">ホーム</a></li>
	<li><a href="product.html">製品紹介</a></li>
	<li><a href="profile.html">会社概要</a></li>
	<li><a href="contact.html">お問合せ</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="images/index0001.png" alt="新商品のイメージ画像" class="infoimg_index">
	あいうえおかきくけこさしすせそ(中略)
	</p>
	<hr>
	
	<h3>展示会への出展</h3>
	<p>
	<img src="images/index0002.png" alt="展示会への出展のイメージ画像" class="infoimg_index">
	あいうえおかきくけこさしすせそ(中略)
	</p>
	<hr>

	<h3>環境への取り組み</h3>
	<p>
	<img src="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名を付けてやりましょう。

まとめ
  1. ウェブページ内の特定個所へのリンクもa要素で指定できる
  2. a要素のhref属性の値として#に続けてid名を記述すると、特定個所へのリンクとなる
  3. href属性の値に指定したid名がウェブページ内に無ければ、リンクをクリックしても移動しない
<前へ 目次へ 次へ>
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ