はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。

デザイン通りに組む！　～ボタン2：ロールオーバ～

ケンジ
ところでさ・・・。
すごい今更発言なんだけど、実はfile16で作ったボタン、ロールオーバさせたいんだよね〜。
トモ・リーン
ロールオーバはaタグの疑似クラスと背景画像の位置指定を利用して表現するのよ。
aタグの疑似クラス

aタグの疑似クラスを使うとリンクの状態に色々スタイルを設定出来ます。

a:link { /* 通常（未アクセス）*/ }
a:visited { /* 訪問済み */ }
a:hover { /* ロールオーバ時 */ }
a:active { /* クリックした瞬間 */ }
ケンジ
ふむふむ！
トモ・リーン
aタグの疑似クラスの書く順番はとっても大事だから、気をつけてね！
aタグの疑似クラスの書く順番

この順番のまま書いてください。activeが不要な場合は書かなくても支障ありません。

a:link { /* 通常（未アクセス）*/ }
a:visited { /* 訪問済み */ }
a:hover { /* ロールオーバ時 */ }
a:active { /* クリックした瞬間 */ }
ケンジ
なんで、この順番じゃないと駄目なの？
トモ・リーン
疑似クラスは「a:link」「a:visited」「a:hover」「a:active」全部同じセレクタぽい扱いみたいで、たとえば
a:link { /* 通常（未アクセス）*/ }
a:hover { /* ロールオーバ時 */ }
a:visited { /* 訪問済み */ }
と書くと最後に書かれた「a:visited」が優先されて、訪問済みのリンクだった場合ロールオーバにならないのよ・・・。
CSSの仕様として同じセレクタを重複して書いた場合、一番最後に書かれたセレクタが優先されるんだけど、疑似クラスもかぶってる扱いされてるのよね〜〜。
ケンジ
そうなんだ・・・。
微妙にアレな仕様だね。
トモ・リーン
「郷に入らずんば郷に従え」ね！
で、肝心のロールオーバボタンだけどロールオーバ用の画像を下の図のように作って！
横並びで作る場合
図：スライス例
縦並びで作る場合
図：スライス例
ケンジ
デザイナーが帰ってるから俺がテキトーに作るぜ。
横端にスキマがあるように見えるけど、うっすら影があるからだぜ！！
図：ケンジ作ロールオーバ用画像
ケンジ
ボタンがoutのときは「a:link」と「a:visited」に、overのときは「a:hover」に書いたらいいんだね！
トモ・リーン
そうそう。「a:active」は書かなくてもいいわよ。
実際に書いてみるわよ。
#siteMenu li a:link, #siteMenu li a:visited {
background-position:left;/*★file18:マウスアウト時画像の背景を左寄せに★*/
}
#siteMenu li a:hover {
background-position:right;/*★file18:マウスオーバ時画像の背景を右寄せに★*/
} ロールオーバしてみたファイル【HTML】 ロールオーバしてみたファイル【CSS】
トモ・リーン
他にもaタグの疑似クラスを使ってこんな表現が出来るわよ。
aタグの疑似クラスを使って色々やってみよう！文字編
普通のロールオーバ

サンプル

HTML
<a href="#" id="sample18a">サンプル</a> CSS
a#sample18a:link, a#sample18a:visited {
color: #0000FF;
}
a#sample18a:hover {
color: #FF0000;
}
ロールオーバ時に下線

サンプル

HTML
<a href="#" id="sample18b">サンプル</a> CSS
a#sample18b:link, a#sample18b:visited {
color: #0000FF;
text-decoration:none;
}
a#sample18b:hover {
color: #FF0000;
text-decoration:underline;
}
おもしろリスト風
HTML
<ul id="sample18c">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul> CSS
ul#sample18c {
margin: 0;
padding: 0;
}
#sample18c li {
border-left: 3px solid #0000FF;
margin: 0 0 3px 0;
padding: 0 0 0 3px;
list-style-type: none;
}
#sample18c a:link, #sample18c a:visited {
color: #0000FF;
}
#sample18c a:hover {
color: #FF0000;
padding-left: 5px;
}
まるでボタン
HTML
<ul id="sample18d">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul> CSS
ul#sample18d {
margin: 0;
padding: 0;
}
#sample18d li {
width:10em;
margin: 0;
padding: 0;
list-style-type: none;
}
#sample18d a {
display:block;
text-align:center;
text-decoration:none;
}
#sample18d a:link, #sample18d a:visited {
color: #888888;
background-color:#EEEEEE;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
border-top: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
padding: 5px 1px 5px 0;
}
#sample18d a:hover {
color: #333333;
background-color:#CCCCCC;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
padding: 6px 0 4px 1px;
}
ケンジ
ちょっとした工夫で色々出来て、楽しいね！
今回のポイント！
aタグの疑似クラスは書く順番が大事！