はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
デザイン通りに組む！　～ボタン2：ロールオーバ～
2008/09/08
ケンジ
ところでさ・・・。
すごい今更発言なんだけど、実は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タグの疑似クラスは書く順番が大事！
トラックバック(0)
このブログ記事を参照しているブログ一覧：デザイン通りに組む！　～ボタン2：ロールオーバ～
このブログ記事に対するトラックバックURL
http://www.rasen-d.net/z/mt/mt-tb.cgi/99
コメントする
名前
e-mail
URL
コメント(スタイル用のHTMLタグを使うことができます)
オススメ本
HTMLタグ+スタイルシート辞典ちび

基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！

現場のプロから学ぶXHTML+CSS

実際のXHTML+CSSの作業について学びたい方にオススメ！

オススメCSSのサイト
TAG index

ものすごく使いやすいHTML & CSSのリファレンスサイト

CSSフリーライブラリー

色々なテーマごとにCSSの情報が集まっています！

オススメ勉強会
CSS Nite

お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。

Re:Creator’s Kansai（リクリ）

関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。

螺旋デザインメンバーも執筆に参加！
アイコン：大藤幹のHYML/XHTML辞典
XHTML+CSS プロが教える“本当の使い方”

現場で培われたXHTML+CSSのテクニックを徹底解説!!

話題のiPhoneアプリ
アイコン：大藤幹のHYML/XHTML辞典icon
大藤幹のHYML/XHTML辞典icon

HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪

アイコン：myPANTONE
myPANTONE

色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！

POWERED BY MOVABLE TYPE® ver4