初心者向け HTMLのaタグ（リンク）の解説

catnose · 2020/02/23 に最終更新

HTMLの<a>タグは、リンクを作るために使います。このページでは<a>タグの基本から使い方のコツ、CSSでスタイルを変更する方法などまで詳しく解説します。

✍️aタグはアンカータグやリンクと呼ばれたりします。

<h3>お問い合わせ</h3>
<a href="https://catnose99.com">ウェブサイト</a>
<a href="mailto:catnose99@gmail.com">メール</a>

👆このように<a>タグでWebページへのリンクや、メールのリンク（クリックでメールアプリが開くようなもの）を作成できます。

このページの目次

aタグの使い方の基本
知っておきたいaタグのrel属性
HTMLでリンクをつくるときのコツ
いろいろな種類のリンクを作成する
aタグの中に入れてはいけないタグ
CSSでリンクのデザインを変更

aタグの使い方の基本

書き方

<a href="リンク先のURL">表示テキストや画像</a>

👆リンクの基本的な書き方はこのようになります。<a>~</a>の中に表示するテキストや画像を入れます。

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

hrefでURLを指定する

クリックしたときに飛ぶ先のURLはhref="◯◯"という形で指定します。

<a href="https://catnose99.com">ウェブサイト</a>

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

✍️ hrefは「エイチレフ」と発音します。

target="_blank"で別タブで開く

<a href="..." target="_blank" rel="noopener">...</a>

👆<a>タグ内にtarget="_blank"を指定すると、クリックしたときに（元のページはそのままで）新しいタブやウィンドウでページが開くようになります。

<a
  href="https://catnose99.com"
  target="_blank"
  rel="noopener"
>ウェブサイト</a>
<!-- 見やすさのためにタグ内で改行してもOK -->

クリックすると別タブで開きます

👆外部のサイトへのリンクでtarget="_blank"を使うときには、セキュリティ対策のためrel="noopener"も合わせて指定するようにします。
詳細はのちほど説明しますが「target="_blank"とrel="noopener"はセットで使う！」と覚えてしまっても良いでしょう。

📝覚えておこう

target="_blank" と rel="noopener" はセットで使う！

buttonタグとの使い分け

HTML初心者の方は「ボタンタグ（<button>）との違いは何？」と思うかもしれません。基本的に以下のように使い分けましょう。

クリックで他のページへ飛ぶようにしたい👉<a>
クリックでJavaScriptを動かしたい👉<button>
フォームの送信・リセット👉<button>

JavaScriptの処理を呼び出すためのボタンなら<a>ではなく<button>を使いましょう。

関連するページを読む

buttonタグの使い方 - HTML

知っておきたいaタグのrel属性

<a>タグのrelレル属性は、現在のページと、リンク先のページの関係を表すために使います。relはrelation（リレーション＝関係性）の略です。

relを指定する意味

<a href="https://catnose99.com" rel="nofollow">ブログを開く</a>

👆rel属性を指定しても、実際のページの表示は変わりません。では何のために使うのかというと、ロボット（検索エンジンやブラウザ）に指示を出すためです。

nofollow：リンク先を推薦しない重要

<a href="" rel="nofollow">...</a>

nofollowノーフォローは「リンク先のページを推薦しない」という意味になります。信頼しきれないページへのリンクを貼るときにrel="nofollow"を指定すると、検索エンジンに対して「このページは見に行かなくていいよ」と伝える効果があります。これはSEO（検索エンジン最適化）で重要です。

nofollowの使いどころの例

広告のリンクを貼るとき
ユーザーが文章を投稿できるWebサービスをつくるとき（nofollow無しだとリンクを貼ることでSEO対策ができてしまう…。リンクを貼られまくってしまいます）

noopener：元のページを操作できないようにする

<a href="..." rel="noopener" target="_blank">...</a>

noopenerノーオープナーは、新しいタブでページを開いたときに、元のページを変更できないようにするために使います。信頼できないリンクを別タブを開くときにrel="noopener"がついていないと以下のように悪用される危険性があります。

悪用の例

とある悪質なページAは、別タブで開かれたときに、元のページをフィッシングサイトに飛ばすスクリプトを書いていた。
あなたは<a href="ページAのURL" target="blank">詳しくはこちら！</a>とrel="noopener"なしでリンクを貼ってしまった。
あなたのサイトからリンクをクリックしたユーザーがフィッシングサイトに飛ばされてしまった。

noopenerの使いどころ

外部サイトへのリンクで別タブで開く設定（target="_blank"）にするとき

noreferrer：リファラーとして送信しない

<a href="..." rel="noopener noreferrer" target="_blank">...</a>

