cssの:hoverの色々な使い方

このエントリーをはてなブックマークに追加


cssの:hoverの使い方の例
cssで:hoverって言う類似クラスと呼ばれる物があるんですが、こいつの色々な使い方を簡単に紹介しようと思います。
とは言っても、かなり基本的な事だけになります。cssを知らない人向け、くらいな感じだと思いますので、お手柔らかによろしくお願いしますw

その前に


その前に1つ、こんな記事を紹介。
HTML5時代のhoverの使い方 | 神戸のホームページ制作 ワサビ株式会社

簡単に言えば、タッチスクリーンは:hoverに対応していないのだから、:hoverの時代は終わった、みたいな話です。だいぶ誇張していますがw
一応、そういう事は頭に入れておいた方が良いのかな、とは思います。
ですが、そうは言ってもパソコンはしばらくマウスポインタ使っていくんでしょうし、そんなに慌てる必要はないかな、と自分は思います。

基本的な説明


かなり基本的な事ですが、この:hoverと言うのは、「マウスポインタが乗ったら」、と言う様な意味です。
例えば、

a:hover

と書くと、aタグにマウスポインタが乗った時のcss(スタイルシート)の設定が出来る、と言う訳です。以下の具体例を見れば何言ってんのか分かるはずです。

使用例の説明に入る前に


今回、サンプルとして画像を使って説明して行きます。
サンプルで用いるhtmlのコードは
<div class="gazo">

(画像コード)

</div>

とします。使っている画像のサイズは200×200pxです。

あともう1点。cssのサンプルコードをコピーする場合は、コードが表示されている場所をダブルクリックすると全てが選択されると思いますので、その状態でコピーして下さい。普通に選択してもコピー出来ますが、改行とかはコピーされないので、ダブルクリックしてからコピーするようにした方が良いかな、と思います。

では、以下で使用例を紹介して行きます。

文字色を変える


まず最初は、リンクテキストのホバー時にそのテキストの色を変える、と言う事をやります。下のリンクが一応サンプルです。

リンク(ダミー)

あると分かりやすいかな、と思います。リンク文字の:hoverとかはブログの場合初期設定でも結構使われている印象があります。

cssのコードは以下の通りです。単にcolorを変更しているだけです。
text-decorationは文字の下線などを指定出来るものです。このブログでは、リンクには通常時は下線がなく、ホバー時に下線が表示されるようにしているので、そのコードも載せてますが。
a:hover{
color:#E48E00;
text-decoration:underline;
}
ちなみに、aタグに:hoverとか:visitedとかを付ける場合は書く順番を気をつけないと思った通り動いてくれないので、注意してください。そう言った注意点とかは
:hover擬似クラス - CSSリファレンス
に書かれているので、そちらを参照して下さい。リファレンス様々です。

背景色を変える


今度は背景です。これは単にbackground-colorを変更しているだけです。
現在ではaタグだけでなく、このようにdivタグなどにも使えるようになってますので、色々出来ると思います。

サンプル
サンプル画像

.gazo{
width:200px;
padding:20px;
background-color:#eee;
border-top:1px #666 solid;
border-left:1px #666 solid;
}
.gazo:hover{
background-color:#ddd;
}

枠線の色を変える


背景色ではなく、枠線の色を変える、と言う選択肢もあります。色だけでなく、スタイル(破線、点線など)を変える、と言う事も出来ます。
下のサンプルは色だけ変えてます。このサンプルは分かりやすくしていますが、枠線が細いとあまり目立たず、意外に色々なところで使われているのを見かけます。

サンプル
サンプル画像

.gazo{
width:200px;
padding:20px;
background-color:#eee;
border:3px #999 solid;
}
.gazo:hover{
border:3px #000 solid;
}

位置をずらす


これもたまにあるやつですね。方法はいくつかあると思いますが、ここでは2つ程紹介します。

position:relativeを使う


まず1つ目の方法は、position:relativeを使う方法。これが一番単純で楽かな、と思います。
position:relative; と書くと、指定した要素の表示位置が相対的に指定出来る様になり、実際に表示される位置よりtop(上)に3px、left(左)に3px、余白を取って表示する、みたいな事が出来るようになります。つまり、その要素はマウスポインタが乗ると右下に少しずれる様になるわけです。ずらし過ぎるとクリックしずらくなるので、あまり大きくずらさない様に注意しましょう。

サンプル
サンプル画像

.gazo:hover{
position:relative;
top:3px;
left:3px;
}

marginやpaddingで移動させる


2つ目の方法は、marginやpaddingで調整する方法です。基本的には1つ目の方法を使えば良いと思いますが、例えばpositionを既にabsoluteなどに設定していて変えたくない場合とかは、今回紹介する方法を使わないといけなくなるかな、と思います。

また、例えばホバー時にボーダーを表示する様にしたい場合、marginを調節しないと、そのブロックの大きさが変わってしまい、回りのレイアウトにも影響が出ます。そういう場合はmarginの調整は必須なので、ついでに表示位置もずらすってのもありかな、と思います。
ずらす方向と、左右、上下の関係を考えて調整します。余白とボーダーの合計値がホバー前とホバー後に変わらないようにすれば、回りのレイアウトには影響は出ません。

サンプル
サンプル画像

.gazo{
width:200px;
padding:10px;
margin:6px 6px 0 36px;
}
.gazo:hover{
border:3px #88ABDA solid;
margin:0 6px 0 30px;
}

