リンクをはるタグ
リンクをはる<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>