noreferrerノーリファラーは、リンク先を開くときに、新しいページに元のページのアドレスなどの情報を送らないようにする設定です。こちらもセキュリティのために使用します。

noreferrerの使いどころ

信頼できない外部サイトへのリンクを貼るとき

rel属性には複数の値を指定できる

`<a href="..." rel="nofollow noopener noreferrer" target="_blank" >...</a>`

👆このようにrel="◯◯"は、値を半角スペース区切りで書けば、同時に複数の指定が可能です。

HTMLでリンクをつくるときのコツ

アンカーテキストはSEOで重要！

<a href="...">アンカーテキスト</a>は、Googleなどの検索エンジンにおいて、リンク先のページの内容を表すテキストとして読まれることがあります。<a href="...">詳しくはこちら</a>よりも<a href="...">美味しい米の研ぎ方</a>のように具体的な内容を表すテキストにするのが重要です。

😺適切なアンカーテキストにすることはSEO対策の基本です。

リンクはスラッシュ（/）から始められる！

example.com上にいるときこの2つは同じ

<a href="https://example.com/html">...</a>
<a href="/html">...</a>

👆現在https://example.comのサイト上のどこかにいる場合、href="https://example.com/html"というリンクはhref="/html"に書き換えられます。https://example.comの部分を省略できるのです。

このようなスラッシュ/から始めるURLの指定の仕方は、ルートパスと呼ばれます。サイト内へのリンクは基本的にルートパスで指定するのが良いでしょう。

ルートパスのメリット

すっきりとして見やすい
ドメインを変更したときに書き換えの手間が省ける（たとえばexample.comからabc.comへ移行してもリンクを書き換える必要がない）

画像もリンクにできる！

<a>タグの中で画像（<img>タグ）を使用することもできます。

<a href="https://catnose.me/learning">
  <img src="/learning/images/ogp.png" alt="リンクの説明">
</a>

img {
  width: 175px;
}

👆画像をクリックするとページが遷移することが分かると思います。
しかし、<a>タグ内に画像を使っているため、アンカーテキストを書くことができません。そこで<img>タグにはalt="◯◯"という形でリンクの説明を書くようにします。検索エンジンがアンカーテキストと同じように「リンク先の内容を表すテキスト」として認識してくれることがあります。

📝覚えておこう

リンクの中でimgタグを使うときは、alt属性を忘れずに！

アンカータグの中ではさまざまな要素を使える

<a href="https://catnose.me/learning/html" class="link-card">
  <div>
    <img src="/learning/images/ogp.png" alt="...">
  </div>
  <h2>Code Kitchen</h2>
</a>

.link-card {
  display: block;
  margin: 1em;
  padding: 0.6em;
  border: solid 1px silver;
  text-decoration: none;
  color: #333;
  border-radius: 5px;
}
.link-card h2 {
  font-size: 1.2em;
  margin: 0.5em 0;
  padding: 0;
}

👆こちらはカード型のリンクの例です。<div>や<h2>など、画像のほかにもさまざまな要素をアンカータグ内で使用できます。

アンカータグ内では、使用してはいけないタグも一部あります。のちほど紹介します。

メニューを作るときはnavやリストタグと合わせて使おう

<nav class="menu">
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">このサイトについて</a></li>
    <li><a href="/terms">利用規約</a></li>
  </ul>
</nav>

👆たとえばサイト内メニューのようなリンク一覧を設置するときには、ナビゲーションタグ（<nav>）やリストタグ（<ul>や<li>）と合わせて使いましょう。必須ではありませんが、リンクの役割がより明確になります。

いろいろな種類のリンクを作成する

<a>タグでは、ウェブページへのリンクだけでなく、さまざまな種類のリンクを作成できます。

ページ内リンクを作る（ページの途中へジャンプ）

href="ここ"にページのURLの代わりに"#飛ぶ先のid"を指定すると、クリックしたときに、そのidの位置までジャンプしてくれます。ページ内リンクは記事の目次を作るときなど多くのシーンで活躍します。

HTML

<a href="#profile">プロフィールへスキップ</a>

~略~

<h2 id="profile">プロフィール</h2>
<p>吾輩は猫である…</p>

👆この例ではid="profile"の位置まで飛びたいので、<a href="#profile">とします。これで「プロフィールへスキップ」をクリックしたときに「プロフィール」の位置までジャンプしてくれます。

✍️メモ

hrefは#idの値とします。#をつけるのを忘れずに！
idは見出し（h1〜h6）だけでなく<div id="◯◯">のように好きな要素に指定できます。

他のページの途中へ飛ぶ

別ページのid="about"に飛ぶリンク

<a href="https://catnose.me#about">About</a>

👆このようにページのURL#ジャンプ先のidとすれば、他のページの途中に飛ぶリンクになります。

