【HTML&CSS】aタグの使い方！初心者向けに分かりやすく解説！

<a>タグの使い方について詳しく教えて！

<a>タグについて詳しく解説していくね！

<a>タグとは？

<a>タグはリンクを作るときに使います。

<a>タグはアンカータグやリンクタグと呼ばれることもあります。

<h3>リンクの例</h3>
<a href="">リンク</a>

<a>タグでWebページへのリンクや、メールアプリを開くメールのリンクを作ることができます。

<a>タグの基本の使い方

リンクを表示するときは<a>タグを使います。リンク先はhref属性で指定します。

画面に表示する文字は<a>と</a>タグの中に記述します。

<a>タグ内での表示テキストは「アンカーテキスト」と呼ばれます。

<h3>URLを指定する例</h3>
<a href="https://choippo.com">ちょいっぽ</a>

hrefに「https」から始まるURLを指定することで、そのURLに遷移するリンクを作成することができます。

リンクをクリックすると「https://choippo.com」にページが遷移します。

<a>タグのrel属性の使い方

<a>タグのrel属性は、現在のページとリンク先のページの関係を表します。

relは「relation（関係性）」の略称になっています。

rel属性を指定しても表示の見た目には変化はありませんが、rel属性を付けておくと良いケースもあります。

実際にはあまり使うことは少ないです。

リンク先をたどらせない（nofollow）

rel属性にnofollowを指定するとリンク先のページを検索エンジンがたどらないようになります。

これはページの評価を高めるSEO対策をするときに使われます。

広告のページやページの評価に影響しそうなページのリンクを貼るときに指定されます。

実際に使うケースは少ないと思います。

リンク元のページを操作できないようにする（noopener）

rel属性にnoopenerを指定するとリンク元のページを操作（アクセス）できないようにできます。

これはセキュリティ対策の一種として使われ、target="_blank"が指定されたときに一緒に使われます。

target="_blank"にはセキュリティ上の脆弱性があるためnoopenerを使う風習となっています。

何に問題があるかと言うと、JavaScriptでのwindow.opener.locationという処理に問題があります。
リンクをクリックした後の遷移先のページでwindow.opener.location = 何かしらのURLという処理を書くと、遷移先のページに移動した瞬間にリンク元のURLが「何かしらのURL」のページに自動的に移動させられてしまいます。

そのため、悪意のある人がフィッシングサイトに誘導する手段として使われてしまう恐れがあります。

このような問題を防ぐためにもtarget="_blank"を使うときにはrel="noopener"をセットで使うようにしましょう。

リンク元の情報を送らない（noreferrer）

rel属性にnoreferrerを指定すると参照元のリンクを遷移先へ送らないようにできます。

ユーザーIDなど遷移先に送りたくない情報があるときに使います。

rel属性に複数の値を指定する

rel属性の値には複数の値を指定することができます。

複数の値を指定するときはスペースで区切って並べます。

いろいろなリンクの使い方

別タブでリンクを開く

<a>タグのtarget属性に「_blank」を指定してtarget="_blank"のようにすると、クリックしたときに新しいタブでリンク先のページが開きます。

<a
  href="https://choippo.com"
  target="_blank"
  rel="noopener"
>ちょいっぽ</a>

セキュリティ対策のために、外部のページにリンクするときはrel="noopener"も一緒に指定しましょう。

画像をリンクにする

<img>タグを<a>タグで囲むことで画像をリンクにすることができます。

<a href="https://choippo.com">
  <img src="namake.png" alt="ナマケモノ">
</a>

これで画像をクリックするとトップページに遷移できるようになりました。

<img>タグを使うときは正しく表示できなかったときのためにalt属性を指定しておきましょう。
alt属性を指定しておくことで、表示に問題があったときこちらのテキストがリンクに表示されます。

ページ内リンクを作成する

href="#id名"のようにhref属性の値にid名を指定すると、そのidの位置まで移動するリンクにすることができます。

このようなページ内リンクは記事の目次を作るときなどに使われます。

<a href="#contents-sample">目次へ</a>

<h3 id="contents-sample">目次</h3>
<p>目次1</p>
<p>目次2</p>
<p>目次3</p>

