オリジナルのマウスカーソルをCSSのみで実装しよう

2021.04.13
通常、WEBサイト内に存在するクリッカブルな要素(リンクやボタンなど)にマウスカーソルを合わせると、矢印↑ではなく、ミッキーマウスの手袋のような人差し指が表示されます。
WEBサイト上で手袋アイコンを見ると「あぁ、ここを押したら良いんだな!」と分かり、とても使いやすいですよね。一方で作る側の目線に立ってみると、彼の柔らかでほっこりする手袋は自分デザインと雰囲気が合わないなあ・・・など悩みの種になりがちです。

難しそうに思えるマウスカーソルのデザイン変更ですが、JavaScriptを使用せずに実装することが可能です。
諸般の理由からマウスカーソルのデザインを変えたい!とお考えの方にむけて、実装方法を共有させていただきます!




マウスカーソル関連のCSSをおさらい

マウスカーソルは通常、ユーザーエージェントがマウスが指す要素に応じた適切な種類を判断して表示してくれます。
「この要素にはこのカーソルを表示させたい!」という希望がある場合には、以下のようなCSSで設定します。

.hoge {
  cursor: pointer; // 手袋アイコンを表示させたい時
  cursor: zoom-in; // 虫眼鏡を表示させたい時
  cursor: none; // カーソルを表示させたくない時
}

PCでお読みの方は、以下にマウスをのせてみてください。
カーソルの違いがお分かりいただけると思います。

■ 手袋アイコン

ここはcursor:pointer;で実装しています!


■ 虫眼鏡アイコン

ここはcursor:zoom-in;で実装しています!


■ アイコンなし

ここはcursor:none;で実装しています!


このようにすれば、任意の要素にマウスをのせた時に表示させたいカーソルアイコンを指定できます。 カーソルのCSSについてもっと知りたくなってしまった方にはMDNがオススメです!


① 用意するもの

ではでは、本題に入ります!
マウスポインターを変更するには、新たに設定したい画像を用意しておけばOKです。
画像はpng形式でも良いですが、svg形式の方がキレイに表示されるのでオススメです。
Adobe xdを利用すれば、簡単にsvg画像を作成することができますよ。

② 実装方法

それでは、実装していきましょう。
以下のようにCSSに一行追加するだけです。

カーソルを表示したい要素のクラス名 {
  cursor: url('表示したい画像へのpath'), 画像が表示できない場合に備えたデフォルトプロパティ;
}


/assets/imageフォルダに、pointer用の画像(icon-pointer.svg)を用意したとしましょう。
画像が表示できない時はデフォルトのpointer手袋アイコンを表示させたいので、以下のようになります。

.hoge {
 cursor: url('/assets/image/icon-pointer.svg'), pointer;
}


■ アイコン変更

カーソルアイコンを変更しています!



本当にあっさり実装完了するので、とても嬉しくなりますね!

まとめ

カーソルアイコンをオリジナル画像に変更したい場合、画像を用意し、CSSに一行追加するだけで対応可能です。
ただ、スマホからご覧のみなさまはお気づきのように、スマホに対しては効果ないです。。。
他にも、ブラウザによっては非対応のものもありますので、Can I use…で確認してからご利用ください。

最後に

最後までお読みいただきありがとうございます。
こういったちょっと細かい部分の実装に関するお悩みを抱えていらっしゃる方は、コンタクトフォームからお問い合わせください。
このエントリーをはてなブックマークに追加