マウスを文字の上に持ってくと、その文字が大きくなる、って効果を入れてるサイトがあるよね。クリックしようとしてる文字を見易く伝えるとか、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 を書く時は、マウスを飾して文字を小さくする効果が、こういった副作用を生むことを覚えておいて欲しい。
No comments:
Post a Comment