透過性を変える


cssでopacityを指定すると、透過性を変える事が出来ます。ホバー時にこれを調整する事で画像リンクとかは分かりやすくなるかな、と思います。
ie8等では未対応な為、filterも定義するべきかな、と思います。(コメントでTomさんに指摘していただきました。ありがとうございます。)

ただし、画像の表示に影響があるため、アフィリエイトの画像リンクに使用するのは大丈夫なのかは自分は知らないので、それについては各自確認するなどしてみて下さい。

そして、これは今までのとは少し違います。と言うのは、前までは画像を囲うdivタグにcssを適用していたんですが、今回の場合はcssは画像のタグに当てる必要があります。

サンプル
サンプル画像

.gazo img:hover{
filter:alpha(opacity=80);
opacity:0.8;
}

画像の大きさを変える


今度は、ホバー時に画像の大きさを変えます。ただし、使用する画像は同じ物で、それを引き伸ばしたりする、と言う感じです。
自分が今思いつくのは2パターンで、「画像の表示サイズを変える」、と、「通常は画像の一部のみを表示し、ホバー時に全部表示する」、の2パターンです。順に説明していきます。

ただし、これもアフィリエイト広告に適用して良いかは微妙なので、各自の責任でよろしくお願いします。

画像の表示サイズを変える


まず1つ目のこれは、単にwidthとheightを変更しているだけです。厳密には、あとmarginの設定なども行う事でレイアウトの崩れを防ぐ必要があります。下の例は、更に画像の大きさが変わっても画像が中央にくるようにmarginを調整しています。また、回りのレイアウトが崩れない様にdivタグにも大きさを指定しています。cssが分からない人にとっては少し複雑かも。

widthなどを指定しているため、様々な大きさの画像を使いたい場合はその度にcssを追加しないといけません。ちなみに、html上でimgタグ内でwidthなどを指定して画像を表示している場合でも意図した動作をしてくれます。

サンプル
サンプル画像

.gazo img{
width:200px;
height:200px;
margin:60px auto 50px;
}
.gazo img:hover{
width:300px;
height:300px;
margin:10px auto 0;
}

通常は画像の一部のみを表示し、ホバー時に全部表示する


次は、「画像の大きさを変える」、と言うよりは、「画像を囲っているブロックの大きさを変える」、と言う感じです。今回もmarginで余白を調整して、回りのレイアウトには影響が出ない様にしています。

意外に色々使えるんじゃないかな、と思います。

サンプル
サンプル画像

.gazo{
width:100px;
height:100px;
margin:10px 110px 110px 10px;
overflow:hidden;
}
.gazo:hover{
width:200px;
height:200px;
margin:10px;
}

(おまけ)ホバー時にテキスト表示


これは、おまけ的な感じです。こんな事も出来ます、的な感じで。

サンプル
サンプル画像

.gazo{
position:relative;
}
.gazo:hover:after{
content:"画像です。";
display:block;
position:absolute;
bottom:10px;
left:0;
width:100%;
height:30px;
line-height:30px;
background-color:#eee;
font-weight:bold;
text-align:center;
}

リンク文字に少しマウスポインタを乗せておくと表示されるやつ


少し:hoverとは直接は関係ない話になります。
リンクテキストにマウスポインタを乗せて少しすると表示されるやつありますよね。あれは、:hoverとは関係ありませんし、cssでもありません。あれは、aタグの属性です。
例えば、
<a href="#ダミー" title="サンプルです">ダミー</a>
と書くと、ダミーと言う風になります。

css以外の方法もある


java scriptとかで、マウスポインタが乗った時の動作とかを付ける事も出来ます。詳しくはこの記事では説明しませんが、例えば
onmouseout属性 onmouseover属性 XHTML HTML辞典
とかを見れば色々書いてありますので、そういうのを参照してください。
当然ですが、スクリプトを使うと出来る事は何倍にもなります。それに、今回書いた事とかは、java scriptでも簡単に実装出来るはずなので、調べてみても良いと思います。

最後に簡単な注意とまとめ


:hoverを使う事で、java scriptを使わずにウェブページに動きを出す事が出来ます。しかし、なんでもかんでも動かすのはどうかと思います。
「リンク関連だけ、動きを付ける」、とかだと分かりやすいページになるんじゃないかな、と。なんでもかんでも動かすと、ユーザーにとって分かりにくいページになったしまいますから。
でも、やはり動きがある方がユーザーを引き付けるかもですし、広告とかも背景色を変える様にしたりするだけで、ちょっとは印象も変わるんじゃないかな、と。

今回紹介した方法はかなり基本的な事だけです。:hoverだけでももっと色々な事が出来ます。興味を持った方は調べてみると面白いかな、と。
今回少しだけ調べてみた時に発見した少し面白いやつを最後に紹介。
「:hover」している要素以外にも「:hover」の効果を付けるCSSチュートリアル「Hover on “Everything But”」 | BlackFlag

セレクタで上手く指定すると、色々出来そうですね。とりあえず、こんな感じで以上です。長々失礼しました。

このブログの更新情報は TwitterRSS でチェック出来ます。是非、フォロー、またはRSSの購読をよろしくお願いします。
「RSSの購読って何?」って人は、 ブラウザ毎のRSS購読方法の簡単なまとめ を読んでみて下さい。

このエントリーをはてなブックマークに追加
ブログ内検索
カテゴリアーカイブ
人気記事

PAGE TOP