mailtoでメールリンクを作る

<a href="mailto:catnose99@gmail.com">メールで連絡</a>

メーラーが開く

👆href="mailto:メールアドレス"とすれば、メールのリンクになります。クリックするとメーラー（メールソフト）が起動し、指定したメールアドレスが入力された編集画面が表示されます。

✍️ユーザーのストレスになるかも
うっかりリンクを踏んでしまったときに、メーラーが開くのはユーザーのストレスになります。今見ているページから離れることになりますし、メーラーを閉じるのは面倒かもしれません。
お問い合わせの仕組みを作るのであれば、Googleフォームなど、Web上で完結するフォームの利用を検討しましょう。

telで電話番号リンクを作る

電話は<a href="tel:01203456789">0120-345-6789</a>まで

👆href="tel:電話番号"とすれば、電話のリンクになります。携帯電話でタップすると、電話をかける画面が開きます。href内の電話番号は、ハイフンありでも無しでもどちらでもOKです。ただし数字もハイフンも半角で書きましょう。

download属性でダウンロードリンクを作る

<a href="ファイルのURL" download="ダウンロード時のファイル名">ダウンロード</a>

👆クリックでダウンロードが始まるリンクを作るには、このようにします。download属性には「ダウンロードされたときのファイル名に何にするか」を指定します。

<a href="/learning/images/ogp.png" download="example.png">ダウンロードする</a>

クリックで実際に画像をダウンロード

👆画像のダウンロードリンクのサンプルです。クリックすると「example.png」という名前のファイルがダウンロードされます。

✍️ファイルの場所は同じオリジン上に
たとえば現在のページのURLがhttps://abc.com/testだった場合、ファイルのURLはhttps://abc.com/◯◯でなければ思ったように動かないことがあります（ダウンロードされずにファイルのページへ移動します）。

ダウンロードリンクにしたければ、同じサイト上にファイルを配置しましょう。

aタグの中に入れてはいけないタグ

アンカータグの中で、対話型コンテンツに該当するタグを使わないようにしましょう。

✍️対話型コンテンツとは
「ユーザーの操作に反応するような要素」のことです。リンク<a>自体がクリックに反応する対話型コンテンツであるため、他の対話型コンテンツを中に入れてしまうと、役割があやふやになってしまうのです。

たとえば入力欄がaタグの中に入っていると「入力欄にカーソルをあてると別ページに飛んでしまう」のようなことが起きてしまいます。

aタグの中にaタグを入れない

🙅ダメ！

<a href="記事へのリンク">
  りんごのむき方
  <a href="調理カテゴリーへのリンク">調理</a>
</a>

👆<a>の中で<a>を使うのはやめましょう。デザインが崩れたり、イメージした部分にリンクが適用されなかったりします。

aタグの中にbuttonを入れない

🙅ダメ！

<a href="...">
  <button>...</button>
</a>

👆<button>と<a>のどちらの役割をするボタンなのか分からなくなってしまうからです。逆に<button>の中に<a>を入れるのもやめましょう。

aタグの中に入力欄を入れない

🙅ダメ！

<a href="...">
  <label>
    <input type="text">
  </label>
</a>

👆<a>の中で<input>や<textarea>、<label>などのフォーム部品を使うこともできません。

関連するページを読む

inputタグ・コンプリートガイド - HTML

CSSでリンクのデザインを変更

ここからはCSSでリンク<a>のスタイルを変更する方法や注意点を紹介します。

文字色を変更する

<a href="#URL">アンカーテキスト</a>

a {
  color: #529fff;
}

👆アンカーテキストの色はcolor: 色コードで変更できます。

下線を消す

<a href="#URL">アンカーテキスト</a>

a {
  color: #529fff;
  text-decoration: none;
}

👆デフォルトではアンカーテキストに下線がつきます。これはa { text-decoration: underline }というCSSが当たっているためです。この下線はtext-decoration: noneを指定すると消えます。

ホバー時のスタイルを変える

<a href="#URL">アンカーテキスト</a>

a {
  color: #529fff;
}
/* ホバー時のスタイル */
a:hover {
  color: orange; /* 文字色をオレンジに */
}

カーソルをあてると…

👆ホバー時（リンクにマウスカーソルを重ねたとき）のスタイルはa:hover { ~ }という形で変更できます。

特定のリンクのみCSSを適用

ここまでのサンプルのようにa {~}という形で指定をすると、ページ内のすべてのリンクに対してCSSが適用されます。

特定のリンクのスタイルのみ変えたい場合、HTMLで<a href="~" class="example-link">のようにアンカータグに何らかのクラスを指定したうえで…

<p>
  <a href="#URL">特にクラスを持たないリンク</a>
