リンクの色を変える

今回はリンクの色の変え方です。 スタイルシートの代表的な機能だけど、使い方はちょっと複雑かも。

スタイルシートは次のような感じになります。

a{/*リンクされた文字*/
    color:0000ff;
    font-style:normal;
    text-decoration:underline;
}
a:link {/*未訪問のリンク*/
    color:0000ff;
    font-style:normal;
    text-decoration:underline;
}
a:visited {/*訪問後のリンク*/
    color:#934C7B;
    text-decoration:underline;
}
a:hover {/*マウスをのせたとき*/
    color:#ff0000;
    font-style:normal;
    text-decoration:underline;
}
a:active {/*クリック中*/
    text-decoration:none;
}

aでリンクされた部分のスタイルを指定し、a:linkやa:hoverでそれぞれの役割でのスタイルを指定します。
aと同じスタイルでよければ、必要の無いa:linkやa:hoverは書く必要はありません。
逆にa:link、a:visited、a:hover、(a:active)をそれぞれ指定するならaは必要ありません。
順番も大切で、a.a:link,a:visited,a:hover,a:actibeの順で書かないとうまく反応しません。
例えば a:visitedをa:hoverの後ろに書くと訪問済みのリンクはマウスを載せても反応しなくなります。

---

使いこなすための＋α

クラスを設定したいときは次のようにやります。

a.クラス名 {/*リンクされた文字*/
    color:0000ff;
    font-style:normal;
    text-decoration:underline;
}
a:link.クラス名 {/*未訪問のリンク*/
    color:0000ff;
    font-style:normal;
    text-decoration:underline;
}
a:visited.クラス名 {/*訪問後のリンク*/
    color:#934C7B;
    text-decoration:underline;
}
a:hover.クラス名 {/*マウスをのせたとき*/
    color:#ff0000;
    font-style:normal;
    text-decoration:underline;
}
a:active.クラス名 {/*クリック中*/
    text-decoration:none;
}

この技はいろいろと応用が利いて、枠線や背景を使うといろいろなことができます。
応用技のロールオーバーリンクにサンプルをたくさんのせたので、ぜひ見てください。

---