ITエンジニアのプレイングマネージャー化応援サイト

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

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

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

前回は、「スタイルを適用する対象をセレクタで広げる」方法を学びました。
 
今回は、あなたのサイトを訪れるユーザーに色々なページを見てもらうためにリンクについて学びましょう。
 

リンクを貼る

リンク

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

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

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

今回は、

URLのリンク

別ファイルへのリンク

ページ内リンク

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

URLのリンク

まずはURLのリンクです。

<アウトプット>

 

ヤフージャパンへ

<ソースコード>

 

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

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

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

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

 

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

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

 <アウトプット>

 

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

<ソースコード>

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

 

別ファイルへのリンク

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

<ソースコード> 

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

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

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

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

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

1.下位フォルダにある場合

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

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

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

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

2.上位フォルダを辿る必要がある場合

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

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

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

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

 

相対パスと絶対パス指定

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

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

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

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

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

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

ページ内リンク

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

 
<ソースコード>

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

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

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

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

 

 

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

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

 

 

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

 

新入社員研修ポータル

IT企業の人財育成に関することなら全てお任せ下さい TEL 0120-559-463 受付時間 10:00 - 17:00 (土・日・祝日除く)

ZOOMを使った遠隔研修メニュー(PDFが開きます)

ZOOMを使った遠隔研修

新人エンジニアのためのJavaタイピングゲーム

新人プログラマのためのプログラミング動画

YouTubeチャンネル

お問い合わせはこちらから

    お名前 (必須)

    メールアドレス (必須)

    題名(件名)

    メッセージ本文

    確認画面は表示されません。上記内容にて送信しますので、よろしければチェックを入れてください。

    新入社員研修ポータル

    PAGETOP
    Copyright © Say Consulting Group, Inc. All Rights Reserved.