cursor プロパティ
cursor プロパティは、ポインターの形状を指定するプロパティです。エレメントごとにポインターの形状が変えられます。
ポインターの形状については以下の値(Values)
を参照してください。
cursor: grab;
詳しくは Example を参照してください
ページ内 Index
構文(Syntax)
CSS
cursor: auto | cursor_name | initial | inherit ;
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 | ビットマップ上での選択を示す |
default | default値。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 | テキストが選択可能であることを示す |
URL | URLで指定されたカーソル |
vertical-text | 縦書きのテキストが選択可能であることを示す |
w-resize | 左方向へのリサイズ |
wait | 何らかの処理中、ビジー状態を示す。ユーザーによる操作は不可 |
zoom-in | ズームイン操作が可能 |
zoom-out | ズームアウト操作が可能 |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
その他に <image> を指定可能です。その場合は、以下のように上記の表示あるポインターーを代替え指定します。
cursor: url('URL'), grab;
備考(Remarks)
初期値(Default value) | auto |
継承(Inherited) | Yes |
CSS Animation | No |
Example
cursor プロパティの例です。cursor プロパティを設定したエレメントの上にポインターをもってくると指定したポインター形状に変わります。