4.リンクを貼って回遊性を高める

1. なぜ、リンクを学ぶのか、その理由

今回は、あなたのサイトを訪れるユーザーにいろいろなページを見てもらうためにリンクについて学びましょう。当社の新人エンジニア研修でも、リンクの知識は重要です。HTML（やJSP）で作成したページをお互いに行き来できるようにするためにはリンクの知識が必須です。

2. リンクの種類

リンクを貼るとユーザーを別ページに誘導することができます。HTML【HyperText Markup Language】は、テキスト間をリンクで結ぶことを可能にするマークアップ言語です。HyperTextの「Hyper」は『非線形の』という意味を持ち、文書を順番に読むのではなく、相互にリンクされた構造を持たせることができます。

2.1 リンクの指定先3つ

リンク先には3つの種類があります。

「URLのリンク」

「別ファイルへのリンク」

「ページ内リンク」

2.2 リンク先の指定方法

また、リンク先を指定するには3つの種類があります。

「ルートパス指定」

「相対パス指定」

「絶対パス指定」

順にみていきましょう。

3．URLへの絶対パスのリンク

まずはURLへの絶対パス（絶対URL）のリンクです。

＜アウトプット＞

Yahoo! JAPAN 公式サイトへ

＜ソースコード＞

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>a1.html</title>
    </head>
    <body>
        <a href="https://www.yahoo.co.jp/">ヤフージャパンへ</a><br>
    </body>
</html>

リンクを作るにはaタグを使いhref属性にリンク先を指定します。

ちなみに“a”は【anchor:錨】、“href”は【hyper reference】の略です。今回は、例としてヤフージャパンのURLを指定しています。

なお、下記のようにtarget属性に"_blank"を指定すると、別タブで開くリンクにすることができます。

＜アウトプット＞

ヤフージャパンを新しいタブで

＜ソースコード(抜粋)＞

       <a href="https://www.yahoo.co.jp/" target="_blank">ヤフージャパンを新しいタブで</a>

ただし、ユーザーが現在ページを見失ったり、「戻るボタン」が使えなくなるというデメリットは把握して使いましょう。また、target="_blank" を使用する際は、セキュリティ上の理由から rel="noopener noreferrer" を併せて指定するのが推奨されます。

4．別ファイルへのリンク

4.1 ルートパス指定

まずはルートディレクトリを起点としたパスの指定方法がルートパス指定です。

ルートパスは、Webサーバーのルートディレクトリ（通常は /）を基準にして指定する方法です。たとえば、/images/logo.png はサーバー上の images ディレクトリ内の logo.png にリンクします。

以下は使用例です。ディレクトリの下にはプロジェクト名が続きます。今回のプロジェクト名は「04_HTML」です。

＜ソースコード(抜粋)＞

<a href="04_HTML/chap4/under/next.html">underフォルダの下の次のページへ</a>

次に別のファイルへのリンクです。別のファイルの位置によって、1．同じフォルダにある場合、2．下位フォルダにある場合、3．上位フォルダにある場合の3通りのパターンがありえますので以下にそれぞれ解説します。

ちなみに、「フォルダ」はWindowsの用語です。フォルダのことをインターネット環境で標準的なUNIX/Linux環境ではディレクトリといいます。

英語で【directory】は名簿や住所録のことですからファイルの名前と場所をまとめたものだというピッタリのネーミングですね。ここではインターネットの言葉に統一する意味でフォルダではなくディレクトリという言葉を使うことにします。

4.2 相対パス指定

HTMLのaタグが書かれている自分自身のファイルから見て、相対的な位置関係でパスを指定するのが相対パス指定です。将来的にLinuxなどのコマンドラインツールを使うようになったときに活躍するのがこの相対パス指定です。

リンク先が同じディレクトリにある場合と、下位ディレクトリを辿る場合、上位ディレクトリを辿る場合の3パターンに分けて解説します。

1.同じディレクトリにある場合

同じディレクトリにある場合は、同じ部屋にいると思って名前（ファイル名）だけで呼ぶことができます。

下図のa3.htmlファイルからnext.htmlにリンクを貼るとします。

＜ソースコード(抜粋)＞

<a href="next.html">同じフォルダにある次のページへ</a>

別ファイルを用意し、同じ階層に配置します。その（パスを含んだ）ファイル名をhref属性に指定します。今回はリンク先として同一のディレクトリ内にあるnext.htmlとしています。

