【HTML】<a>(アンカー要素)を使って文字や画像にリンクを張ろう!

【HTML】<a>(アンカー要素)を使って文字や画像にリンクを張ろう!

<a>タグ(アンカー要素)とは?

<a>タグ(アンカー要素)は、リンクを作成するために使います。
webサイトのページ、ファイル、メールアドレス、電話番号、特定のページ内の場所にリンクを張ることができます。

他にも、新しいウィンドウで開いたり別タブで開いたりとリンク先の開き方も様々設定する事ができます。

<a>タグ使い方の基本

<a>タグを使った基本の使用例になります。

<a href="リンク先のURL">リンクテキスト</a>

リンクテキストの下にボーダー(アンダーライン)が付き、文字の色が変わりました。
このテキストをクリックすると設定した「リンク先のURL」へページが飛ぶ様になりました。

外部リンクの設定方法

別のWebサイトにリンクを張る設定です。
例としてYahoo!JAPANさんにリンクを張ってみました。

<a href="https://www.yahoo.co.jp/">リンクテキスト</a>

内部リンクの設定方法

自身のサイト内で別ページにリンクを張る設定です。
例ととして「page1.html」というページにリンクを張ってみました。

<a href="/page1.html">リンクテキスト</a>

ページ内リンクの設定方法

ページ内リンクとは、ページの中の飛ばしたい場所にリンクを張る設定です。
飛ばしたい場所にはID(アンカー)を設定します。

<!-- リンク設定 -->
<a href="#anchor">アンカーリンク</a>

<!-- リンク先の設定 -->
<div id="anchor">~</div>

メールアドレスリンクの設定方法

メールアドレスを設定する事で、メーラーが立ち上がります。

<a href="mailto:example@example.co.jp">メーラー立ち上げ</a>

電話番号の設定方法

電話番号を設定する事で、電話をかけられる様になります。
スマホなど電話を掛けられる場合のみ起動します。

<a href="tel:000-0000-0000">電話番号へリンク</a>

<!-- 国際電話の場合 -->
<a href="tel:+81-90-0000-0000">国際電話へリンク090-0000-0000</a>

リンク先の開き方設定

リンク先の開き方は「target」を使って設定します。

_blank

<a href="リンク先" target="_blank">リンク先の開き方</a>

新しいタブにリンク先を開きます。

_self

<a href="リンク先" target="_self">リンク先の開き方</a>

普通のリンクで、今見ているページにリンク先を表示します。
デフォルト設定がこの_selfになるので、わざわざ設定する事はありません。

_parent

<a href="リンク先" target="_parent">リンク先の開き方</a>

リンク先のページが親フレームに表示されます。
iframeなどで使用します。

_top

<a href="リンク先" target="_top">リンク先の開き方</a>

リンク先のページがWebブラウザ全体に表示されます。
フレームセットが解除され、単一ページのみ表示されます。
リンク先のページは親フレームに表示されますので、iframeなどで使用します。