ここでは、IT系企業の新入社員向けにHTMLを解説しています。
デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。
新人エンジニアが最初に知っておきたいHTMLの学び方
なぜ、リンクを学ぶのか、その理由。
前回は、「スタイルを適用する対象をセレクタで広げる」方法を学びました。
今回は、あなたのサイトを訪れるユーザーにいろいろなページを見てもらうためにリンクについて学びましょう。
当社の新人エンジニア研修でも、リンクの知識は重要です。
HTMLやJSPで作成したページをお互いに行き来できるようにするためにはリンクの知識が必須です。
リンクを貼る
リンク
リンクを貼るとユーザーを別ページに誘導することができます。
HTML（HyperText Markup Language）には“Hyper”（超える）“Text”（今までのテキストを）という意味があります。
まさに、HTMLの語源になっているのがこのリンクの機能です。
今回は、
「URLのリンク」
「別ファイルへのリンク」
「ページ内リンク」
という３つのリンク方法について学びます。
URLのリンク
まずはURLのリンクです。
＜アウトプット＞
＜ソースコード＞
<a href="https://www.yahoo.co.jp/">ヤフージャパンへ</a>
リンクを作るにはこのように<a>タグを使います。
“href”でリンク先を指定します。
ちなみに“a”は「anchor（錨）」、“href”は「hyper reference」の略です。
今回は、例としてヤフージャパンのURLを指定しています。
なお、下記のようにtarget属性に"_blank"を指定すると、
別タブで開くリンクにすることができます。
＜アウトプット＞
＜ソースコード＞
<a href="https://www.yahoo.co.jp/" target="_blank">ヤフージャパンを新しいタブで</a>
ただし、ユーザーが現在ページを見失ったり、「戻るボタン」が使えなくなるというデメリットは把握して使いましょう。
別ファイルへのリンク
次に別のファイルへのリンクです。
＜ソースコード＞
<a href="next.html">次のページへ</a>
別ファイルを用意し、同じ階層に配置します。
その（パスを含んだ）ファイル名を“href”で指定します。
今回はリンク先として同一のフォルダ内にあるnext.htmlとしています。
ここでもしも、リンク先のファイルが同一フォルダ内に無かったらどのように指定したら良いでしょうか？
下位フォルダにある場合と上位フォルダを辿る必要がある場合とに分けて説明します。
１．下位フォルダにある場合
index.htmlファイルからnext.htmlにリンクを貼るとします。
index.htmlが入っているhtmlフォルダの中のnext.htmlにリンクする場合は以下のように書きます。
<a href="under/next.html">次のページへ</a>
underフォルダ内のnext.htmlを指定しています。
そのまま直感的に表現できます。
２．上位フォルダを辿る必要がある場合
next.htmlファイルからindex.htmlにリンクを貼るとします。
next.htmlが入っているunderから見てindex.htmlが入っているhtmlフォルダは１つ上の階層にあります。
その場合は以下のように書きます。
<a href="../index.html">こちらは次のページです</a>
「..」で一つ上のフォルダに移動します。
相対パスと絶対パス指定
なお、このようなパスの指定方法を相対パスといいます。
自分自身（のHTMLファイル）から見た相対的な位置関係を指定するのでこの名前があります。
もうひとつ「https://（ドメイン名）」で始まる絶対パス（正確には絶対URL）という方法もありますが、リンク先の指定方法としては相対パスのほうが優れています。
なぜなら、ドメインを変更しても、リンクを修正しなくて良いからです。
相対パスは「現在地からの道案内」、絶対パスは「住所」に例えることができます。
絶対パスは「日本国愛知県名古屋市中区・・・」といった住所のイメージです。
ページ内リンク
最後にページ内リンクです。
＜ソースコード＞
<a href="#link">ページ内リンクへ</a> <h1 id="link">ページ内リンク</h1>
リンク元とリンク先には同じ文字列を使います。
リンク元はhref属性に"#link"のように＃を付けます。
リンク先のidは#はなしで"link"となります。
このように書けば、ページ内リンクを作ることができます。
以上、今回は「URLリンク、別ファイルリンク、ページ内リンク」について学びました。
次回は、「画像を貼って表現力アップ」する方法について学びましょう。
【今回の復習Youtube】
最後までお読みいただきありがとうございました。