リンクの状態に応じたスタイルシートの適用
ホームページでリンクを設定する場合には a 要素を使用します。 a 要素には他の要素と同じようにスタイルを設定することができますが、 a 要素はリンクの上にマウスがある状態やリンクをクリックした状態など 4 つ状態があり、それぞれの状態に対して異なるスタイルを設定することができます。ここではリンクの状態に応じて異なるスタイルシートを適用する方法について解説します。
(2022 年 02 月 20 日公開 / 2022 年 02 月 20 日更新)
Aタグの状態に応じたスタイルの設定
テキストや画像にリンクを設定するときに使用する a 要素に対してもスタイルを設定することができます。
a{
font-size:2em;
color:#ff0000;
}
a 要素はもう少し細かく下記のような 4 つの状態があります。
通常の状態 ( a:link ) 一度クリックされた状態 ( a:visited ) マウスがリンク上にある状態 ( a:hover ) クリックされている状態 ( a:active )
括弧の中に記述されているのが、それぞれの状態に対応したセレクタとなります。各セレクタには異なるスタイルを設定することが可能です。例えば一度もクリックされていないリンクと、一度でもクリックされたリンクは別の文字色を設定することができます。またリンクの上にマウスが乗っているときだけ異なる文字色にすることもできます。
a:link{
color:#000000;
}
a:visited{
color:#ff0000;
}
a:hover{
color:#00ff00;
}
a:active{
color:#0000ff;
}
それでは簡単なサンプルを作成して試してみます。下記のサンプルではリンクのそれぞれの状態について異なるスタイルを設定しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルページ</title>
<style type="text/css">
a{
font-size:2em;
}
a:link{
color:#000000;
background-color:#ffffff;
}
a:visited{
color:#ff0000;
background-color:#ffffff;
}
a:hover{
color:#ffffff;
background-color:#000000;
}
a:active{
color:#ffffff;
background-color:#dc143c;
}
</style>
</head>
<body>
<a href="http://www.yahoo.co.jp/">Yahoo!Japan</a>
</body>
</html>
ブラウザでこのページを表示してみます。まず通常の状態が下記のようになっています。
マウスをリンクの上に持っていくと a:hover に対して設定したスタイルが有効となります。
リンクをクリックして離す前のときは a:active に対して設定したスタイルが有効となります。
リンクが一度クリックされると a:visited に対して設定したスタイルが有効となります。
このようにリンクの状態に応じてスタイルを設定することが可能です。
なお今回のサンプルではすべての状態でリンクテキストのサイズが 2em となっていますが、これは a 要素に対してスタイルが設定されているためです。注意点としては a 要素に設定したスタイルよりも a:hover タグなどに設定したスタイルの方が優先されるという点です。より細かい部分に対して設定したスタイルが CSS では優先されるようになっています。
-- --
リンクの状態に応じて異なるスタイルシートを適用する方法について解説しました。
( Written by Tatsuo Ikura )
著者 / TATSUO IKURA
初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。