[CSS] リンクのスタイルを変更する

2019年4月23日

リンクのスタイルを変更するサンプルです。

リンクのスタイルは、疑似クラスを使うことで以下の状態毎に指定可能です。

未訪問のリンク　（a:link）
訪問済みのリンク　（a:visited）
ポインターが乗った時のリンク　（a:hover）
ボタン押下中のリンク　（a:active）

サンプルソース

例）リンクのスタイルを変更する

a:link{
  /* 未訪問のリンクのスタイル　→黄色 */
  background-color:#ffff00;
}
a:visited{
  /* 訪問済みのリンクのスタイル　→緑 */
  background-color:#00ff00;
}
a:hover{
  /* ポインターが乗った時のリンクのスタイル　→赤 */
  background-color:#ff0000;
}
a:active{
  /* ボタン押下中のリンクのスタイル　→青 */
  background-color:#0000ff;
}

a:link{

/* 未訪問のリンクのスタイル　→黄色 */

background-color:#ffff00;

}

a:visited{

/* 訪問済みのリンクのスタイル　→緑 */

background-color:#00ff00;

}

a:hover{

/* ポインターが乗った時のリンクのスタイル　→赤 */

background-color:#ff0000;

}

a:active{

/* ボタン押下中のリンクのスタイル　→青 */

background-color:#0000ff;

}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>サンプル</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <a href="test.html">これはリンクです</a>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<a href="test.html">これはリンクです</a>

</body>

</html>

【結果】

これはリンクです

↑動きを確認できます。

メモ

疑似クラスについては「[CSS] 疑似クラス一覧」ページをご覧ください。

CSS

Posted by tora