CSS リンク

CSSを使って、リンクのスタイルをさまざまな方法で設定できます。

テキストリンク テキストリンク リンクボタン リンクボタン

リンクのスタイルを設定

リンクはどの CSS 属性（例えば color、font-family、background などでスタイルを設定します。

例

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 {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
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;
}

自分で試してみる

さらに多くの例

リンクに異なるスタイルを追加する
この例では、リンクに他のスタイルを追加する方法を示しています。
高度 - 架線のリンクボタンを作成する
リンクボックス/ボタンの作成方法の別の例です。
カーソルを変更する方法
cursor 属性は表示するカーソルの種類を指定します。この例では、異なる種類のカーソル（リンクには便利です）を示しています。