{{CSSRef}}
概要
CSS の cursor プロパティは、マウスポインタが対象となる要素上に有る時のマウスカーソルを定義します。
- {{Xref_cssinitial}} {{Cssxref("auto")}}
- 適用対象 全要素
- {{Xref_cssinherited}} 継承する
- メディア {{Xref_cssvisual}}、 {{Xref_cssinteractive}}
- {{Xref_csscomputed}} 指定値（※キーワード指定の場合）
- アニメーションの可否 不可
- 正式順序 正式な文法により定められた一意のあいまいでない順序
構文
cursor:
[ [ <uri> [<x> <y>]?,]*
[ auto | default | none | context-menu | help | pointer | progress | wait | cell |
crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed |
e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize |
sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize |
col-resize | row-resize | all-scroll | zoom-in | zoom-out ]
] | inherit
値
- <uri>
-
任意
url(…)の様な形式か、或いはそれらのカンマ区切りのリスト (url(…), url(…), …) で画像の URL を指定。2 つ目以降の {{Xref_cssuri}} の指定はそれぞれ、前候補の画像形式がサポートされていなかった場合のフォールバックとして機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。この指定がなければ、指定したurl()形式の記述は無効となります。詳細については『CSS の cursor プロパティに於ける URL() 値の使用』の頁を参照して下さい。 - <x> <y> {{experimental_inline}}
- カーソルの表示位置の x 座標と y 座標のピクセル値を単位無しで指定（任意）
キーワード値
「値」の列にマウスオーバーすると、各項目の実際の表示を確認できます。
| カテゴリ | 値 | 表示 | 説明 |
|---|---|---|---|
| 一般 | auto |
コンテクストに基づき表示するカーソルをブラウザが決定。 ※例えばテキストにマウスオーバーした時には text キーワードを指定した場合と同様の表示結果となるでしょう。 |
|
default |
 |
既定のカーソル。矢印の様な形状となる。 | |
none |
カーソルを表示しない。 {{yakuchu("ユーザビリティ上の観点から、この値は特別な理由が無い限り用いるべきではありません。")}} |
||
| リンク及び状態 | context-menu |
 |
カーソル下でコンテクストメニューが使用可能である事を示す。 Windows 上の Gecko/Firefox には実装されていない {{Bug("258960")}} WONTFIX |
help |
 |
ヘルプが使用可能である事を示す | |
pointer |
 |
リンクにマウスカーソルが乗った時など。多くの場合、指差しマークが表示される。 | |
progress |
 |
バックグラウンドでプログラムがビジー状態であるが、まだユーザによる操作が可能である状態を示す（※ wait とは異なる） | |
wait |
 |
プログラムがビジー状態で、ユーザによる操作が不能である状態を示す（カーソルは砂時計、或いは時計などの図柄となる） | |
| 選択 | cell |
 |
セルを選択できることを示す |
crosshair |
 |
十字カーソルは。多くの場合ビットマップの選択を示す為に用いる | |
text |
 |
テキストを選択可能である事を示す。通常、I ビームが表示される | |
vertical-text |
 |
縦書きのテキストを選択可能である事を示す。通常、水平の I ビームが表示される | |
| ドラッグアンドドロップ | alias |
 |
エイリアスやショートカットが作成される事を示す |
copy |
 |
何らかのコピー操作が可能である事を示す | |
move |
 |
マウスカーソル下のオブジェクトが移動できる可能性がある事を示す | |
no-drop |
 |
現在の位置にドロップが許可されていないことを示すカーソル。 {{bug("275173")}} Windows に於いて、" no-drop" が "not-allowed" と同じものとなる |
|
not-allowed |
 |
何らかの操作を行う事が出来ない事を示す | |
| リサイズ及びスクロール | all-scroll |
 |
任意の方向にスクロール（パン）可能である事を示す {{bug("275174")}} Windows に於いて、" all-scroll" が "move" と同じものとなる |
col-resize |
 |
アイテムや列が水平方向にリサイズ可能である事を示す。 | |
row-resize |
 |
