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

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;}