CSS

The CSS cursor property is used to specify the style of the mouse pointer on an element.

cursor

　cursorプロパティは、CSSで要素のカーソルのスタイルを指定するために使用されます。カーソルは、マウスポインタが要素上にあるときに表示されるアイコンや形状を表します。このプロパティは、ユーザーに対してインタラクティブな要素やリンクを示すために使用されることが一般的です。

　カーソルのスタイルは、以下のような値を指定することができます。（値の名前の上にカーソルを乗せるとそれぞれのカーソルに変更するよう設定しています）

auto: ブラウザがデフォルトのカーソルを設定します。通常、ポインター（矢印）がデフォルトのカーソルとして使用されます。
default: デフォルトのカーソル（通常はポインター）を表示します。
pointer: リンクやクリッカブルな要素を示す手の形のカーソルを表示します。
move: 要素をドラッグできることを示すカーソルを表示します。
text: テキスト入力が可能な要素であることを示すテキストカーソルを表示します。
wait: プロセスの完了を待つことを示す、待機中のカーソルを表示します。
crosshair: 十字線を表示し、要素が対象として選択可能であることを示します。
cell: Excelのセル選択風。
grab: 基本的にgrabbingとセットで使う。
grabbing: grabとセットで使う。:activeに指定することで掴むような動作に。
zoom-in: 拡大できるものを表すのに使える。
zoom-out: 縮小できるものを表すのに使える。
not-allowed: 要素が無効またはクリックできないことを示す禁止マークのカーソルを表示します。
help: ヘルプを示す疑問符のカーソルを表示します。ユーザーにヘルプが利用可能であることを示すのに適しています。
e-resize,n-resize,s-resize,w-resize: カーソルを東西南北のリサイズ用のカーソルに変更します。要素のサイズを変更できることを示します。
ne-resize,nw-resize,se-resize,sw-resize: カーソルを対角線方向のリサイズ用のカーソルに変更します。
ew-resize,ns-resize: カーソルを左右、または、上下のリサイズ用のカーソルに変更します。
nesw-resize,nwse-resize: カーソルを右斜め、または、左斜めのリサイズ用のカーソルに変更します。
col-resize,row-resize: カーソルを幅、または、高さを変更するとき用のカーソルに変更します。
all-scroll: 全方向にドラッグしてスクロールする用のカーソルに変更します。
progress: プロセスが進行中であることを示す待機中のカーソルを表示します。
none: カーソルが非表示に。
alias: ショートカットを連想させるもの。
context-menu: メニューアイコン＋矢印。
vertical-text: 縦書きテキストの選択用。
copy: 矢印の横に＋マーク。コピーできるものを表すのに便利。
no-drop: 矢印＋禁止マーク。ドロップできない領域を表す用。
URL: 任意のカーソル画像の URLを指定することもできます。カスタムカーソルを使用する場合は、カーソル画像の URLを指定します。

カスタムカーソル（画像表示）

　任意のカーソル画像の URLを指定して、カスタムカーソルを表示させてみます。ここでは下の「Sample」の枠内にカーソルが入ると肉球（肉球画像）の画像を表示するように設定しています。

Sample

HTML

<div>Sample</div>

CSS

div {
	width: 150px;
	height: 50px;
	border: 1px solid black;
	margin: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: url("paw_pad.png"), auto;
}

　cursorプロパティで URLを指定するのですが、画像が表示されなかった場合に何を表示するのかを「,(カンマ)」の後ろに設定します。（ここでは auto を指定しています）これを忘れるとカスタムカーソルの画像が表示されないようなので、注意が必要です。

　また、cursorプロパティで指定した画像は、サイズ調整されることなく画像そのままの大きさで表示されるようです。上記のサンプルでは 24x24ピクセルの画像を使いましたが、下記のサンプルでは 128x128ピクセルの画像を使っています。また、使える画像の最大の大きさも 128x128ピクセルのようなので合わせてご注意ください。

Sample

grab & grabbing 「掴むような動作」

　grab と grabbing を使って、クリックしている間だけ掴むような動作を作ってみます。

HTML

<div>Sample</div>

CSS

div {
	width: 150px;
	height: 50px;
	border: 1px solid black;
	margin: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: grab;
}

div:active {
	cursor: grabbing;
}

Sample

　ここのサンプルでは、カーソルが「Sample」の枠内に入ると手の形（grab）に変わり、クリックしている間は掴んだ手（grabbing）に変わります。クリックを放すと元（grab）に戻ります。これにより掴んだような動作に見えます。