リンク(aタグ)の書き方とデザイン変更方法まとめ【HTML・CSS】

aタグの書き方とデザイン指定の方法

今回はaタグでリンクを作り、さらにデザインを変える方法をマスターしましょう。HTML&CSS初心者の方でも分かるようにていねいに解説していきます。

1. リンクの書き方の基本

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

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

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

リンクタグの書き方

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

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

HTMLコード
<a href="https://saruwakakun.com/">サルワカへジャンプ!</a>

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

HTMLコード
<p>今すぐに<a href="https://saruwakakun.com/">サルワカへジャンプ!</a>しよう</p>
ブラウザ表示

今すぐに サルワカへジャンプ! しよう


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

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

<a href="リンク先のURL" target="_blank"> リンクテキスト </a>

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

HTMLコード
<a href="https://saruwakakun.com/" target="_blank">サルワカへジャンプ!</a>

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

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

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

<a href="リンク先のURL"> <img src="〜"></a>

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

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>
ブラウザ表示

顔を踏んでね

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

2. リンクのデザインを変える方法

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

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

a {text-decoration: none}

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

HTMLコード
<a href="https://saruwakakun.com/">
サルワカへジャンプ!
</a>
CSSコード
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の書き方についてより詳しく知りたい方はこちらの記事を読んでみてください。

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

a {color: 色コード or 色名}

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

HTMLコード
<a href="https://saruwakakun.com/">
サルワカへジャンプ!
</a>
CSSコード
a {color: skyblue;
	text-decoration: none;
	}

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

a:hover {〜}

hover時だけデザインを変える

セレクタをa:hoverと書くことで、マウスカーソルをリンクの上にのせたときのデザインを指定することができます。

サルワカくんの顔(通常)
サルワカくん

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

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

HTMLコード
<a href="https://saruwakakun.com/">
サルワカへジャンプ!
</a>
CSSコード
a:hover {
	color: skyblue;
	font-size: 2em;/*文字サイズ2倍*/
	font-weight: bold	
	}
ブラウザ表示

A hoverの例2


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

idやclassでhover指定

もしaタグをid名やclass名でCSS指定する場合は、.example:hover{〜}#example:hover{〜}というように書けばOKです。

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

a:hover img {〜}

画像のhover時に変化をつけるイメージ

画像リンクの場合にも、a:hoverによりカーソルを重ねたときの変化をつけることができます。変化をつけたければa:hover img{}というようにa:hoverの後ろに半角スペースで区切ってimgと書きましょう。

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

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

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 {
	border: solid 2px silver
	/*2pxのシルバーの実線で囲む*/
	}
ブラウザ表示

hover時に画像に線をつける

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

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

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 {
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
	/*画像を70%の不透明度に
	もし50%にしたいときは
	上から50、0.5、0.5にします*/
	}
ブラウザ表示

画像のhover時に変化をつけるイメージ


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

a:visited {〜}

a visitedの設定

一度訪れたリンクのデザインを指定するときにはa:visitedを使います。

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

HTMLコード
<a href="https://saruwakakun.com/life" >
サルワカへジャンプ!
</a>
CSSコード
a:visited {
	color:silver
	}
ブラウザ表示

訪問後のリンクテキスト色を変える例

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

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

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

Click here!

HTMLコード
<a class="link_button" href="URL">
Click here!
</a>
CSSコード
/*以下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;/*文字をグレイに*/
	}

ブラウザ表示

Click here!


最後に

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

まとめ
  • リンクの作り方:<a href="URL">文字や画像</a>
  • target=”_blank”で別タブで開くリンクに
  • a {text-decoration: none}で下線を消す
  • a {color: 〜}でリンク色を変える
  • a:hover {〜}でカーソルを当てたときのリンクデザインを指定
  • a:visited {〜}で訪問済みページへのリンクデザインを指定
サルワカ