HTMLのリンク＜aタグ＞の書き方を初心者向けに解説

1. HTMLでのリンクタグ（aタグ）の書き方

はじめにHTMLでのリンクの書き方をまとめておきます。

1-1. aタグの基本のき

リンクはaタグを使って書きます。aタグの基本形は以下のようになります。

リンクボタンにしたい部分を<a href="">~</a>ではさみます。リンク先のURLは開始タグの中にhref="リンク先のURL"という形で書きます。

例えばサルワカのトップページへのリンクを書いてみます。

<a href="https://saruwakakun.com/">サルワカへジャンプ！</a>

リンクボタンが作られました。aタグにはさまれた部分がリンクテキストになるわけですね。このリンクは文章中でさらっと使われることがよくあります。文章中にリンクを入れる場合は、以下のようにpタグの中にaタグを書けばOKです。

<p>今すぐに<a href="https://saruwakakun.com/">サルワカへジャンプ！</a>しよう</p>

1-2. 別タブで開くリンクを作ってみよう

さきほどのリンクボタンをクリックすると、別のタブで開かれることなく見ていたページからそのままリンク先に飛びます。クリックしたときに別タブで開くようにしたいときは、aタグの中にtarget="_blank"という文字を追加します。

href=""とtarget="_blank"の間には半角スペースを空けるようにしましょう。例としてサルワカのトップページを別タブで開くリンクを書いてみます。

<a href="https://saruwakakun.com/" target="_blank">サルワカへジャンプ！</a>

無事別タブで開くようになりました。現在のページを開いたままにできるので便利なのですが、使いすぎには注意しましょう。いちいち別タブで開くようにしていると訪問者にとってはうっとおしく感じられてしまうかもしれないからです（とくにスマホで見ていると…）。使用するときには「本当に別タブで開かれるべきページなのか」をよく検討することが大切ですね。

1-3. 画像のリンクボタンを作ってみよう

次に画像のリンクボタンを作ってみましょう。といってもやることは簡単で、aタグで画像をはさむだけです。画像はimgタグで貼ることができましたね。

初心者向けHTML入門：書き方の基本とタグの使い方

試しに「サルワカくんの顔の画像をクリックするとサルワカのトップページに飛ぶ」ボタンを作ってみます。

<p>顔を踏んでね↓</p>
<p>
  <a href="https://saruwakakun.com/">
    <img src="/face.jpg" />
  </a>
</p>

「サルワカくんの顔を踏むとトップページに飛ぶ」というリンクが出来上がりました。

2. CSSでリンク（aタグ）のデザインを変える

次にリンクボタンのデザインを変える方法を紹介します。

2-1. リンクの下線を消す

CSSでとくに何も指定していない場合、以下のようにリンクテキストには下線が引かれます。 サルワカへジャンプ！ この下線を消したいときは、aタグに対してtext-decoration: noneを指定します。↓実際に使ってみましょう。

<a href="https://saruwakakun.com/">
サルワカへジャンプ！
</a>

a {
  text-decoration:none;
}

下線が消えました。逆に下線をつけたいときはa {text-decoration: underline}を指定します。

【参考】特定のリンクのデザインのみ変えるには？

aタグに対してCSSを書くと、ページ内の全てのaタグに反映されます。もし一部のaタグにのみデザイン変更を反映したい場合は、以下のようにします。

1. aタグにidやclassをつけるaタグにclass(id)名をつけ、CSSでそのclass(id)名に対してデザインを指定します。

HTMLコード

<a href="~">変えない</a>
<a class="noline" href="~">変える</a>

CSSコード

.noline {
  text-decoration:none;
}
/*classに対してはドット（.）をつけて指定*/

ブラウザ表示

変えない

変える

classを指定したaタグのみデザインが変わりました。

2. 子孫セレクタ（絞込指定をする）CSSでは「pタグの中にあるaタグ」や「class名”◯◯”の中にあるaタグ」のような指定もできます。このような絞り込み指定をしたいときは、タグ名やクラス名を半角スペースで区切って並べます。

HTMLコード

<a href="~">変えない</a>
<p><a class="noline" href="~">変える</a></p>

CSSコード

p a {
  text-decoration:none;
}
/*「pタグの中のaタグ」にのみデザインを適用*/

ブラウザ表示

変えない

変える

