CSS リンク

Volardev 編集部 April 12, 2026

CSSを使用すると、リンク（<a> 要素）をさまざまな方法でスタイリングできます。

1. リンクのスタイリング (Styling Links)

リンクは、カラー（color）、フォントファミリ（font-family）、背景色（background-color）など、あらゆるCSSプロパティを使用してスタイリングすることが可能です。

/* リンクの基本スタイル */
a {
  color: #1a73e8;
  text-decoration: none;
}

さらに、リンクは状態（ステート）に応じて異なるスタイルを適用できます。

1.1 リンクの4つの状態 (Four States of Links)

リンクには以下の4つの状態があり、それぞれ疑似クラス（Pseudo-classes）を使用して個別にスタイリングできます。

a:link: 未訪問の通常のリンク
a:visited: ユーザーがすでに訪問したことのあるリンク
a:hover: ユーザーがマウスカーソルをリンクの上に置いた状態
a:active: リンクをクリックした瞬間の状態

/* 未訪問のリンク */
a:link {
  color: red;
}

/* 訪問済みのリンク */
a:visited {
  color: green;
}

/* マウスオーバー時 */
a:hover {
  color: hotpink;
}

/* クリックした瞬間 */
a:active {
  color: blue;
}

1.2 記述順序のルール (Order Rules)

疑似クラスを複数設定する場合、CSSの優先順位（カスケード）の関係上、以下の順序で記述する必要があります。

a:hover は必ず a:link と a:visited の後に記述しなければなりません。
a:active は必ず a:hover の後に記述しなければなりません。

これを覚えるために、日本では「LVHA」（Love-Hate：Link, Visited, Hover, Active）という順序で覚えるのが一般的です。

2. テキスト装飾 (Text Decoration)

text-decoration プロパティは、主にリンクの下線（アンダーライン）を削除または追加するために使用されます。

/* ホバーした時だけ下線を表示する設定 */
a:link {
  text-decoration: none; /* 下線を消す */
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline; /* ホバー時に下線を表示 */
}

a:active {
  text-decoration: underline;
}

3. 背景色の設定 (Background Color)

background-color プロパティを使用して、リンクの背景色を指定できます。

/* 背景色を切り替える例 */
a:link {
  background-color: #f1f1f1;
}

a:visited {
  background-color: #e1e1e1;
}

a:hover {
  background-color: #fffe00;
}

a:active {
  background-color: #ff0000;
}

4. リンクボタンのデザイン (Link Buttons)

複数のCSSプロパティを組み合わせることで、リンクをボタンのような見た目にカスタマイズできます。これはナビゲーションメニューやCTA（Call to Action）ボタンなどで多用されるテクニックです。

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block; /* パディングを有効にするためにインラインブロック化 */
  border-radius: 4px; /* 角丸の設定 */
}

a:hover, a:active {
  background-color: red;
}

5. 高度なリンクスタイル (Advanced Link Styles)

より複雑な視覚効果を狙う場合、ボーダー（border）や影（box-shadow）を組み合わせることが有効です。

5.1 リンクボックスの作成

以下は、枠線を持ったモダンなリンクカードスタイルの例です。

a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition: 0.3s; /* アニメーションを滑らかにする */
}

a:hover, a:active {
  background-color: green;
  color: white;
}

このようにCSSプロパティを適切に組み合わせることで、静的なテキストリンクを直感的で魅力的なユーザーインターフェースへと進化させることができます。