</p>
<p>
  <a href="#URL" class="example-link">example-linkクラスを持つリンク</a>
</p>

.example-link {
  color: #529fff;
}
/* ホバー時 */
.example-link:hover {
  color: orange;
}

👆そのクラスをセレクターにします（.example-link {~}）。これによりexample-linkというクラスを持つリンクのみ文字色が変更されています。

幅（width）や高さ（height）を変える

他の要素と同様に、リンクの幅はwidthプロパティで、高さはheightプロパティで変更できます。ただし、widthやheightだけを指定しても反映されません。

widthとheightが反映されない例

<a href="#URL" class="example-link">アンカーテキスト</a>

.example-link {
  width: 100%; /* 幅を横いっぱいに */
  height: 150px; /* 高さを150pxに */
  background: silver; /* 背景色 */
}

グレーがリンク部分

👆分かりやすくするためにbackgroundでリンクの背景色をグレーにしました。width: 100%やheight: 150pxが反映されていないことが分かると思います。この原因はdisplayプロパティです。

✍️displayプロパティ
<a>要素はデフォルトでdisplay: inlineとなっています。基本的に、display: inlineとなっている要素は、幅や高さ、余白（margin）を変更しようとしても反映されません。
反映させるためにはdisplay: inline-blockやdisplay: blockに変更する必要があります。

displayプロパティを変更すると反映される

<a href="#URL" class="example-link">アンカーテキスト</a>

.example-link {
  display: block; /* 🖐これが必要！ */
  height: 150px; /* 高さを150pxに */
  background: silver; /* 背景色 */
}

グレーがリンク部分

👆たとえば、リンクを横いっぱいに広げたい場合はdisplay: blockを指定しましょう。

😺display: blockにするとwidth: 100%を指定しなくてもリンクが横いっぱいに広がり、前後に改行が入るようになります。displayプロパティはいろいろと奥が深いのですが、ここでは解説を割愛します。

ボタンらしいデザインにする

<a href="#URL" class="example-link">アンカーテキスト</a>

.example-link {
  display: inline-block;
  margin: 1em 0; /* 前後のスペース */
  padding: 0.6em 1em; /* 文字周りの余白 */
  color: #FFF; /* テキストカラー */
  font-size: 0.95em; /* フォントサイズ */
  text-decoration: none; /* 下線を消す */
  background: #1aa1ff; /* 背景色 */
  border-radius: 3px; /* 角の丸み */
  transition: 0.3s; /* ホバーの変化を滑らかに */
}

/* ホバー時の見た目 */
.example-link:hover {
  background: #064fda; /* 背景色 */
}

👆よりボタンらしいデザインにするサンプルCSSです。display: inline-blockがないとpaddingやmarginといった余白の指定が反映されなくなってしまうので注意しましょう。

😺display: blockにした場合、基本的にボタンの前後に改行が入ります。一方でdisplay: inline-blockとすると、ボタンを複数配置したときに横並びになります。

aタグの使い方の基本

書き方

hrefでURLを指定する

target="_blank"で別タブで開く

📝覚えておこう

buttonタグとの使い分け

知っておきたいaタグのrel属性

relを指定する意味

nofollow：リンク先を推薦しない 重要

nofollowの使いどころの例

noopener：元のページを操作できないようにする

悪用の例

noopenerの使いどころ

noreferrer：リファラーとして送信しない

noreferrerの使いどころ

rel属性には複数の値を指定できる

HTMLでリンクをつくるときのコツ

アンカーテキストはSEOで重要！

リンクはスラッシュ（/）から始められる！

example.com上にいるとき この2つは同じ

ルートパスのメリット

画像もリンクにできる！

📝覚えておこう

アンカータグの中ではさまざまな要素を使える

メニューを作るときはnavやリストタグと合わせて使おう

いろいろな種類のリンクを作成する

ページ内リンクを作る（ページの途中へジャンプ）

HTML

他のページの途中へ飛ぶ

別ページのid="about"に飛ぶリンク

mailtoでメールリンクを作る

telで電話番号リンクを作る

download属性でダウンロードリンクを作る

aタグの中に入れてはいけないタグ

aタグの中にaタグを入れない

🙅ダメ！

aタグの中にbuttonを入れない

🙅ダメ！

aタグの中に入力欄を入れない

🙅ダメ！

CSSでリンクのデザインを変更

文字色を変更する

下線を消す

ホバー時のスタイルを変える

特定のリンクのみCSSを適用

幅（width）や高さ（height）を変える

widthとheightが反映されない例

displayプロパティを変更すると反映される

ボタンらしいデザインにする

nofollow：リンク先を推薦しない重要

example.com上にいるときこの2つは同じ