レシピ

リンクにスタイルを設定する

  • このエントリーをはてなブックマークに追加

a要素のリンクについて、マウスが乗ったとき(ホバー状態)やクリック済みなど各状態のスタイルを設定する方法を解説します。

この記事のポイント

  • リンクの状態に応じてスタイルを切り替える
  • ボタンの形をしたリンクにスタイルを適用する

目次

リンクにスタイルを指定する

Webページには必ずと言っていいほどリンクがあります。
今回は、このリンクにスタイルを適用する方法を解説します。

リンクの例
リンクの例

リンクの状態

a要素で設定するリンクには、次の4つの状態があります。

  • 未クリック(:link – まだクリックされたことのないリンク
  • クリック済み(:link) – すでにクリックされたことのあるリンク
  • ホバー(:hover) – リンクの上にマウスカーソルが乗っている状態
  • アクティブ(:active) – リンクがクリック(タップ)されている状態

これらの全ての状態に対し、それぞれスタイルを指定することができます。

Note

全ての状態にスタイルを指定する場合、上記リストの上から順にスタイルを指定する必要があります。
順番が違うとスタイルはうまく適用されません。

通常のスタイル適用例

今回は次のようなHTMLにスタイルを適用します。

スタイルを設定したHTML
スタイルを設定したHTML

リンクのスタイル記述例

<style>
/* 見出しのリンク */
section header h1 a:link {
	text-decoration: none;
	color: #0a7ac1;
}
section header h1 a:visited {
	color: #0a7ac1;
}
section header h1 a:hover {
	color: #58afe5;
}
section header h1 a:active {
	color: #58afe5;
}

/* テキスト中のリンク */
section .text-excerpt a:link {
	color: #217bb4;
}
section .text-excerpt a:visited {
	color: #217bb4;
}
section .text-excerpt a:hover {
	color: #58afe5;
}
section .text-excerpt a:active {
	color: #58afe5;
}
</style>
<section>
	<header>
		<p><time datetime="2018-07-08 12:00:00">2018.07.08</time></p>
		<h1><a href="#">タイトルテキスト</a></h1>
	</header>
	<p class="text-excerpt">a要素のリンクについて、マウスが乗ったとき(ホバー状態)やクリック済みなど各状態のスタイルを設定する方法を解説します。<a href="#">もっと見る »</a></p>
</section>

見出し(h1要素)とテキストのリンクに対し、:link(未クリック)、:visited(クリック済)、:hover(マウスオン、ホバー)、:active(クリック時)の順にそれぞれスタイルを適用しています。

見出しのリンクにはリンクテキストの下線を非表示にするために、text-decorationプロパティを無効にしています。

上記のリンクへのスタイル指定は、次のようにまとめることも可能です。

リンクのスタイル記述例 その2

<style>
/* 見出しのリンク */
section header h1 a {
	text-decoration: none;
	color: #0a7ac1;
}
section header h1 a:hover {
	color: #58afe5;
}

/* テキスト中のリンク */
section .text-excerpt a {
	color: #217bb4;
}
section .text-excerpt a:hover {
	color: #58afe5;
}
</style>
<section>
	<header>
		<p><time datetime="2018-07-08 12:00:00">2018.07.08</time></p>
		<h1><a href="#">タイトルテキスト</a></h1>
	</header>
	<p class="text-excerpt">a要素のリンクについて、マウスが乗ったとき(ホバー状態)やクリック済みなど各状態のスタイルを設定する方法を解説します。<a href="#">もっと見る »</a></p>
</section>

aa:linka:visitedの状態に対応し、a:hovera:hovera:activeの2つの状態に対応します。

ボタン状態のリンクにスタイルを設定する

続いて、テキストに含まれるリンクではなく、ボタンの形になったリンクのスタイル適用例を解説します。

ボタンの形をしたリンク(通常)
ボタンの形をしたリンク(通常)
ボタンの形をしたリンク(マウスオン時)
ボタンの形をしたリンク(マウスオン時)

ボタンリンクのスタイル記述例

<style>
/* ボタンリンクのスタイル */
section .btn {
	margin: 0 0 25px;
}
section .btn a {
	display: inline-block;
	padding: 5px 20px;
	color: #fff;
	font-size: 86%;
	border-radius: 15px;
	border: none;
	background: #333;
}
section .btn a:hover {
	background: #555;
}
</style>
<section>
	<header>
		<p><time datetime="2018-07-08 12:00:00">2018.07.08</time></p>
		<h1><a href="#">タイトルテキスト</a></h1>
	</header>
	<p class="text-excerpt">a要素のリンクについて、マウスが乗ったとき(ホバー状態)やクリック済みなど各状態のスタイルを設定する方法を解説します。</p>
	<p class="btn"><a href="#">もっと見る</a></p>
</section>

displayプロパティでインラインのブロック要素に設定し、ボタン状態にしています。
今回の場合はテキストの色ではなく、背景色を通常時とマウスオン(ホバー)時で切り替えることで押せるボタンを表現しました。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。

  • このエントリーをはてなブックマークに追加
前のページへ 一覧ページへ一覧 次のページへ