CSSの書き方についてより詳しく知りたい方はこちらの記事を読んでみてください。

初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！

2-2. リンクの色を変える

リンクテキストの色を変えたいときは、aタグに対してcolorプロパティを指定します。赤くしたいときはcolor: red、灰色にしたいときはcolor: grayというように書きます。color: #F89172のようにカラーコードで指定することもできます。例としてリンク色を水色（skyblue）にしてみます。

<a href="https://saruwakakun.com/">
サルワカへジャンプ！
</a>

a {
  color: skyblue;
  text-decoration: none;
}

3.カーソルをのせたときのデザインを変える（a:hover）

この「:hover」というのは擬似クラスと呼ばれるものの1つです。擬似クラスはaタグ以外にも使うことができます。つまりdivタグでもpタグでもカーソルを重ねたときだけデザインを変えることができるのです。疑似クラスについては、別の記事で詳しく解説する予定です。

a:hoverでは通常のリンクタグと同じようにさまざまなデザインの指定ができます。せっかくなので例としてカーソルを当てたときに「文字サイズを大きくし、色を変え、さらに太字にする」という派手な変化をつけてみます。

<a href="https://saruwakakun.com/">
サルワカへジャンプ！
</a>

a:hover {
  color: skyblue;
  font-size: 2em;/*文字サイズ2倍*/
  font-weight: bold;
}

このように少し目立つような変化をつけることもできるわけですね。ちなみにHTML&CSSでは「カーソルを当てたとき」のことをホバー時と呼んだりします。本や解説サイトを読んでいるとよく登場するので覚えておくと良いでしょう。

画像リンクのhover時の見た目を変える

カーソルを当てると画像が線で囲まれる装飾

ひとつめの例としてカーソルを当てたときに画像を線で囲むようにしてみます。

HTMLコード

<p>顔を踏んでね↓</p>
<p>
  <a href="https://saruwakakun.com/">
    <img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔">
  </a>
</p>

CSSコード

a:hover img {
  /*2pxのシルバーの実線で囲む*/
  border: solid 2px silver;
}

ブラウザ表示

カーソルを当てると画像を半透明に

２つめの例としてカーソルを当てたときに画像を半透明にしてみましょう。要素を半透明にするCSSの書き方は少し複雑なのでここでは説明を省きます。実際に使いたい場合は、以下のコードをそのままコピペすればOKでしょう。

<p>顔を踏んでね↓</p>
<p>
  <a href="https://saruwakakun.com/">
    <img src="https://saruwakakun.com/wp-content/uploads/2016/11/IMG_9164.jpeg" alt="サルワカくんの顔">
  </a>
</p>

a:hover img {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  /*画像を70%の不透明度に
  もし50%にしたいときは
  上から50、0.5、0.5にします*/
}

4. 訪問済みのリンクのデザインを変える（a:visited）

さきほどのa:hoverとデザイン指定の方法は変わりません。例として一度訪れたリンクテキストの色をシルバーにしてみましょう。

HTMLコード

<a href="https://saruwakakun.com/life" >
サルワカへジャンプ！
</a>

CSSコード

a:visited {
  color:silver;
}

ブラウザ表示

このように訪問済みのリンクボタンを自分の好きなデザインに変えることができます。

5. CSSでオシャレなリンクボタンを作ってみよう

さて、最後にこの記事の復習を兼ねて、少しおしゃれなリンクボタンのデザイン例をひとつ紹介します。気に入ったらコピペして使ってみてください。

Click here!

<a class="link_button" href="URL">
Click here!
</a>

/*以下class名link_buttonのデザイン*/
.link_button {
  font-weight: bold;/*太字に*/
  text-decoration: none;/*下線消す*/
  background: skyblue;/*背景を水色に*/
  color:white;/*文字を白に*/
  padding:5px 10px;/*内側の余白*/
  border-radius: 20px;/*角を丸くする*/
  font-family: 'Avenir','Arial';/*フォントをいい感じに*/
}
/*以下カーソルを当てたとき*/
.link_button:hover {
  background: silver;/*背景色をシルバーに*/
  text-decoration: none;/*下線を消す*/
}

/*以下訪問済みのデザイン*/
.link_button:visited {
  color: gray;/*文字をグレイに*/
}

最後に

最後にこの記事のポイントをまとめておきます。