HTML リンクの色

デフォルトでは、HTMLリンクはブラウザによって特定の色で表示されますが、CSSを使用することで、ユーザーの操作（ステート）に合わせて自由に変更することが可能です。

1. HTML リンクの色設定

HTMLのリンクは、その状態（訪問済みか、現在クリックされているかなど）に応じて色が変化します。

1.1 リンクのデフォルトカラー

すべてのブラウザにおいて、CSSでスタイルが指定されていない場合のデフォルトカラーは以下の通りです：

• 未訪問のリンク (Unvisited link)：下線付きの青色
• 訪問済みのリンク (Visited link)：下線付きの紫色
• アクティブなリンク (Active link)：下線付きの赤色（クリックした瞬間）

もちろん、これらはCSSを使用して特定のスタイルに変更することができます。

2. CSS を使用したリンクのスタイリング

CSSを使用すると、リンクの未訪問、訪問済み、マウスオーバー、アクティブの各状態に対して異なるカラーを指定できます。

以下の例では、各状態に対して個別のプロパティを設定しています。

<style>
/* 未訪問のリンク */
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

/* 訪問済みのリンク */
a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

/* マウスオーバー（ホバー）時 */
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

/* クリックした瞬間（アクティブ） */
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

擬似クラスの記述順序にはルールがあります：

• a:hover は、必ず a:link と a:visited の後に記述しなければなりません。
• a:active は、必ず a:hover の後に記述しなければなりません。 覚え方として「LoVe/HAte」（Link, Visited, Hover, Active）という順序を意識するのが業界のスタンダードです。

3. リンクボタン (Link Buttons)

リンクに背景色やパディングを設定することで、見た目をボタン（Button）のようにデザインすることも可能です。

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>

<a href="default.asp" target="_blank">これはボタン形式のリンクです</a>

このように、text-decoration: none で下線を消し、display: inline-block を適用することで、リンクを直感的なUIコンポーネントへと昇華させることができます。

4. まとめ