使用例の説明に入る前に
今回、サンプルとして画像を使って説明して行きます。
サンプルで用いるhtmlのコードは
<div class=”gazo”>
（画像コード）
</div>
とします。使っている画像のサイズは200×200pxです。
あともう１点。cssのサンプルコードをコピーする場合は、コードが表示されている場所をダブルクリックすると全てが選択されると思いますので、その状態でコピーして下さい。普通に選択してもコピー出来ますが、改行とかはコピーされないので、ダブルクリックしてからコピーするようにした方が良いかな、と思います。
では、以下で使用例を紹介して行きます。
▲文字色を変える
まず最初は、リンクテキストのホバー時にそのテキストの色を変える、と言う事をやります。下のリンクが一応サンプルです。
リンク(ダミー)
あると分かりやすいかな、と思います。リンク文字の:hoverとかはブログの場合初期設定でも結構使われている印象があります。
cssのコードは以下の通りです。単にcolorを変更しているだけです。
text-decorationは文字の下線などを指定出来るものです。このブログでは、リンクには通常時は下線がなく、ホバー時に下線が表示されるようにしているので、そのコードも載せてますが。
a:hover{
color:#E48E00;
text-decoration:underline;
}
ちなみに、aタグに:hoverとか:visitedとかを付ける場合は書く順番を気をつけないと思った通り動いてくれないので、注意してください。そう言った注意点とかは
:hover擬似クラス – CSSリファレンス
に書かれているので、そちらを参照して下さい。リファレンス様々です。
▲背景色を変える
今度は背景です。これは単にbackground-colorを変更しているだけです。
現在ではaタグだけでなく、このようにdivタグなどにも使えるようになってますので、色々出来ると思います。
サンプル
kokoku_sumple
.gazo{
width:200px;
padding:20px;
background-color:#eee;
border-top:1px #666 solid;
border-left:1px #666 solid;
}
.gazo:hover{
background-color:#ddd;
}
▲枠線の色を変える
背景色ではなく、枠線の色を変える、と言う選択肢もあります。色だけでなく、スタイル(破線、点線など)を変える、と言う事も出来ます。
下のサンプルは色だけ変えてます。このサンプルは分かりやすくしていますが、枠線が細いとあまり目立たず、意外に色々なところで使われているのを見かけます。
サンプル
kokoku_sumple
.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、余白を取って表示する、みたいな事が出来るようになります。つまり、その要素はマウスポインタが乗ると右下に少しずれる様になるわけです。ずらし過ぎるとクリックしずらくなるので、あまり大きくずらさない様に注意しましょう。
サンプル
kokoku_sumple
.gazo:hover{
position:relative;
top:3px;
left:3px;
}
marginやpaddingで移動させる
2つ目の方法は、marginやpaddingで調整する方法です。基本的には1つ目の方法を使えば良いと思いますが、例えばpositionを既にabsoluteなどに設定していて変えたくない場合とかは、今回紹介する方法を使わないといけなくなるかな、と思います。
また、例えばホバー時にボーダーを表示する様にしたい場合、marginやpaddingを調節しないと、そのブロックの大きさが変わってしまい、回りのレイアウトにも影響が出ます。そういう場合はmarginやpaddingの調整は必須なので、ついでに表示位置もずらすってのもありかな、と思います。
ずらす方向と、左右、上下の関係を考えて調整します。余白とボーダーの合計値がホバー前とホバー後に変わらないようにすれば、回りのレイアウトには影響は出ません。
サンプルではpaddingを調整しています。ホバー時に表示させるボーダーの太さ分を多めに設定しておきます。
サンプル
kokoku_sumple
.gazo{
width:200px;
padding:16px 10px 10px 16px;
}
.gazo:hover{
border:3px #88ABDA solid;
padding:10px 10px 10px 10px;
}
▲透過性を変える
cssでopacityを指定すると、透過性を変える事が出来ます。ホバー時にこれを調整する事で画像リンクとかは分かりやすくなるかな、と思います。
ie8等では未対応な為、filterも定義するべきかな、と思います。（コメントでTomさんに指摘していただきました。ありがとうございます。）
ただし、画像の表示に影響があるため、アフィリエイトの画像リンクに使用するのは大丈夫なのかは自分は知らないので、それについては各自確認するなどしてみて下さい。
そして、これは今までのとは少し違います。と言うのは、前までは画像を囲うdivタグにcssを適用していたんですが、今回の場合はcssは画像のタグに当てる必要があります。
サンプル
kokoku_sumple
.gazo img:hover{
filter:alpha(opacity=80);
opacity:0.8;
}
▲画像の大きさを変える
今度は、ホバー時に画像の大きさを変えます。ただし、使用する画像は同じ物で、それを引き伸ばしたりする、と言う感じです。
自分が今思いつくのは2パターンで、「画像の表示サイズを変える」、と、「通常は画像の一部のみを表示し、ホバー時に全部表示する」、の2パターンです。順に説明していきます。
ただし、これもアフィリエイト広告に適用して良いかは微妙なので、各自の責任でよろしくお願いします。
画像の表示サイズを変える
まず1つ目のこれは、単にwidthとheightを変更しているだけです。厳密には、あとmarginの設定なども行う事でレイアウトの崩れを防ぐ必要があります。下の例は、更に画像の大きさが変わっても画像が中央にくるようにmarginを調整しています。また、回りのレイアウトが崩れない様にdivタグにも大きさを指定しています。cssが分からない人にとっては少し複雑かも。
widthなどを指定しているため、様々な大きさの画像を使いたい場合はその度にcssを追加しないといけません。ちなみに、html上でimgタグ内でwidthなどを指定して画像を表示している場合でも意図した動作をしてくれます。
サンプル
kokoku_sumple
.gazo img{
width:200px;
height:200px;
margin:60px auto 50px;
}
.gazo img:hover{
width:300px;
height:300px;
margin:10px auto 0;
}
通常は画像の一部のみを表示し、ホバー時に全部表示する
次は、「画像の大きさを変える」、と言うよりは、「画像を囲っているブロックの大きさを変える」、と言う感じです。今回もmarginで余白を調整して、回りのレイアウトには影響が出ない様にしています。
意外に色々使えるんじゃないかな、と思います。
サンプル
kokoku_sumple
.gazo{
width:100px;
height:100px;
margin:10px 110px 120px 10px;
overflow:hidden;
}
.gazo:hover{
width:200px;
height:200px;
margin:10px 10px 20px;
}
▲ホバー時にテキスト表示
サンプル
kokoku_sumple
.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;
}