cursor

概要

CSS の cursor プロパティは、マウスポインタが対象となる要素上に有る時のマウスカーソルを定義します。

  • 初期値 auto
  • 適用対象 全要素
  • 継承 継承する
  • メディア visualinteractive
  • 計算値 指定値(※キーワード指定の場合)
  • アニメーションの可否 不可
  • 正式順序 正式な文法により定められた一意のあいまいでない順序

構文

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 つ目以降の <uri> の指定はそれぞれ、前候補の画像形式がサポートされていなかった場合のフォールバックとして機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。この指定がなければ、指定した url() 形式の記述は無効となります。詳細については『CSS の cursor プロパティに於ける URL() 値の使用』の頁を参照して下さい。
<x> <y>
カーソルの表示位置の x 座標と y 座標のピクセル値を単位無しで指定(任意)

キーワード値

「値」の列にマウスオーバーすると、各項目の実際の表示を確認できます。

カテゴリ 表示 説明
一般 auto   コンテクストに基づき表示するカーソルをブラウザが決定。
※例えばテキストにマウスオーバーした時には text キーワードを指定した場合と同様の表示結果となるでしょう。
default default 既定のカーソル。矢印の様な形状となる。
none   カーソルを表示しない。
【訳注: ユーザビリティ上の観点から、この値は特別な理由が無い限り用いるべきではありません。】
リンク及び状態 context-menu context-menu カーソル下でコンテクストメニューが使用可能である事を示す。
Windows 上の Gecko/Firefox には実装されていない バグ 258960 WONTFIX
help help ヘルプが使用可能である事を示す
pointer pointer リンクにマウスカーソルが乗った時など。多くの場合、指差しマークが表示される。
progress progress バックグラウンドでプログラムがビジー状態であるが、まだユーザによる操作が可能である状態を示す(※ wait とは異なる)
wait wait プログラムがビジー状態で、ユーザによる操作が不能である状態を示す(カーソルは砂時計、或いは時計などの図柄となる)
選択 cell cell セルを選択できることを示す
crosshair crosshair 十字カーソルは。多くの場合ビットマップの選択を示す為に用いる
text text.gif テキストを選択可能である事を示す。通常、I ビームが表示される
vertical-text vertical-text 縦書きのテキストを選択可能である事を示す。通常、水平の I ビームが表示される
ドラッグアンドドロップ alias alias エイリアスやショートカットが作成される事を示す
copy copy 何らかのコピー操作が可能である事を示す
move move マウスカーソル下のオブジェクトが移動できる可能性がある事を示す
no-drop no-drop 現在の位置にドロップが許可されていないことを示すカーソル。
バグ 275173 Windows に於いて、"no-drop" が "not-allowed" と同じものとなる
not-allowed not-allowed 何らかの操作を行う事が出来ない事を示す
リサイズ及びスクロール all-scroll all-scroll 任意の方向にスクロール(パン)可能である事を示す
バグ 275174 Windows に於いて、"all-scroll" が "move" と同じものとなる
col-resize col-resize アイテムや列が水平方向にリサイズ可能である事を示す。
row-resize row-resize アイテムや行が垂直方向にリサイズ可能である事を示す。
n-resize Example of a resize towards the top cursor エッジが移動可能である事を示す。例えばボックスの右下から動作を開始すると "se-resize" カーソルが表示される。
e-resize Example of a resize towards the right cursor
s-resize Example of a resize towards the bottom cursor
w-resize Example of a resize towards the left cursor
ne-resize Example of a resize towards the top-right corner cursor
nw-resize Example of a resize towards the top-left corner cursor
se-resize Example of a resize towards the bottom-right corner cursor
sw-resize Example of a resize towards the bottom-left corner cursor
ew-resize 3-resize.gif 双方向へのサイズ変更が可能である事を示す
ns-resize 6-resize.gif
nesw-resize 1-resize.gif
nwse-resize 4-resize.gif
ズーム zoom-in
-webkit-zoom-in
zoom-in.gif

ズームイン / アウトが可能であることを示す

zoom-out
-webkit-zoom-out
zoom-out.gif

ベンダー拡張

掴む -moz-grab
-webkit-grab
grab 要素を掴む事が出来る事を示す このカーソルの 公共の web ページでの使用はおすすめできません。
URL() 値を使用した方が、より環境互換性の高いページになります。
-moz-grabbing
-webkit-grab
grabbing 要素を掴んでいる事を示す

実際の表示を確認

.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 }

仕様

仕様書 策定状況 コメント
CSS Basic User Interface Module Level 3 草案 幾つかのキーワード、ポジション構文、url() 関数形式の追加
CSS Level 2 (Revision 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 (同等の表現である "pointer" で代用可能) 未サポート 未サポート 4.0 未サポート 未サポート
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 未サポート 3.0
url() 値用のポジション構文 ? (有) 未サポート ? ?
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] 未サポート 10.6 [1] 3.0 [2]
none 5.0 (533) 3.0 (1.9) 9.0 未サポート 5.0 [2]
inherit 1.0 1.0 8.0 9.0 1.2
zoom-in, zoom-out 1.0 (522) -webkit- 1.0 (1.4) -moz-
24.0
未サポート 11.6 3.0 -webkit-

[1] Windows 上の Mozilla と WebKit では "context-menu" が適用されません。 Opera では問題ありません。
[2] Windows 上の Safari では、 aliascellcopynoneが適用されません(Mac は可か?)

関連情報

添付ファイル

