HTML

リンクをはるタグ

リンクをはるタグ

リンクをはる<a>タグ

リンクをはるにはリンクさせたい部分を<a href="">と</a>タグではさみます。

aタグのaはAnchor(いかり)の略です。

aタグは<a href=""></a>の形式で書き、飛ばしたいリンクのURLを""(ダブルクォーテーション)の中、ブラウザ上で表示したい文字を<a>と</a>の間に書きます。

リンク先はhref属性で指定します。

<a href="https://google.co.jp">Google</a>で詳しく調べる

画像にリンクをはる

画像にリンクをはるには<img>タグを<a>タグで囲みます。

これにより、ユーザーが画像をクリックすると指定したページにジャンプするように設定できます。

<a href="https://google.co.jp"><img src="img.jpg" alt="画像"></a>

電話番号へのリンク

電話番号へリンクをはる時はhref属性に「tel:」と記述し、続けて電話番号を入れます。

ユーザーがリンクをクリックすると電話をかけることができます。

<a href="tel:09012345678">電話をかける</a>

メールアドレス宛てのリンク

メールアドレスへリンクをはる時はhref属性に「mailto:」と記述し、続けて送り先のメールアドレスを入れます。

ユーザーがリンクをクリックすると使用しているメーラーが起動し、送信先にそのメールアドレスが入力されます。

<a href=”mailto:info@example.com”>お問い合わせ</a>

リンク先のページを別タブで表示させる

通常リンク先のページは同一タブ内で表示されますが、target属性の値を「_blank」にすることでリンク先を別タブで表示できます。

<a href="https://google.co.jp" target="_blank">Google</a>

ページ内リンク

<a href="">タグを使い、ページ内リンクをする

ページ内の別の場所に移動するために、idを使いリンクを使用できます。

移動先の要素に同じidを指定し、<a>タグのhref属性に#とidを組み合わせて指定します。

<a href="#about">ABOUTへ移動</a>
<div id="about">ABOUT</div>

-HTML