ここでは、IT系企業の新入社員向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。
目次
1. なぜ、リンクを学ぶのか、その理由
前回は、「スタイルを適用する対象をセレクタで広げる」方法を学びました。
今回は、あなたのサイトを訪れるユーザーにいろいろなページを見てもらうためにリンクについて学びましょう。
当社の新人エンジニア研修でも、リンクの知識は重要です。
HTML（やJSP）で作成したページをお互いに行き来できるようにするためにはリンクの知識が必須です。
2. リンクの3つの種類
リンクを貼るとユーザーを別ページに誘導することができます。
HTML（HyperText Markup Language）には“Hyper”（超える）“Text”（今までのテキストを）という意味があります。
まさに、HTMLの語源になっているのがこのリンクの機能です。
今回は、
「URLのリンク」
「別ファイルへのリンク」
「ページ内リンク」
という３つのリンク方法について学びます。
2.1 URLのリンク
まずはURLのリンクです。
＜アウトプット＞
＜ソースコード＞
リンクを作るにはaタグを使いhref属性にリンク先を指定します。
ちなみに“a”は「anchor（錨）」、“href”は「hyper reference」の略です。
今回は、例としてヤフージャパンのURLを指定しています。
なお、下記のようにtarget属性に"_blank"を指定すると、別タブで開くリンクにすることができます。
＜アウトプット＞
＜ソースコード(抜粋)＞
ただし、ユーザーが現在ページを見失ったり、「戻るボタン」が使えなくなるというデメリットは把握して使いましょう。
2.2 別ファイルへのリンク
次に別のファイルへのリンクです。
1.同じフォルダにある場合
＜ソースコード(抜粋)＞
別ファイルを用意し、同じ階層に配置します。
その（パスを含んだ）ファイル名をhref属性に指定します。
今回はリンク先として同一のフォルダ内にあるnext.htmlとしています。
ちなみに、フォルダのことをインターネット環境で標準的なUNIX/Linux環境ではディレクトリといいます。
実験1
Linuxなどでコマンドライン入力する際には「next.html」という指定よりも「./next.html」のように./を付けてカレントディレクトリを指定する書き方のほうが好まれます。
なぜなら、 単に「next.html 」とした場合にはファイルの指定なのかパスの指定なのかが分かりにくいのに対して、「./next.html」 ではパスの指定であるということが明確になるからです。
この書き方も試してみてください。
| 実験結果のメモ： |
ここでもしも、リンク先のファイルが同一フォルダ内に無かったらどのように指定したら良いでしょうか？
下位フォルダにある場合と上位フォルダを辿る必要がある場合とに分けて説明します。
2.下位フォルダにある場合
下図6.1のindex.htmlファイルからnext.htmlにリンクを貼るとします。
index.htmlが入っているhtmlフォルダの中のnext.htmlにリンクする場合は以下のように書きます。
＜ソースコード(抜粋)＞
underフォルダ内のnext.htmlを指定しています。
そのまま直感的に表現できます。
3.上位フォルダを辿る必要がある場合
下図62.のnext.htmlファイルからindex.htmlにリンクを貼るとします。
next.htmlが入っているunderから見てindex.htmlが入っているhtmlフォルダは１つ上の階層にあります。
その場合は以下のように書きます。
「..」で一つ上のフォルダを指定しています。
フォルダの構造は別名、木構造といい、逆さまになった木の形をしています。
木構造では親は常に1つなのでこのような書き方が可能なのです。
このように自分の現在位置からのパスの指定方法を相対パスといいます。
2.3 相対パスと絶対パス指定
相対パスとは、自分自身（のHTMLファイルのあるフォルダ）から見た相対的な位置関係を表現する指定方法です。
もうひとつ「https://（ドメイン名）」で始まる絶対パス（正確には絶対URL）という方法もありますが、リンク先の指定方法としては相対パスのほうが優れています。
なぜなら、ドメインを変更しても、リンクを修正しなくて良いからです。
相対パスは「現在地からの道案内」、絶対パスは「住所」に例えることができます。
つまり、絶対パスは「日本国愛知県名古屋市中区・・・」といった住所のイメージです。
絶対バスは曖昧さがなく確実なパス表記ですが、ディレクトリの深い位置にある場合には長い文字列となってしまいます。
また、あるプログラムを別のマシンに移植する際には移植前後で全く同じディレクトリ構造やディレクトリ名にしておかなければならないなどの欠点もあります。
したがって以降の研修でもパスは基本的に相対パスを使います。
2.4 ページ内リンク
最後にページ内リンクです。
＜ソースコード（抜粋）＞
リンク元はhref属性に"#link"のように＃を付けます。
リンク先のidの方には#はなしで単に"link"となります。
当然ですが、リンク元とリンク先には同じ文字列"link"を使わなければなりません。
以上、今回は「URLリンク、別ファイルリンク、ページ内リンク」について学びました。
次回は、「画像を貼って表現力アップ」する方法について学びましょう。
<まとめ：隣の人に正しく説明できたらチェックを付けましょう>
□ リンクを作るにはaタグを使いhref属性にリンク先を指定する
□ 「..」と記述すると一つ上のフォルダを指定できる
□ 相対パスとは、HTMLファイルのあるフォルダから見た相対的な位置関係を表現するパス指定方法である
【今回の復習Youtube】