Curo.jp

リンクをマウスオーバーしたときに１px右下にずらすのはやめろぉぉぉ！ガタガタガタってしたくなっちゃうから、さ！

ということで、下のCuro.jpという文字列にカーソルを合わせてみてください。

右下にちょっとずれるのが分かるでしょうか。「ガタガタガタ」というのは、リンクの上側または左側ギリギリにカーソルを当てると、そうなります。これはもう「ガタガタガタ」としか言いようがない。

（Firefox2はガタガタしました。Internet Explorer6, Opera9は大丈夫でした。）

position

これは、リンクをマウスオーバーしたときに数pxほど右下にずらすようにCSS（スタイルシート）で以下のように設定されています。

a:hover	{
	top:1px;
	left:1px;
	position:relative;
}

なんで右下にずらすのか。おそらくはボタンを押したときのような感覚を狙っているのだと思います。クリック感とでもいいましょうか。

メニューなどのリストで使うと結構気持ちいい感じがします。こうカタカタカタっと。

でもやっぱり、上からマウスを当てにいくとリンクが逃げる感じがして好きになれない。下手したら空クリックしてしまいます。0.1秒を争うかもしれないウェブの世界でクリックし逃したなんてあってはならないのです。

padding

代替案として、こういうのはどうでしょう。

a:hover	{
	padding-left:4px;
}

右にずれるだけです。paddingなので、ずれたところでもリンクをクリックできます。「ガタガタガタ」ってなりません。

画像の場合（ロールオーバー）

画像も上のテキストリンクのように「ずらす」ことができるのですが、どうせならロールオーバーを使ってみるのはどうでしょう。

<a href="http://example.com/feed"><img src="http://example.com/img/feed-icons/orange1.gif" alt="Feed-Icon" onmouseover="this .src='http://example.com/img/feed-icons/orange2.gif'" onmouseout="this .src='http://example.com/img/feed-icons/orange1.gif'"/></a>

影の有無を利用して「押す」感じを演出。

これも、ロールオーバー前と後の画像の大きさを同じにしてあるので、「ガタガタガタ」ってなりません。

ちなみに、このアイコンはフリー素材:Web2.0チックなフィードアイコンに置いてあります。

なんだか終始、感覚的な話でした