More than 5 years have passed since last update.

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

Posted at 2020-02-23

はじめに

Webアプリケーションでは、clickなどのユーザーのアクションを要求する事が多くなります。
その際に時々見かけるのが、どこをclickすれば良いのか分からない画面です。

考えられる対応策はいろいろありますが、個人的に簡単で効果が高いものは、アイコンとマウスポインタの形状変更だとおもっています。

そして、マウスポインタの形状はcssで変更が可能です。
ここではマウスポインタの形状変更の方法をまとめます。

＊なお、アイコンはこちらなどを使用すれば良いかと思います。
https://fontawesome.com/

CSSのcursorを使用します。

マウスポインタが要素の上にある時に表示されるカーソルの形状を設定するstyleプロパティです。

個人的に良く使用しているものはこちらです。

値	内容
pointer	リンクの時に表示される矢印です。私はA要素以外でclickで実行になる箇所に設置します。
help	ヘルプが使える事を示します。私はヘルプ表示の箇所に設置します。
not-allowed	操作できない事を示すカーソルになります。私は未入力で実行できない時に、`disabled`と併用する事があります。

.sum {
  cursor: pointer
}

<p class="sum">合計値を出す</p>

＊ class意外にもdisabledなどをセレクタにすると、UIフレームワークで扱いやすいと思います。

使い方自体はかんたんですが、使う場所とタイミングが大事かと思います。
例えばですが、helpでもない部分にhelpがあったり、clickできる状態なのにnot-allowedのままだと、エンドユーザーが混乱します。
うまく使い分けることで、使いやすい画面を作る事が出来ると思います。