アイテムや行が垂直方向にリサイズ可能である事を示す。 | |
n-resize |
 |
エッジが移動可能である事を示す。例えばボックスの右下から動作を開始すると "se-resize" カーソルが表示される。 |
|
e-resize |
 |
||
s-resize |
 |
||
w-resize |
 |
||
ne-resize |
 |
||
nw-resize |
 |
||
se-resize |
 |
||
sw-resize |
 |
||
ew-resize |
 |
双方向へのサイズ変更が可能である事を示す | |
ns-resize |
 |
||
nesw-resize |
 |
||
nwse-resize |
 |
||
| ズーム | zoom-in、-webkit-zoom-in |
 |
ズームイン / アウトが可能であることを示す {{experimental_inline}} |
zoom-out-webkit-zoom-out |
 |
ベンダー拡張
| 掴む | -moz-grab、-webkit-grab |
 |
要素を掴む事が出来る事を示す | このカーソルの 公共の web ページでの使用はおすすめできません。 URL() 値を使用した方が、より環境互換性の高いページになります。 |
|
-moz-grabbing、-webkit-grab |
 |
要素を掴んでいる事を示す | |||
例
{{CSSRefExampleLink("cursor")}}
.foo { cursor: crosshair; }
/* use prefixed-value if "zoom-in" isn't supported */
.bar { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }
/* standard cursor value as fallback for url() must be provided (doesn't work without) */
.baz { cursor: url(hyper.cur), auto }
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| {{SpecName('CSS3 UI', '#cursor', 'cursor')}} | {{Spec2('CSS3 UI')}} | 幾つかのキーワード、ポジション構文、url() 関数形式の追加 |
| {{SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor')}} | {{Spec2('CSS2.1')}} | 最初期の定義 |
ブラウザ実装状況
| 機能 | Chrome (WebKit) | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
auto, crosshair, default, move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize |
1.0 | 1.0 (1.0) | 4.0 | 7.0 | 1.2 |
hand {{non-standard_inline}} (同等の表現である "pointer" で代用可能) |
{{CompatNo}} | {{CompatNo}} | 4.0 | {{CompatNo}} | {{CompatNo}} |
pointer, progress |
1.0 | 1.0 (1.0|1.7) | 6.0 | 7.x | 1.2 | 3.0 |
url() (参照:『CSS の cursor プロパティに於ける URL() 値の使用』) |
1.0 (523) | 1.5 (1.8) On MacOs 4.0 (2.0). |
6.0 | {{CompatNo}} | 3.0 |
url() 値用のポジション構文 {{experimental_inline}} |
{{CompatUnknown}} | {{CompatVersionUnknown}} | {{CompatNo}} | {{CompatUnknown}} | {{CompatUnknown}} |
not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize |
1.0 (522) | 1.5 (1.8) | 6.0 | 10.6 | 3.0 |
alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize, context-menu |
1.0 (522 )[1] | 1.5 (1.8 )[1] | {{CompatNo}} | 10.6 [1] | 3.0 [2] |
none |
5.0 (533) | 3.0 (1.9) | 9.0 | {{CompatNo}} | 5.0 [2] |
inherit |
1.0 | 1.0 | 8.0 | 9.0 | 1.2 |
zoom-in, zoom-out |
1.0 (522) {{property_prefix("-webkit-")}} | 1.0 (1.4) {{property_prefix("-moz-")}} 24.0 |
{{CompatNo}} | 11.6 | 3.0 {{property_prefix("-webkit-")}} |
[1] Windows 上の Mozilla と WebKit では "context-menu" が適用されません。 Opera では問題ありません。
[2] Windows 上の Safari では、 alias、 cell、 copy、 noneが適用されません（Mac は可か？）
関連情報
- CSS の cursor プロパティに於ける URL() 値の使用
- {{cssxref("pointer-events")}}
- Webkit's cursor demos （拡張の "
zoom"、"zoom-out"、"grab"、"grabbing" を含む） - Cursor Property (MSDN)
- CSS 2.1 and CSS 3 cursor propery test