HOME / WEB関連知識のスキルアップ / HTMLクイック･リファレンス /  ウェブ制作チュートリアル / 第6章 メインメニューのリンクを指定する：仮のリンク先ページを作る

第6章　メインメニューのリンクを指定する

| ハイパーリンクを指定する
HTMLのa要素を使用して、クリックすると別ページにジャンプするハイパーリンクを作成していきます。 ハイパーリンクはウェブ制作に欠かせませんので、しっかりと身に付けましょう。
メニュー項目のテキストにハイパーリンクを指定します。 index.htmlを開いて、メインメニュー部分に以下の記述を追加してください。 href属性にはリンク先のファイル名を指定します。

HTMLソース（product.html）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="base.css">
<title>ウェブサンプル株式会社</title>
</head>
<body>
<h1>ウェブサンプル株式会社</h1>

<!-- メインメニュー -->
<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>

<h2>新着情報</h2>
<h3>新商品のご案内</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<h3>展示会への出展</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<h3>環境への取り組み</h3>
<p>
あいうえおかきくけこさしすせそ（中略）
</p>
<small>Copyright (c) ウェブサンプル株式会社 All Rights Reserved.</small>
</body>
</html>
保存をしたらブラウザで表示してみましょう。 メインメニュー部分の文字色が青くなって、下線が付いて表示されれば成功です。
▶︎ 変更前を確認する
下線の付けられたリンク部分をクリックして、他のページへとジャンプすることを確認してください。 一度リンク先ページが表示されたリンクテキストは、青色から紫色に変化します。
尚、リンク先ページは、ごく簡単なHTMLソースしか指定していません。 そのため、「製品紹介」「会社概要」「お問合せ」という見出しが表示されるだけで「ホーム」へ戻るためのハイパーリンクが用意されていません。
リンク先ページから元のページに戻るには、ブラウザの戻るボタンを押してください。

| リンク先のパスの書き方​
インターネット上に公開されているファイルの所在地をURL（Uniform Resource Locator）といいます。 ウェブページから他のウェブページへリンクをはる場合には、リンク先となるファイルの所在地、つまり、URLを指定します。
URLの指定方法には「絶対パス」と「相対パス」の2つがあります。 絶対パスとは、http://～ で始まる形式です。 絶対パスで指定すれば、リンク元ファイルがどこにあっても、リンク先URLを一意に特定することができます。

絶対パスによるリンク

<a href="https://www.htmq.com/index.html">ホームページ</a>
一方、相対パスとは、リンク元ファイルとの位置関係からリンク先ファイルを指定する形式です。

相対パスによるリンク

<a href="../index.html">ホームページ</a>
インターネット上に公開されているファイルのフォルダ階層は、スラッシュ（ / ）で区切ります。 URLを相対パスで指定する場合、同じフォルダ階層へのリンクはスラッシュを付けずにファイル名だけを指定します。
上のフォルダ階層へのリンクは「 ../ 」で区切ります。 例えば、上の上の上の階層にあるindex.htmlへリンクする場合には、「 ../../../index.html 」となります。
リンク元ファイルより下の階層にあるファイルへリンクするには、フォルダ名とファイル名で指定します。 例えば、abcという名前のフォルダの下にあるindex.htmlへリンクしたければ、「abc/index.html」となります。

同じフォルダ階層へのリンク

<a href="index.html">ホームページ</a>

上のフォルダ階層へのリンク

<a href="../index.html">ホームページ</a>

下のフォルダ階層へのリンク

<a href="abc/index.html">ホームページ</a>
HTMLには２つの重要な役割があります。 ひとつはマークアップです。 これは、情報にタグ付けして、どこが見出しでどこが段落なのか、コンピュータにも分かるようにするということです。
もうひとつの重要な役割は、ハイパーリンクです。 これは、関連する情報どうしを結び付けて、情報を整理するということです。 a要素の使い方を身に付けて、情報を自在に関連付けられるようになりましょう。
ここまでの制作段階で、サンプルサイトは以下の状態となっています。
▶︎ この段階のサンプルサイトを確認する
まとめ
  1. a要素のhref属性には、リンク先ファイルの所在地を指定する
  2. 一般的なブラウザでは、リンクテキストの文字色は青く、下線が付いて表示される
  3. 一度リンク先ページが表示されたリンクテキストは、青色から紫色に変化する