aタグでリンクを表示する

Updated
2021/8/8 9:48
Author
Jumpei IkegamiJumpei Ikegami
order
4
aタグはHTMLタグの中でも「リンクを表示する」という固有の役割をもった重要なタグです。その主な使い方について説明します。
なお、実際の表示を試したい場合は次のチュートリアルで紹介したCodePenにソースコードを貼って試してみましょう。
簡単なHTMLとJavaScriptで自分だけのテキスト変換ツールをつくろう2021/6/20 5:402021/6/20 8:09

aタグの基本的な使い方

aタグは、あるURLへのリンクを表示するために使います。リンクとして表示したいテキストを内に含み、href属性にURLを指定します。
HTML
notion image

領域をリンクにする

テキストだけではなく、「この領域全てをリンクにしたい」というケースがあります。その場合も、基本的にはaタグで囲めばリンクにすることができます。
HTML
わかりやすいように、cssで色も付けてみます。
CSS
notion image
同様に、imgタグをaタグで囲むことで画像をリンクにすることもできます。
HTML

リンクテキストのスタイルを変更する

aタグで囲んだテキストは、色が青くなったり、下線が引かれたりします。また、一度訪れたことのあるリンク先であれば紫色になったりします。こうしたデフォルトのスタイルはリンクであることをわかりやすくするために考えられたものですが、別のスタイルで上書きしたくなることがあります。たとえば、次の画像の下の黒いテキストのように、色を変えたり下線をなくしたりすることができます。
notion image
次のようなaタグにcssでスタイルを当てて、デフォルトのスタイルを上書きしてみましょう。
HTML

文字色を変える

文字の色を変える場合は、colorプロパティを別の色に変更します。
CSS

下線を消す

下線を消すには、text-decorationプロパティをnoneに設定します。
CSS

hover時に半透明にする

最近のWebサイトでは、リンクであることをわかりやすくするために、マウスカーソルをhoverしたときだけテキストを半透明にするということがあります。その場合、cssで次のような指定をします。
CSS
なお、スマホからのアクセスではhoverという概念が無いので、残念ながら使えません。

別のタブでリンクを開く

aタグで作成したリンクは、デフォルトでは今見ているブラウザのタブがリンク先ページに切り替わります。現在のタブを保持しながら新しいタブでリンク先を開かせたい場合は、target属性に_blankを設定します。
HTML
_blankとは、「空の新しいタブ」という意味です。ちなみに現在のタブで開く場合はtarget属性に_selfを設定しますが、target属性を指定しない場合はデフォルトで_selfが設定されるので特に知る必要はありません。
なお、インターネットを調べると「target属性を_blankに設定した場合はセキュリティ上の問題を回避するために合わせてrel属性にnoopenerを指定せよ」という説明が多数出てきます。
HTML
これについては、2019年にSafari12.1が、2020年にFirefox79がデフォルトでrel="noopener"を指定したのと同じ挙動に仕様変更してくれました。Chromeもそれに続くと思われるので、今後はそこまで意識する必要はなくなりそうです。

もっと詳しく知りたい方へ