ここでもしも、リンク先のファイルが同一ディレクトリ内に無かったらどのように指定したら良いでしょうか？

下位ディレクトリにある場合と上位ディレクトリを辿る必要がある場合とに分けて説明します。

2.下位ディレクトリにある場合

下位ディレクトリにある場合は、ディレクトリとファイル名で指定する必要があります。部屋の中にパーティションで仕切られた小部屋があるようなものですので、その小部屋と名前を呼べば聞こえるイメージです。

下図のindex.htmlファイルからnext.htmlにリンクを貼るとします。

index.htmlが入っているhtmlディレクトリの中のnext.htmlにリンクする場合は以下のように書きます。

＜ソースコード(抜粋)＞

<a href="under/next.html">underフォルダの下の次のページへ</a>

underディレクトリ内のnext.htmlを指定していますので、そのまま直感的に表現できます。

今回はたまたま下位ディレクトリにファイルは一つだけでした。しかし、現実には複数のファイルが有ることが一般的です。したがってファイル名を指定しなければなりません。次の上位ディレクトリにある場合と比較して覚えてください。

3.上位ディレクトリにある場合

上位ディレクトリにある場合は、いったん今いる部屋を出て廊下からファイルを指定する必要があります。

今度は逆に下図のnext.htmlファイルからindex.htmlにリンクを貼るとします。

next.htmlが入っているunderから見てindex.htmlが入っているhtmlディレクトリは１つ上の階層にあります。

上位ディレクトリのファイルにリンクする場合、以下のように記述します。

＜ソースコード(抜粋)＞

<a href="../index.html">上のフォルダにある次のページへ</a>

「..」で一つ上のディレクトリを指定しています。

なぜ、このようなシンプルな記述でOKなのでしょうか？

その理由は、あるディレクトリから見て親ディレクトリは必ず1つに決まるからです。

ディレクトリ構造は別名、木構造といい、逆さまになった木の形をしています。（だから最上位フォルダをルートというのですね）木構造では親は常に1つなのでこのような書き方が可能なのです。

このように自分の現在位置からのパスの指定方法を相対パスといいます。

相対パスは、現在のHTMLファイルがある場所を基準にして、目的のファイルまでのパスを指定する方法です。ファイルの移動に強く、同じプロジェクト内でのリンクを作成する際に一般的に使用されます。

さらには、index.htmlは以下のように省略も可能ですから試してみてください。“index”という名前の付いたファイルはウェルカムファイル（デフォルトページ）として扱われ、ディレクトリ名だけを指定すればブラウザが自動的に表示します。

<a href="../">上のフォルダにある次のページへ</a>

4.絶対パス指定

絶対パスとは、ルートからの絶対的な位置関係を表現するパス指定です。先のヤフーへのリンクのように「https://（ドメイン名）」で始まるのが絶対パスです。絶対パスは曖昧さがなく確実なパス表記ですが、ディレクトリの深い位置にある場合には長い文字列となってしまいます。

また、開発中のシステムのURLには絶対パスは使えません。なぜなら、開発中は「http://localhost:8080/」のようなドメイン名を使っていますが、これは実際にシステムを公開した場合のドメインとは違うからです。ドメイン名を変更する際にリンクをすべて変更する必要が発生してしまうのです。

なお、相対パスは「現在地からの道案内」、絶対パスは「住所」に例えることができます。つまり、絶対パスは「日本国愛知県名古屋市中区・・・」といった住所のイメージです。

３つのパス指定を下表1にまとめます。

	記述例	メリット	デメリット	主な用途
ルートパス指定	/04_HTML/chap4/a1.html	・リンク元ファイルの位置関係を考慮しなくてよい	・プロジェクト名を変更したときには全て書き換える必要がある	・Webアプリケーションで使用する
絶対パス指定	https://www.yahoo.co.jp/	・リンク元ファイルの位置関係を考慮しなくてよい	・開発中は使えない・記述が長くなる	・外部リンク
相対パス指定	next.html under/next.html ../index.html	・ドメイン名・プロジェクト名が変更しても記述の変更をする必要がない・記述が短い	・当該ファイルのディレクトリを移動した場合、パス指定を書き直す必要がある・メニューなどの共通パーツでは使いづらい	・内部リンク

表1 3つのパス指定方式

