ホーム > HTML/CSS > リンクデザイン

CSS -リンクデザイン-

疑似クラス

a要素に疑似クラスを設定することで、リンクの色を替えたり、背景色を加えたりすることができます。

指定順序 疑似クラス 説明
1 link 訪問していないリンク先
2 visited 一度でも訪問したことのあるリンク先
3 hover マウスカーソルがa要素の領域内にある場合
4 active アクディブなリンク先

指定には、セレクタ名のあとに:(コロン)つけます。

使用例
a {
  text-decoration:none;
}

a:link{
  color:#333333;
}

a:visited{
  color:#cdcdcd;
}

a:active{
  text-decoration:underline;
}

疑似クラスの指定順序を誤ると正しく適応されません。

リンクの下線を消す

リンクを指定するとデフォルトつく下線をtext-decorationプロパティを使用すると消すことができます。

使用例

a {text-decoration : none;}

Copyright © 2018   MitoRoid  All Rights Reserved.