1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

【HTML入門】様々なリンクの作り方

Pocket

内容
HTML入門 様々なリンクの作り方 1
はじめに 3
アンカータグ 4
画像をリンクにする 6
ページ内リンクについて 7
まとめ 8


はじめに
HTMLのタグには「アンカータグ(リンクタグ)」というものが存在します。

このアンカータグを使用する事によって
①今見ているWebページ内の異なる箇所に移動(ページ内リンク)させたり
②異なるページへ遷移させたり
③外部サイトへ遷移させたり

など、他の場所へジャンプさせる(リンクさせる)ことができます。つまり、ハイパーリンクを指定する際にこのタグを使用します。


アンカータグ
アンカータグは下記のように記述します。

  トップページへ

aタグには様々な属性がありますが、ここではよく使用される以下の2つを紹介します。
項目 説明
href ハイパーリンク先のURLを指定
(/xxx/yyy/zzz.htmlや、http://xxx/yyy/zzz.co.jpなど)
target ハイパーリンク先の表示方法を指定
(target省略時はデフォルトで_self)

_blank : 新規ウィンドウに表示
_self : 現在のウィンドウに表示
_top : フレーム分割を全て解除し、ウィンドウ全体に表示
_parent : 親フレームに表示

タグに囲まれた部分(上記の例では「トップページへ」)にリンクが張られ、クリックするとhref属性に指定した先に遷移することが出来ます。

リンクが張られているテキストの事をアンカーテキストといいます。
余談ですが、アンカーテキストにキーワードを含めるというのはSEO対策では重要とされています。

例1)下記の様に記述

トップページへ(h2タグに囲まれています)

トップページへ(h2タグとaタグに囲まれています)

トップページへ(aタグに囲まれています)

結果、下図のように表示されました。

ここにhtmlフォルダの画像「cap_01」が入ります。

aタグに囲まれたテキストにリンクが張られているのがおわかりでしょうか。

href属性に指定した遷移先が見つからない場合は、リンクをクリックしてもファイルが見つからない等のエラーページに遷移します。

今回の例では、例を記述したファイルと同じ階層に「top.html」というファイルが存在しない場合はエラーページに遷移します。


画像をリンクにする
リンクはテキストだけでなく画像にも張ることが出来ます。

テキストと同じようにaタグ内に「imgタグ」を記述すると画像にリンクが張られ、画像をクリックすることでhref属性に指定した先に遷移します。

例) 存在する画像と、存在しない画像をパス(src属性)に指定。

トップページへ (存在する画像パスを指定しています。)

トップページへ (存在しない画像パスを指定しています。)

結果、下図のように表示されました。

ここにhtmlフォルダの画像「cap_02」が入ります。

1つ目のリンクは正しい画像パスを指定していた為、ちゃんと画像が表示されてその画像にリンクが張られています。

2つ目のリンクは画像パスに誤りがあった為、画像が見つからなくimgタグの「alt属性」に記述したテキストが代わりに表示され、アンカーテキストのように扱われています。

こちらの場合もリンクとしての機能は問題なく動きます。


ページ内リンクについて
同ページ内の任意の位置にジャンプする場合は、href属性に記述する内容が今まで説明したものと少し変わります。

  ID名「BOTTOM」の位置にジャンプ

 

画面最下部

ページ内リンクを張る場合はhref属性に「#ID名」と指定をします。
任意のジャンプ先の要素にID名を付け、href属性でID名を指定することによりリンクが可能となります。

上記の例ではリンクをクリックすると「画面最下部」と記述された位置へジャンプします。


まとめ
今回はリンク作り方についてaタグの簡単な説明をしてきました。
もっと詳細に知りたい方は、他の属性についてや遷移先URLの絶対パス・相対パスについてなど調べてみるといいでしょう。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

おすすめスクール

全国30校舎で展開されるヒューマンアカデミーのWeb講座は修了者数4万人超、講師とカリキュラムの満足度がどちらも9割を超えています。就職や転職に必要なレベルの実務スキルを身に付けられます。

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

イチ押しランキング

1リナックスアカデミー

リナックスアカデミー

2システムアーキテクチュアナレッジ

システムアーキテクチュアナレッジ
ページ上部へ戻る