・マウスカーソルを画像に変更したいんだど、どう実装するの？
こんな疑問にお答えします。
案件によっては「ここの部分だけマウスカーソルをこのデザインにしてほしい」という要望があるんですよね。
実はその要望、簡単に実装可能。
すぐにできるよ！
ただ、注意点もあるんですよね。
ということで、今回は「マウスカーソルをCSSで画像に変更する方法」について解説していきます！
・マウスカーソルをCSSで画像に変更する方法
・マウスカーソルをCSSで画像に変更注意点
・マウスカーソルをCSSの変更バリエーション
目次
【簡単】マウスカーソルをCSSで画像に変更する【cursor : url()】
マウスカーソルを特定の画像に変更するのは簡単。
結論：「cursor : url()」を使うこと。
これだけで好きなデザインの画像を、カーソルに実装可能。
- cursor : url()とは？
- cursor : url()の使い方
- cursor : url()の実践例
順に見ていきましょう。
cursor : url()とは、マウスカーソルの形を画像に変更できるプロパティと値のこと。
下記のような指定をします。
cursor : url(このカッコ内に画像のパスを入れます),カーソルの種類;使い方としてはこんな感じ。
// 画像のパスを指定
.hoge {
cursor: url(../img/hoge.png),auto;
}
// 画像URLを指定
.hoge {
cursor: url(https://jito-site.com/wp-content/uploads/2022/12/hoge_cursor.png),auto;
}
// Retinaディスプレイ対応
.hoge {
cursor: -webkit-image-set(url(@1xの画像) 1x, url(@2xの画像) 2x),auto;
}background-image :url()のように、画像のパスを入れて実装します。
また画像のパスのみでは上手く表示できません。必ずコンマで区切ったあとに、カーソルの種類も記述しましょう。
画像が表示されなかったら、そのカーソルの種類が表示されるということです。
つまりこの記述の場合「画像が表示されなかったら、初期値（auto）を表示しますよ」という意味をもっています。
実際に使用してみました！
下記の枠線のブロックを、カーソルで合わせると画像になるはず↓
結構かんたんに実装できますよね！
【注意点】マウスカーソルをCSSで画像に変更する【cursor : url()が効かない？】
cursor : url()を使えば、マウスカーソルを画像に変更可能。
ただ注意点があります。これを知っていないと「cursor : url()が効かない」「表示されない。。」という沼にハマる可能性あり。
そんな注意点がこちら↓
- 高さが必要
- コンマで区切る
- 要素の順番が下
- 大きさ制限がある
- ブラウザによって対応が変わる
順に見ていきましょう。
まずマウスカーソルを表示させるブロックに、高さが必要ということです。
当たり前ですが、縦0pxのブロックに対してcurorプロパティを指定しても表示されません。
あとpaddingだけでで高さをとっても表示されないことがありました。そういう時の対策として「height」を使うことも必要かと。
先述しましたが「コンマで区切って記述」するのが一番の注意点。これをしないと上手く表示されません。
この蛍光ペンで引いた部分ですね↓
cursor : url(このカッコ内に画像のパスを入れます),カーソルの種類;
ここに画像が表示されなかった時に出るカーソルの種類を、しっかりと記述しておきましょう！
「z-index」の値、もしくは「position」プロパティなどで、要素の順番が下になってる場合カーソルは表示されません。
下のブロックに対してカーソル変更を指定しても、触れれませんからね。
そのため要素の順番には注意しましょう！
「cursor : url()」に使う画像には、大きさ制限があるのが注意点。
結論：128×128pxが最大制限
そのため画像が大きすぎると、「cursor : url()」の指定は効きません。画像サイズに注意して指定しましょう！
もし大きな画像を使ってマウスカーソルを変えたい場合は、JavaScriptを使ったほうが良いでしょう。
また今度記事にしますね！
最後の注意点がブラウザによって、対応が変わること。
結論：IE,Edgeではpng画像が対応していません。
その2つのブラウザも対応してカーソルを変えたいなら「.cur形式」の画像を使用する必要があります。
下記サイトから変換することができますよ↓
https://convertio.co/ja/png-cur/
マウスカーソルをCSSで画像に変更する【cursor : url()の不満点】
ちょっと小ネタですが、cursor : url()の不満点をつぶやきます(笑)
簡単にカーソルを画像にできるのは良いんですが、下記があまりよろしくないんですよね↓
- サイズは128×128pxまで
- ブロックにちょっと途切れたら消える
ようは大きな画像を使えないこと。そしてブロック要素にちょっとでも当たったら、カーソルが初期値に変わってしまうこと。
カーソルデザインに、よりカスタマイズ性を持たせようとしたら不満点が多いかもしれません。それでも便利なプロパティであるのは間違いないですが！
大きな画像を使いたかったり、カスタマイズしたいのであればJavaScriptを使用してマウスカーソルを変える手を使うほうが良いですね。
CSSで変更できるマウスカーソルの形一覧
最後にCSSで変更できるマウスカーソル一覧を紹介していきます。
それがこちら↓
| auto | 初期値、状況に応じて自動で変更 |
| default | デフォルト状態のカーソル |
| pointer | 指マークのカーソル |
| crosshair | 十字マークのカーソル |
| move | 矢印十字マークのカーソル（移動カーソル） |
| text | テキスト選択時のカーソル |
| help | はてな？がでるカーソル |
| wait | ぐるぐるロード中みたいなカーソル |
| progress | ぐるぐるロード中＋デフォルトカーソル |
| none | カーソルが非表示に |
| url() | 画像で表示されたカーソル |
枠線内のマウスカーソルが初期値、状況に応じて自動で変更！
枠線内のマウスカーソルがデフォルト状態に変化！
枠線内のマウスカーソルが指マークに変化！
枠線内のマウスカーソルが十字マークに変化！
枠線内のマウスカーソルが矢印十字マークに変化！
枠線内のマウスカーソルがテキスト選択時に変化！
枠線内のマウスカーソルがはてな？に変化！
枠線内のマウスカーソルがぐるぐるロード中に変化！
枠線内のマウスカーソルがぐるぐるロード中＋デフォルトカーソルに変化！
枠線内のマウスカーソルが非表示に！
枠線内のマウスカーソルが画像に変化！
【簡単】マウスカーソルをCSSで画像に変更する【cursor : url()】：まとめ
- 「cursor : url()」を使えば画像に変更可能
- コンマで区切ったあとに、カーソルの種類も記述
- 画像サイズは128×128pxがまで
- IE,Edgeに対応したいなら「.cur形式」の画像を使用
この部分だけマウスカーソルを変えたいという仕様はあるので、覚えておこう！
