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

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

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

リンクの状態

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

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

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

通常のスタイル適用例

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

リンクのスタイル記述例

/* 見出しのリンク */
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;
}

HTML コード例

<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

/* 見出しのリンク */
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;
}

HTML コード例

<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>

aはa:linkとa:visitedの状態に対応し、a:hoverはa:hoverとa:activeの2つの状態に対応します。

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

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

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

/* ボタンリンクのスタイル */
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;
}

HTML コード例

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