CSSのセレクタには、リンクにマウスポインタが乗った時の動作などを制御する特殊なクラスがあります。これはCSSのセレクターに付加するキーワードで、疑似クラスと言われています。
例えば、a タグのリンクにマウスが乗った時、リンク文字を赤くする場合は、
a:hover{
color: red;
}
のように記述します。:hoverの部分が疑似クラス名です。
疑似クラスとは、要素が特定の状態になった時の処理を記述したものと言い換えることが出来ます。
疑似クラスに関して詳しくはMDNのサイトが参考になります。
リンク疑似クラス
a タグに付加する疑似クラスをリンク疑似クラスと言います。
マウスポインタが乗ったらリンク先を光らせるなど、リンク疑似クラスは多くのサイトで利用されています。
リンク疑似クラスは5つあります。
| :link | リンク先が未訪問 |
| :visited | リンク先が訪問済み |
| :focus | リンク要素が選択されている状態 |
| :hover | マウスポインタが乗っている状態（ロールオーバー状態） |
| :active | マウスボタンが押されている状態 |
リンク疑似クラス記述の注意点
記述の順番
CSSでは、以下の順に記述してください。
記述順を間違えると疑似クラスがうまく適用されません。
| :link |
| :visited |
| :focus |
| :hover |
| :active |
コロン（：）の前後にスペースを入れない
CSSで疑似クラスを記述する場合、a:link、a:hoverなどのように記述します。
タグ名:疑似クラス名{
プロパティ: プロパティ値;
}
疑似クラス記述でよくありがちなミスは、：の前後にスペースを入れてしまうことです。
タグ名と : と疑似クラス名の間にスペースを挟まないでください。
:（コロン）の前後にスペースを入れてしまうと疑似クラスがきちんと適用されません。
リンク疑似クラスのサンプル
リンク疑似クラスの簡単な利用例を示します。
aタグをボタンっぽく見せています。
実際のHTMLを示します。
ファイル名：dynamic_giji_class.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="description" content="CSSのダイナミック疑似クラスを確認するためのサンプルです">
<title>リンク疑似クラス</title>
<style>
header{
text-align: center;
background-color: skyblue;
}
#contents{
text-align: center;
}
/* リンク疑似クラス */
a{ /* リンク部分の設定 */
border: dashed 1px black;
padding: 1em 10em;
border-radius: 10px;
text-decoration: none;
}
a:link{ /* リンク先に未訪問 */
color: royalblue;
}
a:visited{ /* リンク先が訪問済み*/
color: gray;
}
a:focus{ /* 選択状態 */
border: solid 1px black;
}
a:hover{ /* マウスボタンがのっている */
background-color: lightskyblue;
}
a:active{ /* マウスを押した */
background-color: deepskyblue;
color: black;
}
</style>
</head>
<body>
<header>
<h1>リンク疑似クラス</h1>
</header>
<div id="contents">
<p><a href="#" target="_blank">押してね</a></p>
</div>
</body>
</html>
疑似クラスの利用例（divタグをボタンっぽく見せる）
ここまではリンク疑似クラスの説明が主でしたが、基本的に疑似クラスは、どのタグにも設定できます。
例としてdivタグに疑似クラスを使ってボタンっぽく見せることをしてみます。
ポイントは押した時（:active）にボタンをxy方向に少しずらして押したように見せている部分です。
以下のサイトを参考に作成させて頂きました。
ソースコードは以下の通りです。
ファイル名：div_button.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="description" content="CSSのダイナミック疑似クラスを確認するためのサンプルです">
<title>divタグでボタンっぽく見せる</title>
<style>
header{
text-align: center;
}
#contents{
text-align: center;
}
/* ボタンっぽく見せる */
div{
padding: 1em;
border-radius: 10px;
background-color: gold;
text-align: center;
box-shadow: 5px 5px 7px #ddd; /* 影をつける */
}
div:hover{ /* マウスボタンがのっている */
cursor: pointer; /* マウスポインタの形 */
background-color: orange; /* 元の色より濃くする */
}
div:active{ /* マウスを押した */
box-shadow: none; /* 影を消す */
position: relative; /* 相対的に位置変更 */
top: 5px; /* 影の表示サイズ分位置をずらす(y方向) */
left: 5px; /* 影の表示サイズ分位置をずらす(x方向) */
}
</style>
</head>
<body>
<header>
<h1>divタグでボタンっぽく見せる</h1>
</header>
<div>
<p>押してね</p>
</div>
</body>
</html>
ところで疑似クラスという名称ですが、少々とっつきにくい用語ですよね。
イベントの設定とかもう少し分かりやすい言い回しはなかったのでしょうか？
以上、CSSの疑似クラスについてでした。
コメント