CSSリンク

CSSアイコン CSS一覧

CSS を使用すると、リンクをさまざまな方法でスタイル設定できます。

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

リンク スタイルを設定する

リンクは、color、font-family、background などの 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 {
  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;
}

自分で試してみてください

CSSアイコン CSS一覧