CSSリンク完全ガイド：状態、スタイル、よくある質問

この記事では、CSSを使用してリンクのスタイルを設定する方法について説明します。

1. リンクスタイル (Link Styles)

リンクのスタイルは、色、フォント、背景など、あらゆるCSSプロパティを使用して設定できます。 特殊なリンクは、その状態に応じて異なるスタイルで表示できます。

2. 5つのリンク状態 (The Five Link States)

リンクには、以下の5つの状態があります。

3. 例 (Examples)

以下は、異なる色を使用してリンクの状態を区別するコード例です。

a:link {
  color: #000000;
}
a:visited {
  color: #00ff00;
}
a:hover {
  color: #ff00ff;
}
a:active {
  color: #0000ff;
}

4. リンク状態の順序規則 (Order of Styles)

複数の擬似クラスを指定する場合、適用される順序が重要になります。

• :hover は :link と :visited の後に配置する必要があります。

• :active は :hover の後に配置する必要があります。

これを覚えておくために、「LoVe Fears HAte」という語呂合わせが使えます。

5. デフォルトスタイル (Default Styles)

ブラウザは、デフォルトでリンクに特定のスタイルを適用します。

• リンクには下線が引かれます。

• 未訪問のリンクは青色で表示されます。

• 訪問済みのリンクは紫色で表示されます。

• リンクにホバーすると、マウスポインターが手のひらアイコンに変わります。

• リンクにフォーカスが当たると、輪郭が表示されます。

• アクティブなリンクは赤色で表示されます。

これらのデフォルトスタイルは、ユーザーがリンクを認識しやすくするために重要です。 ただし、必要に応じて、CSSを使用してデフォルトスタイルを変更できます。

デフォルトスタイルを変更するCSSプロパティ

• color: テキストの色を変更します。

• cursor: マウスカーソルのスタイルを変更します。

• outline: テキストの輪郭を変更します。

6. 一般的なリンクスタイル (Common Link Styles)

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

text-decoration プロパティは、主にリンクの下線を削除するために使用されます。

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

6.2. 背景色 (Background Color)

background-color プロパティは、リンクの背景色を指定します。

a:link {
  background-color: #b2ff99;
}
a:visited {
  background-color: #ffff85;
}
a:hover {
  background-color: #ff704d;
}
a:active {
  background-color: #ff704d;
}

7. いくつかのリンクにスタイルを適用する (Styling Some Links)

CSS擬似クラスを使用して、異なるリンク状態にスタイルを適用する方法を見てきました。 CSS規則の順序が重要であることを強調し、「LoVe Fears HAte」を使用して記憶することをお勧めします。

以下は、カスタムリンクスタイルを示す完全なCSSコード例です。

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline-color: transparent;
}

a:link {
  color: #6900ff;
}

a:visited {
  color: #a5c300;
}

a:focus {
  text-decoration: none;
  background: #bae498;
}

a:hover {
  text-decoration: none;
  background: #cdfeaa;
}

a:active {
  background: #6900ff;
  color: #cdfeaa;
}

8. その他の例 (More Examples)

8.1. ハイパーリンクに異なるスタイルを追加する (Adding Different Styles to Hyperlinks)

リンクにボーダー、パディング、マージンなどを追加して、より個性的なスタイルを作成できます。

例：丸みを帯びた角を持つボタン風リンク

<a href="#" class="button">ボタン風リンク</a>
<style>
.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.button:hover {
  background-color: #3e8e41;
}
</style>

解説:

• display: inline-block; で、ブロックレベル要素のように幅や高さを指定できるようにしつつ、インライン要素のようにテキストの横に配置します。

• padding で、内部余白を指定します。

• border-radius で、角を丸くします。

8.2. 上級 - リンクボックスの作成 (Advanced - Create a Link Box)

複数のCSSプロパティを組み合わせて、リンク全体をボックスとして表示し、より目立たせることができます。

例：ホバーエフェクト付きリンクボックス

<a href="#" class="link-box">
  <span class="link-text">リンクボックス</span>
</a>
<style>
.link-box {
  display: block;
  width: 200px;
  height: 100px;
  background-color: #f2f2f2;
  text-align: center;
  line-height: 100px; /* リンクテキストを中央に配置 */
  transition: all 0.3s ease; /* ホバーエフェクトを滑らかに */
}

.link-box:hover {
  background-color: #ddd;
  transform: translateY(-5px); /* ホバー時に少し上に移動 */
}

.link-text {
  display: inline-block;
  color: #333;
  text-decoration: none;
}
</style>

CSSリンクに関するよくある質問

1. リンクのデフォルトスタイルを変更するにはどうすればよいですか？

color、cursor、outline などのCSSプロパティを使用して、リンクのデフォルトスタイルを変更できます。

2. リンクにアイコンを追加するにはどうすればよいですか？

background-image プロパティと background-position プロパティを使用して、リンクにアイコンを追加できます。

3. リンクをボタンのように見せるにはどうすればよいですか？

display プロパティを inline-block に設定し、padding、margin、border、background-color などのプロパティを使用して、リンクをボタンのように見せることができます。