id名の前に#を付け忘れないように注意しましょう。

メールリンクを作成する

href="mailto:メールアドレス"のようにhref属性の値にmailto:メールアドレスを指定するとメール用のリンクを作成することができます。

リンクをクリックするとメールアプリが起動し、メールアドレスが入った状態のメールを作成画面を開くことができます。

<a href="mailto:example@example.com">
  example@example.com
</a>

電話番号リンクを作成する

href="tel:電話番号"のようにhref属性の値にtel:電話番号を指定すると電話番号用のリンクを作成することができます。

「電話番号」の部分はハイフン（-）を付けても付けなくてもどちらでも大丈夫です。

リンクをクリックすると電話を発信する画面が開くので、電話番号を入力する手間がなくなります。

<a href="tel:0312345678>
  03-1234-5678
</a>

ダウンロードリンクを作成する

href属性にファイルの場所を指定して、download属性でダウンロード時のファイル名を指定することで、ファイルをダウンロードするリンクを作成することができます。

リンクをクリックするとリンク先のファイルを表示せずにダウンロードが始まります。

<a href="./namake.png" download="namake.png">
  画像をダウンロード
</a>

CSSでデザインを変える

<a>タグをそのまま使うと見た目があまり良くありません。

下線が付いていたり、リンクの色もデフォルトは強い色をしています。

<a>タグを使ったリンクをより分かりやすく表現できるようにCSSを使って見た目を変えてみましょう。

リンクの下線を消す

デフォルトだとリンクに下線が付いてしまいます。

リンク感を抑えたいときはリンクを消すと、見た目の印象が変わります。

CSSでtext-decorationプロパティの値をnoneにすることで下線を消すことができます。

a {
  text-decoration: none;
}

<a href="">リンク</a>

文字の色を変更する

デフォルトのリンクの色は濃い青色なので、強い印象を与えてしまいます。

見やすいリンクにするために色を変更してみましょう。

CSSでcolorプロパティの値に色コード（#から始まるコード）や色の名前（red、blue、greenなど）を指定することで変更ができます。

a {
  color: #9FD9F6;
}

<a href="">リンク</a>

カーソルをのせたときに見た目を変える

リンクをより目立たせたいときは、リンクにカーソルをのせたときの見た目に変化を付けます。

カーソルをのせることを「ホバー」と言い、CSSのhoverという疑似クラスを使います。

擬似クラスは<a>タグ以外にも使うことができます。

詳しい擬似クラスについてはこちら

【HTML&CSS】CSSの基本と使い方を初心者向けに解説！

CSSでa:hoverとすることでカーソルをのせたときの見た目を変えることができます。

a:hover {
  color: #A3BCE2;
}

<a href="">リンク</a>

未選択・選択済みリンクの見た目を変える

未選択のリンクや選択済みのリンクの見た目は擬似クラスを使うことで変更することができます。

CSSで未選択リンクの見た目を変えるときはa:link、選択済みリンクの見た目を変えるときはa:visitedのようにします。

未選択リンク

選択済リンク

幅と高さを変える

<a>タグはCSSでwidthで幅を、heightで高さを変えることができますが、1つ条件が必要です。

<a>タグはデフォルトでインライン要素となっているため、幅と高さを変えるためにはブロック要素に変える必要があります。

インライン要素は幅と高さを変更できない要素になっています。

CSSでdisplay: blockとした上でwidthとheightで幅や高さを指定する必要があります。

例では幅と高さが分かりやすいように背景を付けています。

a {
  display: block;
  width: 200px;
  height: 200px;
  background-color: #FCD7A1;
}

<a href="">リンク</a>

リンクをボタン風の見た目にする

リンクをボタンのような見た目にすることもできます。

ボタンのような見た目にすることで、リンク感を出さずに表示することができます。

a {
  display: inline-block;
  text-decoration: none;
  background-color: #9FD9F6;
  color: #FFF;
  padding: 10px 30px;
  border-radius: 10px;
  font-weight: bold;
}

<a href="">リンク</a>

まとめ

<a>タグについて詳しく解説したよ！

<a>タグの使い方について分かったよ！