posted on 2019.9.14
htmlでリンクを作成するには<a>タグを使用します。リンクとはインターネットの世界では、あるウェブページから他のウェブページ、異なるウェブサイトのURL、同一ウェブページ内の複数のコンテンツなどへの参照であり、リンクをクリックやタップすることで指定された場所に遷移します。
ここではhtmlでリンクのために準備されている<a>タグについて、その知識と基本的な使用方法について記事にしたいと思います。
<a>タグとは
HTML の< a >要素 (アンカー要素) の主要な役割は、 同一ウェブサイト内の他のウェブページ、同一ページ内の複数のコンテンツ、電子メールアドレス、別ウェブサイトのURLなどへのハイパーリンクをhref 属性を利用して作成することです。必要なケースではtarget属性を利用して、href 属性で設定したドキュメントを開く場所を指定します。
href属性にリンク先を設定する。
<a>タグのhref属性は様々なリンク先を設定することができますが、ここではホームページを作成する上で良く利用するホームページ制作入門者が最初に覚えておくべき設定をいくつか紹介し、通常あまり利用しないものは別の記事で解説したいと思います。
・同一ウェブサイト内の異なるページへのリンク
<a>タグのhref属性へのリンクの設定でホームページ制作入門者が最初に学ぶのが、この設定だと思います。ウェブサイトに複数ページを設ける時には絶対必要で、ホームページから会社概要やお問い合わせホームなど、ひとつのウェブサイト内をリンクで回覧できるようにしたものです。通常はヘッダーのメインナビゲーションやサイトマップなどで使用します。
href属性へのリンクの設定は以下のようになります。
<a href="/refer/ホームページつくりかた"> ホームページ作り方記事まとめへ移動します </a>同一ウェブサイト上へのリンクであれば上記のように/refer/から始まる相対での指定で動作しますし、また当サイトであればhref属性に「https://over-creation-studio.jp/refer/ホームページつくりかた」と絶対指定で設定しても動作します。
・異なるウェブサイトのurlへのリンク
<a>タグのhref属性へは異なるウェブサイトへのハイーパーリンクも設定することもできます。個人や小さなウェブサイトではあまり使用しないかもしれませんが、大きな企業などでメインのウェブサイトとは別に採用ページなどを別のウェブサイトとして設ける時などが使用ケースとして考えられます。
href属性へのリンクの設定は以下のようになります。
<a href="https://mirror-lifeus.com/">mirrorへ</a>href属性へのurlの設定は異なるウェブサイトのケースでは、絶対指定で設定します。
・同一ウェブページ内の複数のコンテンツへのリンク
<a>タグのhref属性には同一ページ内の章で区切られているような複数のコンテンツへのハイパーリンクを設定することもできます。ウェブメディアを作成する際の目次などに良く使用されています。
href属性へのリンクの設定は以下のようになります。
<a href="#link_01"> 「<a>タグとは」に戻ります</a>このケースでは、リンク先（到着地点）の<div>タグなどにid属性やname属性を設定する必要があります。
<div id="link_01"><a>タグとは <div>他にもメールソフトを開くことができる<a href=”mailto:>や小窓などを開く為にjavascriptを設定する<a href=”javascript:>などがありますが、ここでは割愛し、別途記事にしたいと思います。
target属性でリンク先をどこにどのように表示するかを指定する
<a>タグのhref属性に設定したリンク先をどのように表示するかを設定するのがtarget属性です。a 要素以外にarea 要素やlink 要素にも設定することができます。
– 値 –
| _self | リンクは同じウィンドウに表示されます。規定値。何も指定しない場合は_self |
|---|---|
| _blank | リンクは別タブや別ウィンドウで開かれます。 |
| _top | フレームを使用したウェブページでは、その最上位領域。フレームがなければ_self。 |
| _parent | フレームを使用したウェブページでは現在の親の領域。親が無ければ_top。 |
現在のウェブページではあまりフレームセットを組むこともないので、_top、_parentの説明は別の機会にしてここでは、_selfと_blankの違いだけ確認することにします。
<a href="https://mirror-lifeus.com/" target="_self">
同じウィンドウ、タブ内にmirrorを表示します
</a><a href="https://mirror-lifeus.com/" target="_blank">
別タブを開いてmirrorを表示します
</a><a>タグで使われる擬似クラス、cssの設定
<a>タグではその状態によって主に4つの擬似クラスを設定します。そして、それぞれが以下のような意味を持ちます。
| a:link | 未訪問のリンク。 |
|---|---|
| a:visited | 訪問済みのリンク。:hover、:activeによって上書きされます。 |
| a:hover | 指定要素にカーソルが重なった時 |
| a:active | 指定要素をクリックしてた時。:linkによって上書きされます。 |
<a>タグの擬似クラスに設定できるCSSプロパティは、text-decoration、color、background-color、border-color、border-bottom-color、border-left-color、border-right-color、border-top-color、column-rule-color、outline-color などがあります。
cssで何も設定しなければ、text-dicorationはすべての擬似クラスで「text-decoration: underline;」colorはブラウザによって設定が異なります。
<a>の色の設定はブラウザによって以下のようにデフォルト設定されています。
| Chrome | IE11 | Firefox | |
|---|---|---|---|
| a:link | #0000ee | #0066cb | #0000ee |
| a:active | #fe0000 | 変化無し | #ee0000 |
| a:visited | #551b8c | #81007f | #551b8c |
<a>タグのそれぞれの擬似クラスでアンダーラインや色に変化をつけることでユーザビリティーの向上につながります。他サイトなどを参考にしていろいろとcssで設定してみてください。
htmlでリンクの作成!記事まとめ
今回はhtmlでリンクがどのように成り立っているのかを簡単に解説してきましたがいかがだったでしょうか。ウェブサイトを作成するうえでこの記事で取り上げたようなリンクの知識は必ず必要になります。ホームページを自分で作りたい方が素敵なホームページを作ってくれる手助けになれば幸いです。それではまた。
