カーソル一覧表

cursor は CSS のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。

下記のキーワード値をマウスオーバーすると、実際の表示を確認できます。


一般

キーワード
 説明
auto
状況に応じて自動選択 (初期値)
default
デフォルト
none
カーソル無し(見えない)

リンク及び状態

キーワード
 説明
context-menu
コンテキストメニュー
help
ヘルプ
pointer
リンクにマウスが乗った時など
progress
進行中 waitと異なりプログラムがビジー状態でも操作が可能な時
wait
待機中 プログラムがビジー状態でユーザーによる操作が不能な時

選択

キーワード
 説明
cell
セル選択
crosshair
範囲選択 多くの場合ビットマップ画像選択
text
テキスト
vertical-text
縦書きテキスト

ドラッグアンドドロップ

キーワード
 説明
alias
ショートカット(エイリアス)作成
copy
複製 コピー・アンド・ペースト
move
移動 カット・アンド・ペースト
no-drop
ドロップできない領域
not-allowed
操作できない領域
grab
ドラッグで掴めるもの
grabbing
ドラッグで掴んだ状態

リサイズ及びスクロール

キーワード
 説明
n-resize
上側へのサイズ変更 nはNorthの意味
e-resize
右側へのサイズ変更 eはEastの意味
s-resize
下側へのサイズ変更 sはSouthの意味
w-resize
左側へのサイズ変更 wはWestの意味
nw-resize
左上側へのサイズ変更
ne-resize
右上側へのサイズ変更
se-resize
右下側へのサイズ変更
sw-resize
左下側へのサイズ変更
ew-resize
左右のサイズ変更
ns-resize
上下のサイズ変更
nesw-resize
右上、左下のサイズ変更
nwse-resize
左上、右下のサイズ変更
col-resize
列のサイズ変更
row-resize
行のサイズ変更
all-scroll
上下左右スクロール

ズーム

キーワード
 説明
zoom-in
ズームイン
zoom-out
ズームアウト

使用方法

cursor: 任意のキーワード;

画像をカーソルとして使用する事もできます。

cursor: url(画像ファイル名), 任意のキーワード;

画像はカンマ(,)で区切って複数の候補を指定可。ユーザー側のブラウザで利用できる形式画像が使用されます。(.png .gif .jpg .cur .svg 等)

cursor: url(画像ファイル名), url(画像ファイル名), 任意のキーワード;

カーソル画像が表示できない場合に備え、カンマ(,)の後にキーワード(default や pointer 等)を指定する必要があります。

参考:MDN web docs - css|cursor,

cursor プロパティでの URL 値の使用