6.リンクを張って回遊性を高める

ここでは、IT系企業の新入社員向けにHTMLを解説しています。

デザイナーになるほどHTMLに詳しくなくてもいいけれど、Webアプリを作る上で必要な入力画面は自力で作りたい、そんなあなたのためのページです。

リンクを貼る

リンク

リンクを貼るとユーザーを別ページに誘導することができます。

HTML（HyperText Markup Language）には“Hyper”（超える）“Text”（今までのテキストを）という意味があります。

まさに、HTMLの語源になっているのがこのリンクの機能です。 

今回は、

「URLのリンク」

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

「ページ内リンク」

という３つのリンク方法について学びます。

URLのリンク

まずはURLのリンクです。

＜アウトプット＞

 

ヤフージャパンへ

＜ソースコード＞

 

リンクを作るにはこのように<a>タグを使います。

“href”でリンク先を指定します。

ちなみに“a”は「anchor（錨）」、“href”は「hyper reference」の略です。

今回は、例としてヤフージャパンのURLを指定しています。

 

なお、下記のようにtarget属性に”_blank”を指定すると、

別タブで開くリンクにすることができます。

 ＜アウトプット＞

 

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

＜ソースコード＞

ただし、ユーザーが現在ページを見失ったり、「戻るボタン」が使えなくなるというデメリットは把握して使いましょう。

 

別ファイルへのリンク

次に別のファイルへのリンクです。

＜ソースコード＞ 

別ファイルを用意し、同じ階層に配置します。

その（パスを含んだ）ファイル名を“href”で指定します。

今回はリンク先として同一のフォルダ内にあるnext.htmlとしています。

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

下位フォルダにある場合と上位フォルダを辿る必要がある場合とに分けて説明します。

１．下位フォルダにある場合

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

index.htmlが入っているhtmlフォルダの中のnext.htmlにリンクする場合は以下のように書きます。

underフォルダ内のnext.htmlを指定しています。

そのまま直感的に表現できます。

２．上位フォルダを辿る必要がある場合

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

next.htmlが入っているunderから見てindex.htmlが入っているhtmlフォルダは１つ上の階層にあります。

その場合は以下のように書きます。

「..」で一つ上のフォルダに移動します。

 

相対パスと絶対パス指定

なお、このようなパスの指定方法を相対パスといいます。

自分自身（のHTMLファイル）から見た相対的な位置関係を指定するのでこの名前があります。

もうひとつ「https://（ドメイン名）」で始まる絶対パスという方法もありますが、リンク先の指定方法としては相対パスのほうが優れています。

なぜなら、ドメインを変更しても、リンクを修正しなくて良いからです。

相対パスは「現在地からの道案内」、絶対パスは「住所」に例えることができます。

絶対パスは「日本国愛知県名古屋市中区・・・」といった住所のイメージです。

ページ内リンク

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

＜ソースコード＞

リンク元とリンク先には同じ文字列を使います。

リンク元はhref属性に”#link”のように＃を付けます。

リンク先のidは#はなしで”link”となります。

このように書けば、ページ内リンクを作ることができます。

 

 

以上、今回は「URLリンク、別ファイルリンク、ページ内リンク」について学びました。

次回は、「画像を貼って表現力アップ」する方法について学びましょう。

 

【今回の復習Youtube】

 

 

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