リンクの移動先にid名を付ける－ウェブ制作チュートリアル

トップページ > ウェブ制作チュートリアル > リンクの移動先にid名を付ける

第12章　ページ内リンク

★リンクの移動先にid名を付ける

リンクの移動先にid名を付ける

前回、a要素でページ内リンクを指定しました。今回は、ウェブページ内のそれぞれの箇所にこれらのリンク先となるid名を付けてやりましょう。

要素にid名を付けることで、リンクの移動先として指定できるようになります。 id属性はHTMLソース中のほとんどの要素に指定することができますが、このサンプルではh3要素に付けることにします。

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 id="info0001">新商品のご案内</h3>
	<p>
	<img src="images/index0001.png" alt="新商品のイメージ画像" class="infoimg_index">
	あいうえおかきくけこさしすせそ（中略）
	</p>
	<hr>
	
	<h3 id="info0002">展示会への出展</h3>
	<p>
	<img src="images/index0002.png" alt="展示会への出展のイメージ画像" class="infoimg_index">
	あいうえおかきくけこさしすせそ（中略）
	</p>
	<hr>

	<h3 id="info0003">環境への取り組み</h3>
	<p>
	<img src="images/index0003.png" alt="環境への取り組みのイメージ画像" class="infoimg_index">
	あいうえおかきくけこさしすせそ（中略）
	</p>
	<hr>

	<!-- フッタ -->
	<small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small>

</div>
</body>
</html>

保存をしたらブラウザで表示してみましょう。見た目は何も変わりませんが、今度はサブメニューのリンクをクリックすると、それぞれの該当個所へ移動するようになっているはずです。

変更前を確認する

リンクをクリックしても移動しない場合には、id名をタイプミスしていないかなどを確認してみてください。

ここまでの制作段階で、サンプルサイトは以下の状態となっています。

この段階のサンプルサイトを確認する

まとめ

<要素名 id="id名">要素内容</要素名> の書式で要素にid名を付ける
要素にid名を付けることで、リンク先として指定できるようになる
ひとつのウェブページ内では、重複して同じid名を付けることはできない

<前へ

目次へ

次へ>

★リンクの移動先にid名を付ける

リンクの移動先にid名を付ける

HTMLソース（index.html）

まとめ

Sponsors