カーソル一覧表
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 等）を指定する必要があります。
↻