CSS リンク

CSSを使って、リンクはさまざまな方法でスタイリングできます。

テキストリンク

テキストリンク

リンクのスタイリング

リンクは任意のCSSプロパティ（色、フォントファミリー、背景など）でスタイルを設定できます。

例

a {
  color: hotpink;
}

また、リンクの状態に応じて異なるスタイルを設定することもできます。

リンクの状態は以下の4つです：

• a:link – 通常の未訪問リンク
• a:visited – ユーザーが訪れたリンク
• a:hover – ユーザーがマウスオーバーしたときのリンク
• a:active – クリックした瞬間のリンク

例

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

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

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

/* 選択したリンク */
a:active {
  color: blue;
}

複数のリンク状態のスタイルを設定する際には、いくつかの順序ルールがあります：

• a:hoverはa:linkとa:visitedの後に記述する必要があります。
• a:activeはa:hoverの後に記述する必要があります。

テキスト装飾

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

a:link,
a:visited {
  text-decoration: none;
}

a:hover,
a:active {
  text-decoration: underline;
}

背景色

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

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

リンクボタン

この例では、複数のCSSプロパティを組み合わせてリンクをボックス/ボタンとして表示する方法を示しています：

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

その他の例

この例では、ハイパーリンクに他のスタイルを追加する方法を示しています：

a.one:link { color: #ff0000; }
a.one:visited { color: #0000ff; }
a.one:hover { color: #ffcc00; }

a.two:link { color: #ff0000; }
a.two:visited { color: #0000ff; }
a.two:hover { font-size: 150%; }

a.three:link { color: #ff0000; }
a.three:visited { color: #0000ff; }
a.three:hover { background: #66ff66; }

a.four:link { color: #ff0000; }
a.four:visited { color: #0000ff; }
a.four:hover { font-family: monospace; }

a.five:link { color: #ff0000; text-decoration: none; }
a.five:visited { color: #0000ff; text-decoration: none; }
a.five:hover { text-decoration: underline; }

別の例

リンクボックス/ボタンを作成する別の例：

a.box:link, a.box:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

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

カーソルの種類

リンクに役立つさまざまなカーソルの種類を示す例：

実際にカーソルをあてて違いを確認してみてください。