CSSのcursorでマウスポインタをオリジナルにアレンジ

この記事はだいぶ前に書かれたものなので情報が古いかもしれません
どーん

この記事を三行にまとめると

ポインタに対するこだわりがあるんだぁっ!!
自分なりのポインタ魂を発揮することが可能
IEEEEEEE!!
マウスカーソルがホバーしたときなどに出てくるポインタを、cssで任意に変更することができます。今日はそれを、自分の好きなものに変更してみようじゃないかと。

ついでに、僕がやったらなぜかIEで上手くいかなかった話も、合わせてお送りします。いろんな記事を参考にすると、IEでもできるって書いてあるんだけどなぁ……何でだぜ?



cursorについて簡単に

マウスのポインタを変更するには、cssでこんな風に書きます。

div {
  cursor: pointer;
}

こうすると、divタグの上にマウスが乗った時に、ポインタが指になります。

僕はほとんど指しか使ったことがなかったんですけど、ポインタに指定できるものは結構いっぱいあるみたいです。スタイルシートリファレンスのページを見るだけでも、20種類くらいはありますね。これだけあれば、必要に応じて、いろんな使い方ができそうです。



cursorに画像を使う

種類があるとは言っても、「これじゃダメだ。俺の理想を実現できん。俺には俺なりの、ポインタに対するこだわりがあるんだぁっ!!」っていう人も、いるかもしれない。

そんな熱いパトスがほとばしった時はどうすれば良いか。

ポインタには、画像を使うこともできるようです。なので画像さえ用意できれば、自分なりのポインタ魂を発揮することが可能ってことですね。

画像を使いたい場合は、こう書きます。

div {
  cursor: url(img/cursor.png);
}

backgroundなんかと同じ感じですね。画像のURLを参照するように書くことで、ポインタが、上記の例で言えば、cursor.pngになります。

実際、画像ポインタを使ったデモを用意したんで、良かったらどうぞ。
デモ画面

デモ画面にある「cursor: url(img/hand_right.png);」が、hand_right.pngという、右方向に指を指している画像を参照しています。



ちょっち書き方注意

混乱させてしまったら申し訳ないんですが、デモ画面のcssは、正確にはこう書いてます。

div {
  cursor: url(img/cursor.png), pointer;
}

意味としては、cursor.pngが参照できなかったらpointerの方を適用する、みたいなことですね。font-familyみたいな書き方ですね。

原因は分からないんですけど、cursorの指定が画像だけだと、ブラウザによっては上手く表示されないっぽいです。っていうか、僕が検証した限りでは、どのブラウザでも上手く表示されなかった。

なので画像の後ろに、pointerでもmoveでもautoでも何でも良いんですが、一つ別の値を入れておくと、ちゃんと画像が出ます。ちなみにautoっていうのは、ブラウザが自動的に選択したポインタが出てきます。



IEでpngは表示できない

IEの場合、png画像だと表示できないみたいです。gifとかでもダメっぽい。IEで表示したいなら「.cur」という拡張子の画像を用意する必要があります。

pngをcurに変換するサイトなどもあるので、用意すること自体は難しくないと思います。
convertio

もう一点。IEの場合は、相対パスで書くと、上手く表示されない場合があるようです。

cssで相対パスを書く場合、cssファイルからのパスになるのが普通なのですが、IEでcursorの画像を相対パス指定すると、なぜか現在表示中のページからの相対パスになってしまうみたいです。だから動的にURLを生成するようなページだと、パスがおかしくなることがある。

IEを考慮するなら、絶対パスで書いとくのが無難っぽいですね。

div {
  cursor: url(http://norm-nois.com/reference/img/hand_left.cur), pointer;
}

デモ画面でも「hand_left.cur」のやつは絶対パスで書いてます。



IEEEEEEE!!

ここまで書いといてなんですが、どちらにしろデモ画面では、IEで見ると上手く動いてないです。

絶対パスでcur画像を使えば出るっていう話だし、例えばこちらのMATOMAKU_BLOGさんを見ると、実際にIEでも画像が出てるっぽいのですが、なぜか僕の環境では上手く出ない……。

正直、原因はよく分かりません。ただ、png画像の方はpointerになって、cur画像の方は矢印のまま何も変わらないことを考えると、cssは効いてるけどcur画像が何らかの理由で表示できてない、みたいな感じなんですかね……? 作成した画像の方に問題があるのかな?

もし原因の分かる方がいたら、ぜひとも教えていただきたい。オナシャス。





画像を使わなくても、例えば「e-resize」「w-resize」で左右の矢印を表示したりすることもできます。ただ画像じゃない場合は、ブラウザによって少し見た目が変わることもあるので、もし統一したいのであれば、今回のように、画像を使うのが良いと思います。

それにしても、何でIEだと出ないんだろうなぁ……はたしてIEが悪いのか僕が悪いのか。それすらも今の僕には分からん。

でも「他力本願」「責任転嫁」「酒池肉林」がモットーの僕としては、IEが悪いことにしておいて、誰かが解決策を教えてくれるのを待ちたい。そして解決策を教えてくれた人が現れたあかつきには、その人を招いて酒宴を設けたい。
 もしかしたら何か関連しているかも? 
 質問や感想などお気軽にコメントしてください