mouse hover で文字を小さくする効果の嫌なところ

マウスを文字の上に持ってくと、その文字が大きくなる、って効果を入れてるサイトがあるよね。クリックしようとしてる文字を見易く伝えるとか、Mac OS X っぽい効果を狙ってるとか、いろんな意図があるんだと思う。ぼくも、こういうギミックは好き。よいユーザー・インターフェイスを提供してくれるなら、文句ない。

不思議なのは、マウスを文字の上に持って行ったら、その文字を小さくする効果を入れる人がいること。彼らの意図が、汲み取れない。何で、こんな効果を入れるんだらう。

いや。別に、理由が分からなくても、困ることがなければ、文句は言わないよ。でも、少し嫌なことが起きるんだよね。

Shaking Character

具体的に症状を見てみませう。

CSS コードは次の通り。

#css_sample_2006_08_01       { font-size: xx-large; }
#css_sample_2006_08_01:hover { font-size: small; }

次の文字の「Shaking」の部分にマウスを持って行く。すると、文字がブルブル震え始める。

Font Shaking

マウスが Shaking の文字に被さると、:hover の命令に従って文字が小さくなる。すると文字がマウスから逃げた形になる。つまり、マウスは文字の上にかぶさらなくなる。hover 命令が解除されるので、文字は元の大きさに戻り、マウスが再び文字に被さる。あとは、これの繰り返し。

文字がガタガタ震えて、見苦しいこと甚だしい。

今回の例は、分かり易くするために、デフォールトの文字サイズを xx-large、小さな文字を small にしたけど、デフォールト・サイズが normal であっても文字を小さくする限り同じ現象が起きる。

どうか、CSS を書く時は、マウスを飾して文字を小さくする効果が、こういった副作用を生むことを覚えておいて欲しい。