【CSS】cursorプロパティを使って、マウスポインタ（カーソル）を変更する

こんいちは、タクローです。

ウェブサイト、ウェブアプリケーションは、マウスを使って操作していくことがほとんどでしょう。

今回の記事では、そんなマウス操作に焦点を当ててみます。

早速ですが、みなさんがウェブサイト、ウェブアプリケーションをマウスで操作するときのことを想像してみてください。

マウスを使って、ポインタ（カーソル）を動かしたり、クリックしたり。

そんな操作をしていく中で、「クリックする、しない」の判断基準として、何が考えられるでしょう？

ざっくり分けて、下の3点を挙げてみました。

ボタンやバナー、テキストについては、ちょっとした工夫でクリックを誘導することができるでしょう。

では、最後の「マウスポインタの形」についてはどうでしょうか？

マウスポインタの形が変わらなければ、クリックすべき箇所に気づかず、スルーしてしまうかも。

そのようなちょっとした配慮不足が原因で、ページビューやコンバージョンを減少させることにつながるかもしれません。

また、ウェブアプリケーションに至っては、操作性の低下が業務効率を落とすことにもつながっていくでしょう。

そうならないためにも、ウェブサイト、ウェブアプリ制作者がマウスポインタの形にも配慮する必要があるのです。

今回はウェブサイト、ウェブアプリ制作者のための「マウスポインタの変更」について、解説していきます。

マウスポインタの形は、「CSS」で簡単に変更することができます。

404 NOT FOUND | TAKRO（タクロー）ブログ | 気になる情報発信ブログ

新しい発見や気になること、気ままな情報発信ブログ

takro-blog.com

CSSでマウスポインタ（カーソル）の形を変える

制作者側がクリックしてほしい箇所に、ユーザーがマウスポインタを動かした時、その形が変わらなければ、クリックしてもらえないこともあるでしょう。

マウスポインタの形は、制作者側の操作意図を伝える大きな役割を担っているのです。

では、具体的にCSSでマウスポインタの形を変える方法を解説していきます。

書き方はとても簡単。

これだけです。

cursorの値一覧

CSSの「cursor」プロパティで以下の値を指定することで、マウスポインタ（カーソル）の形を変えることができます。

表内の「サンプル」の文字列上にマウスポインタ（カーソル）を乗せてみてください。

指定する「cursor」プロパティの値に対応したマウスポインタ（カーソル）の形を実際に確認することができます。

古いブラウザでは対応していない場合がありますので、あらかじめご了承の上、参考にしていただけると幸いです。

オリジナルマウスポインタ（カーソル）

マウスポインタ（カーソル）にオリジナルの画像を使うことができます。

インパクトのある画像を使えば、オリジナリティ溢れる面白いウェブサイトが作れますね。

「cursor」プロパティで以下のように画像ファイルを指定するだけです。

上の例では、同じ階層の「image」フォルダに対象の画像ファイルがある場合です。

url( )内に表示した画像ファイルのパスを指定しましょう。

万が一、うまく表示されなかったことを考え、下のように複数の値をカンマで区切って指定することもできます。

この場合、先に指定した値から優先的にマウスポインタ（カーソル）の形が表示されます。

まとめ

今回は、マウスポインタ（カーソル）の形について、解説しました。

ちょっとした工夫でユーザビリティは向上するはずです。

ユーザビリティはウェブサイトのページビューやコンバージョンにも影響してきます。
ウェブアプリケーションでは業務効率などにも影響してくるでしょう。

マウスポインタ（カーソル）の形を駆使して、ウェブサイトやウェブアプリケーションのユーザビリティを少しでも改善していきましょう。

最後までお付き合いいただき、ありがとうございました。