aタグでリンクを表示する
Updated
2021/8/8 9:48
Author
Jumpei Ikegamiorder
4
aタグはHTMLタグの中でも「リンクを表示する」という固有の役割をもった重要なタグです。その主な使い方について説明します。
簡単なHTMLとJavaScriptで自分だけのテキスト変換ツールをつくろう2021/6/20 5:402021/6/20 8:09
aタグの基本的な使い方
aタグは、あるURLへのリンクを表示するために使います。リンクとして表示したいテキストを内に含み、href属性にURLを指定します。
HTML
領域をリンクにする
テキストだけではなく、「この領域全てをリンクにしたい」というケースがあります。その場合も、基本的には
aタグで囲めばリンクにすることができます。HTML
わかりやすいように、cssで色も付けてみます。
CSS
同様に、
imgタグをaタグで囲むことで画像をリンクにすることもできます。HTML
リンクテキストのスタイルを変更する
aタグで囲んだテキストは、色が青くなったり、下線が引かれたりします。また、一度訪れたことのあるリンク先であれば紫色になったりします。こうしたデフォルトのスタイルはリンクであることをわかりやすくするために考えられたものですが、別のスタイルで上書きしたくなることがあります。たとえば、次の画像の下の黒いテキストのように、色を変えたり下線をなくしたりすることができます。
次のような
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もそれに続くと思われるので、今後はそこまで意識する必要はなくなりそうです。