cursor

by 1 contributor:

概要

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 は可か?)

関連情報

ドキュメントのタグと貢献者

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