ファイル サイズ 日時 添付者:
alias.gif
176 バイト 2009-04-26 20:30:31 Jürgen Jeka
all-scroll.gif
98 バイト 2009-04-21 16:00:52 Jürgen Jeka
cell.gif
98 バイト 2009-04-21 16:00:52 Jürgen Jeka
col-resize.gif
106 バイト 2009-04-27 23:04:31 Jürgen Jeka
context-menu.png
233 バイト 2009-04-25 19:59:48 Jürgen Jeka
copy.gif
173 バイト 2009-04-25 20:03:29 Jürgen Jeka
crosshair.gif
86 バイト 2009-04-21 16:01:25 Jürgen Jeka
default.gif
98 バイト 2009-04-21 16:01:45 Jürgen Jeka
grab.gif
103 バイト 2009-04-21 16:01:47 Jürgen Jeka
grabbing.gif
91 バイト 2009-04-21 16:02:06 Jürgen Jeka
help.gif
119 バイト 2009-04-21 16:02:06 Jürgen Jeka
move.gif
103 バイト 2009-04-25 20:01:33 Jürgen Jeka
no-drop.gif
141 バイト 2009-04-25 20:05:19 Jürgen Jeka
not-allowed.gif
185 バイト 2009-04-25 20:17:59 Jürgen Jeka
pointer.gif
109 バイト 2009-04-21 16:03:34 Jürgen Jeka
progress.gif
136 バイト 2009-04-26 20:30:33 Jürgen Jeka
row-resize.gif
88 バイト 2009-04-27 23:04:33 Jürgen Jeka
vertical-text.gif
84 バイト 2009-04-21 16:04:10 Jürgen Jeka
wait.gif
114 バイト 2009-04-21 16:04:19 Jürgen Jeka
zoom-in.gif
98 バイト 2009-04-26 21:16:34 Jürgen Jeka
zoom-out.gif
96 バイト 2009-04-26 21:16:36 Jürgen Jeka
New resume!.doc
20992 バイト 2011-10-09 23:15:48 MOCHAD@COMCAST.NET
cubic-bezier, example.png
288596 バイト 2011-10-10 06:25:24 teoli
TF_with_output_gt_than_1.png
248751 バイト 2011-10-10 09:22:39 teoli
TF_with_output_gt_than_1_clipped.png
248751 バイト 2011-10-10 09:22:40 teoli
steps(2,start).png
247755 バイト 2011-10-10 11:57:44 teoli
steps(4,end).png
247755 バイト 2011-10-10 11:57:45 teoli
coord_in_R2.png
167468 バイト 2011-10-11 11:30:55 teoli
transform_functions_generic_transformation_cart.png
1964 バイト 2011-10-11 13:24:58 teoli
transform_functions_transform_composition_cart.png
3039 バイト 2011-10-11 14:02:23 teoli
transform_function_generic_2D_homo.png
1431 バイト 2011-10-11 16:06:00 teoli
transform_functions_rotation_cart.png
1542 バイト 2011-10-12 06:36:22 teoli
transform-functions-scale_2_2.png
15461 バイト 2011-10-13 11:47:11 teoli
transform_functions_scale_cart.png
835 バイト 2011-10-13 13:04:29 teoli
transform_functions_scaleX_cart.png
1012 バイト 2011-10-13 17:45:45 teoli
transform_functions_scaleX_homo.png
714 バイト 2011-10-13 17:45:46 teoli
Bugs
17920 バイト 2011-10-13 23:25:50 FarmGirl
radiomak tack 1.png
236656 バイト 2011-10-21 10:41:18 radiomak
template new web 2.png
27498 バイト 2011-10-21 10:41:19 radiomak
Add %S.png
56700 バイト 2011-10-21 20:03:51 jbeatty
text-overflow.png
6704 バイト 2012-01-16 14:40:22 teoli
foto minha amb han.JPG
92611 バイト 2011-10-28 17:57:51 marciocaetano44
1
85 バイト 2012-08-02 03:59:51 teoli
3
83 バイト 2012-08-02 04:00:05 teoli
4
84 バイト 2012-08-02 04:00:17 teoli
6
88 バイト 2012-08-02 04:00:28 teoli
text
86 バイト 2012-08-02 04:00:52 teoli
Example of a resize towards the top cursor
Example of a resize towards the top cursor
1135 バイト 2012-09-29 02:57:26 teoli
Example of a resize towards the right cursor
Example of a resize towards the right cursor
1129 バイト 2012-09-29 02:57:48 teoli
Example of a resize towards the bottom cursor
Example of a resize towards the bottom cursor
1137 バイト 2012-09-29 02:58:13 teoli
Example of a resize towards the left cursor
Example of a resize towards the left cursor
1130 バイト 2012-09-29 02:59:29 teoli
Example of a resize towards the top-right corner cursor
Example of a resize towards the top-right corner cursor
1133 バイト 2012-09-29 03:14:13 teoli
Example of a resize towards the top-left corner cursor
Example of a resize towards the top-left corner cursor
1133 バイト 2012-09-29 03:14:38 teoli
Example of a resize towards the bottom-left corner cursor
Example of a resize towards the bottom-left corner cursor
1133 バイト 2012-09-29 03:15:03 teoli
Example of a resize towards the bottom-right corner cursor
Example of a resize towards the bottom-right corner cursor
1133 バイト 2012-09-29 03:15:31 teoli

Document Tags and Contributors

Contributors to this page: ethertank
最終更新者: ethertank,
サイドバーを隠す