備忘録的プログラミングリファレンス

cursor プロパティ

 cursor プロパティは、ポインターの形状を指定するプロパティです。エレメントごとにポインターの形状が変えられます。
 ポインターの形状については以下の値(Values)を参照してください。

cursor プロパティ
cursor: grab;

詳しくは Example を参照してください

構文(Syntax)

CSS

cursor: auto | cursor_name | initial | inherit ;
または <image>も利用できます。
cursor: <image>, x y, cursor_name;

DOM ( JavaScript )

値の取得
String = object.style.cursor;
値の設定
object.style.cursor=" auto | cursor_name | initial | inherit ";

 cursor_nameは以下の値(Values)を参照してください。

値(Values)

 以下の表は、ポインターーの形状の一覧です。概要は何を示すかの解説です。
 ポインターーの形状については各名称の上にポインターをもっていってみてください。

Value(cursor_name)摘要
auto初期値(default値)
aliasエイリアスやショートカットの作成
all-scrollスクロールが可能である場合
cell<table> といった表でのセル上で
context-menuコンテキストメニューの利用可を示す
col-resize水平方向(左右方向)にリサイズが可能なら
copyコピー可能であることを示す
crosshairビットマップ上での選択を示す
defaultdefault値。auto と同じ
e-resize右方向へのリサイズ
ew-resize左右方向へのリサイズ
grabドラッグが可能であることを示す
grabbingドラッグするために掴んだことを示す
help補足説明があることを示す
moveドラッグ中であることを示す
n-resize上方向へのリサイズ
ne-resize右ななめ上方向へのリサイズ
nesw-resize右上、左下斜め方向へのリサイズ
ns-resize上下方向へのリサイズ
nw-resize上左方向へのリサイズ
nwse-resize右下、左上斜め方向へのリサイズ
no-dropドロップができない領域であることを示す
noneカーソルを表示しません
not-allowedポインターによる操作を禁止
pointerリンクを示す
progress何らかの処理中、ビジー状態を示す。ユーザーによる操作は可能
row-resize垂直方向のリサイズ
s-resize下方向のリサイズ
se-resize右下方向へのリサイズ
sw-resize左下方向へのリサイズ
textテキストが選択可能であることを示す
URLURLで指定されたカーソル
vertical-text縦書きのテキストが選択可能であることを示す
w-resize左方向へのリサイズ
wait何らかの処理中、ビジー状態を示す。ユーザーによる操作は不可
zoom-inズームイン操作が可能
zoom-outズームアウト操作が可能
initial初期値に戻す
inherit親エレメントのプロパティを継承

 その他に <image> を指定可能です。その場合は、以下のように上記の表示あるポインターーを代替え指定します。

cursor プロパティ
cursor: url('URL'), grab;

備考(Remarks)

初期値(Default value)auto
継承(Inherited)Yes
CSS AnimationNo

Example

 cursor プロパティの例です。cursor プロパティを設定したエレメントの上にポインターをもってくると指定したポインター形状に変わります。