CSS リンク

リンクごとにスタイルが異なる場合があります。

リンクの色の設定
リンクの下線の削除
リンクの背景色
リンクのフォントスタイル
サンプル
1. サンプルコード
2. 表示例
詳しくはこちら

リンクの色の設定

リンクの色を設定するには、colorプロパティを使用します。通常のリンク、訪問済みのリンク、マウスオーバーした時のリンク、アクティブになった際のリンクに対してそれぞれ色を設定できます。

a {
  color: blue;  /*通常のリンク*/
}

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

a:hover {
  color: red;/*マウスオーバーした時*/
}

a:active {
  color: yellow;/*アクティブになった際のリンク*/
}

リンクの下線の削除

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

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

リンクの背景色

リンクの背景色を設定するには、background-colorプロパティを使用します。

a {
  background-color: transparent;
}

a:hover {
  background-color: yellow;
}

リンクのフォントスタイル

リンクのフォントスタイルを設定するには、font-weightやfont-styleなどのプロパティを使用します。これらのプロパティを適用して、リンクのスタイルをカスタマイズできます。

a {
  font-weight: bold;
  font-style: italic;
}

サンプル

サンプルコード

.simple-link:link,.simple-link:visited
{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#98bf21;
	width:150px;
	text-align:center;
	padding:4px;
	text-decoration:none;
}

.simple-link:hover,.simple-link:active
{
	background-color:#7A991A;
}