5．リンク先にクエリパラメータを送る

＜アウトプット＞

以下のリンクをクリックすると、Googleで「HTML」を検索します。

Googleで「HTML」を検索

＜ソースコード(抜粋)＞

    <p>以下のリンクをクリックすると、Googleで「HTML」を検索します。</p>
    <a href="https://www.google.com/search?q=HTML" target="_blank">Googleで「HTML」を検索</a>

上記ソースコードで「https://www.google.com/search」とあるのは、Google検索のURLです。

「?q=HTML」はクエリパラメータと呼ばれるものです。クエリパラメータとは、URLの末尾に ?key=value の形式で追加され、Webサーバーに特定の情報を渡すための仕組みです。複数のパラメータを渡す場合は & で区切ります。

上記の例では、qはGoogle検索のクエリを指定するパラメータで、その値として「HTML」が指定されています。これにより、Googleは「HTML」というキーワードで検索を行います。

ちなみに「target="_blank"」という属性の指定は、リンクをクリックした際に新しいタブで開くことを意味します。ユーザーが元のページを離れずに検索結果を確認できます。

例題

以下のリンクを作成しなさい。

アマゾンであなたの好きな商品を検索できるリンク
（検索のURL: https://www.amazon.co.jp/s、パラメータ: k）
メルカリであなたの好きな商品を検索できるリンク
（検索のURL: https://www.mercari.com/jp/search/、パラメータ: keyword）
YouTubeであなたの好きな作品が検索できるリンク
（検索のURL: https://www.youtube.com/results、パラメータ: search_query）

6．ページ内リンク

最後にページ内リンクです。

＜ソースコード(抜粋)＞

		<a href="#link">ページ内リンクへ</a>
        <div style="height:6000px;background-color:lightgreen">
        </div>
        <h1 id="link">ページ内リンク</h1>

リンク元はhref属性に"#link"のように＃を付けます。リンク先のidの方には#はなしで単に"link"となります。

当然ですが、リンク元とリンク先には同じ文字列（この例では"link"）を使わなければなりません。

この時、以下のようにURLのファイル名の後ろにidが付いていることも確認しておきましょう。

「http://localhost:8080/06_HTML/04link/a6.html#link」

メニューの作り方

一般にメニューはaタグとリストタグを使って作られます。

以下は簡単な例です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>メニューの例</title>
    <style>
        nav ul {
            list-style-type: none; /* リストの「・」を消す */
            padding: 0;
            margin: 0;
            display: flex; /* 横並びにする */
        }
        nav li {
            margin-right: 20px; /* 各リスト項目の間隔を設定 */
        }
        nav a {
            text-decoration: none; /* 下線を消す */
            color: black; /* テキストカラーを黒にする */
        }
        nav a:hover {
            color: red; /* ホバー時に色を赤にする */
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#home">ホーム</a></li>
            <li><a href="#services">サービス</a></li>
            <li><a href="#about">私たちについて</a></li>
            <li><a href="#contact">お問い合わせ</a></li>
        </ul>
    </nav>
</body>
</html>

Success

何度でも受けられるテストへのリンク

以上、今回は「URLリンク、別ファイルリンク、ページ内リンク」を作りました。

次回は、「画像とテーブルで表現力アップ」する方法について学びましょう。

新人エンジニア向けHTML講座の一覧に戻る

リンク（新人エンジニア研修向け解説）　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる

1. なぜ、リンクを学ぶのか、その理由

2. リンクの種類

2.1 リンクの指定先3つ

2.2 リンク先の指定方法

3．URLへの絶対パスのリンク

＜アウトプット＞

＜ソースコード＞

＜アウトプット＞

＜ソースコード(抜粋)＞

4．別ファイルへのリンク

4.1 ルートパス指定

4.2 相対パス指定

1.同じディレクトリにある場合

＜ソースコード(抜粋)＞

2.下位ディレクトリにある場合

＜ソースコード(抜粋)＞

3.上位ディレクトリにある場合

4.絶対パス指定

5．リンク先にクエリパラメータを送る

＜アウトプット＞

＜ソースコード(抜粋)＞

例題

6．ページ内リンク

＜ソースコード(抜粋)＞

メニューの作り方

リンク（新人エンジニア研修向け解説） 最後までお読みいただきありがとうございます。

リンク（新人エンジニア研修向け解説）　最後までお読みいただきありがとうございます。