1. なぜ、リンクを学ぶのか、その理由
前回は、「スタイルを適用する対象をセレクタで広げる」方法を学びました。
今回は、あなたのサイトを訪れるユーザーにいろいろなページを見てもらうためにリンクについて学びましょう。当社の新人エンジニア研修でも、リンクの知識は重要です。HTML（やJSP）で作成したページをお互いに行き来できるようにするためにはリンクの知識が必須です。
2. リンクの種類
リンクを貼るとユーザーを別ページに誘導することができます。HTML【HyperText Markup Language】には【Hyper:超える】【Text:（今までの)テキスト】をという意味があります。まさに、HTMLの語源になっているのがこのリンクの機能です。
2.1 リンクの指定先3つ
リンク先には3つの種類があります。
「URLのリンク」
「別ファイルへのリンク」
「ページ内リンク」
2.2 リンク先の指定方法
また、リンク先を指定するには3つの種類があります。
「ルートパス指定」
「絶対パス指定」
「相対パス指定」
順にみていきましょう。
3．URLへの絶対パスのリンク
まずはURLへの絶対パス（絶対URL）のリンクです。
＜アウトプット＞
＜ソースコード＞
<!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>ただし、ユーザーが現在ページを見失ったり、「戻るボタン」が使えなくなるというデメリットは把握して使いましょう。
4．別ファイルへのリンク
4.1 ルートパス指定
まずはルートディレクトリを起点としたパスの指定方法がルートパス指定です。この方式を当社の新人研修では基本とします。なぜなら、このあと学ぶJavaWebアプリケーションでもルートパスを多用するからです。
ルートパスは以下のように/の後にプロジェクト名が続く指定方式です。
/プロジェクト名/ディレクトリ名/ファイル名
上記の先頭の「/」がルートディレクトリです。
以下は使用例です。ディレクトリの下にはプロジェクト名が続きます。今回のプロジェクト名は「06_HTML」です。
＜ソースコード(抜粋)＞
<a href="/04_HTML/04link/under/next.html">underフォルダの下の次のページへ</a>次に別のファイルへのリンクです。別のファイルの位置によって、1．同じフォルダにある場合、2．下位フォルダにある場合、3．上位フォルダにある場合の3通りのパターンがありえますので以下にそれぞれ解説します。ちなみに、フォルダのことをインターネット環境で標準的なUNIX/Linux環境ではディレクトリといいます。英語で【directory】は名簿や住所録のことですからファイルの名前と場所をまとめたものだというピッタリのネーミングですね。ここではインターネットの言葉に統一する意味でフォルダではなくディレクトリという言葉を使うことにします。
4.2 相対パス指定
HTMLのaタグが書かれている自分自身のファイルから見て、相対的な位置関係でパスを指定するのが相対パス指定です。当社の新人研修では相対パス指定は使いません。将来的にLinuxなどのコマンドラインツールを使うようになったときに活躍するのがこの相対パス指定です。
リンク先が同じディレクトリにある場合と、下位ディレクトリを辿る場合、上位ディレクトリを辿る場合の3パターンに分けて解説します。
1.同じディレクトリにある場合
下図1のa3.htmlファイルからnext.htmlにリンクを貼るとします。
＜ソースコード(抜粋)＞
<a href="next.html">同じフォルダにある次のページへ</a>別ファイルを用意し、同じ階層に配置します。その（パスを含んだ）ファイル名をhref属性に指定します。今回はリンク先として同一のディレクトリ内にあるnext.htmlとしています。
ここでもしも、リンク先のファイルが同一ディレクトリ内に無かったらどのように指定したら良いでしょうか？
下位ディレクトリにある場合と上位ディレクトリを辿る必要がある場合とに分けて説明します。
2.下位ディレクトリにある場合
下図2のindex.htmlファイルからnext.htmlにリンクを貼るとします。
index.htmlが入っているhtmlディレクトリの中のnext.htmlにリンクする場合は以下のように書きます。
＜ソースコード(抜粋)＞
<a href="under/next.html">underフォルダの下の次のページへ</a>underディレクトリ内のnext.htmlを指定していますので、そのまま直感的に表現できます。
今回はたまたま下位ディレクトリにファイルは一つだけでした。しかし、現実には複数のファイルが有ることが一般的です。したがってファイル名を指定しなければなりません。次の上位ディレクトリにある場合と比較して覚えてください。
3.上位ディレクトリにある場合
今度は逆に下図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.3 絶対パス指定
絶対パスとは、ルートからの絶対的な位置関係を表現するパス指定です。先のヤフーへのリンクのように「https://（ドメイン名）」で始まるのが絶対パスです。絶対パスは曖昧さがなく確実なパス表記ですが、ディレクトリの深い位置にある場合には長い文字列となってしまいます。
また、開発中のシステムのURLには絶対パスは使えません。なぜなら、開発中は「http://localhost:8383/」のようなドメイン名を使っていますが、これは実際にシステムを公開した場合のドメインとは違うからです。ドメイン名を変更する際にリンクをすべて変更する必要が発生してしまうのです。
なお、相対パスは「現在地からの道案内」、絶対パスは「住所」に例えることができます。つまり、絶対パスは「日本国愛知県名古屋市中区・・・」といった住所のイメージです。
３つのパス指定を下表1にまとめます。
| 記述例 | メリット | デメリット | 用途 | |
| ルートパス指定 | /HTML5Application/06a/under/next.html | ・リンク元ファイルの位置関係を考慮しなくてよい | ・プロジェクト名を変更したときには全て書き換える必要がある | ・Webアプリケーションで多用する |
| 絶対パス指定 | https://www.yahoo.co.jp/ | ・リンク元ファイルの位置関係を考慮しなくてよい | ・開発中は使えない ・記述が長くなる | ・外部リンク |
| 相対パス指定 | next.html under/next.html ../index.html | ・ドメイン名・プロジェクト名が変更しても記述の変更をする必要がない ・記述が短い | ・当該ファイルのディレクトリを移動した場合、パス指定を書き直す必要がある ・メニューなどの共通パーツでは使いづらい | ・内部リンク |
5 ページ内リンク
最後にページ内リンクです。
＜ソースコード(抜粋)＞
<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タグを使いhref属性にリンク先を指定する
□ ルートパス指定とは、ルートディレクトリを起点としたパスの指定方法でありこの後学ぶWebアプリケーションで多用する。
□ 相対パスとは、HTMLファイルのあるディレクトリから見た相対的な位置関係を表現するパス指定方法である
□ 「..」と記述すると一つ上のディレクトリを指定できる
□ 絶対パスとは、ルートからの絶対的な位置関係を表現するパス指定である。
以上、今回は「URLリンク、別ファイルリンク、ページ内リンク」を作りました。
次回は、「画像とテーブルで表現力アップ」する方法について学びましょう。