cursor

cursorCSS のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。

構文

/* キーワード値 */
cursor: pointer;
cursor: auto;

/* URL とキーワードによる代替 */
cursor: url(hand.cur), pointer;

/* URL と座標とキーワードによる代替 */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* グローバル値 */
cursor: inherit;
cursor: initial;
cursor: unset;

cursor プロパティはゼロ個以上の <url> をカンマで区切ったものと、それに続く必須のキーワード値によって指定します。それぞれの <url> は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。

それぞれの <url> には二つの空白で区切った数値を続けることができ、 <x><y> 座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。

例えば、これは <url> 値を使用して二つの画像を指定し、 <x><y> 座標を二つ目に設定し、どちらの画像も読み込めなかったときは progress キーワードで代替されるように指定しています。

cursor: url(one.svg), url(two.svg) 5 5, progress;

<url>
url(…) の形式か、又はカンマ区切りのリスト url(…), url(…), … で画像の URL を指定します。複数の <url> の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。この指定がなければ、指定した url() 形式の記述は無効となります。詳細は cursor プロパティにおける URL 値の使用を参照して下さい。
<x> <y> これは実験段階の API です。製品内のコードで使用しないようご注意ください。
任意で x 座標と y 座標を指定します。二つの32未満の非負数で、単位なしです。
キーワード値

値の上にマウスを当てると、各項目の実際の表示を確認できます。

カテゴリ CSS 値 説明
一般 auto 現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には text キーワードを指定した場合と同様です。
default default.gif プラットフォームに依存する既定のカーソルです。ふつうは矢印です。
none カーソルを表示しません。
リンクおよび状態 context-menu context-menu.png コンテキストメニューが利用できることを示します。
help help.gif ヘルプが使用可能であることを示します。
pointer pointer.gif カーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。
progress progress.gif バックグラウンドでプログラムがビジー状態dが、 (wait とは異なり) ユーザーがインターフェイスを操作可能であることを示します。
wait wait.gif プログラムがビジー状態で、 (progress とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。
選択 cell cell.gif 表のセルまたは一連のセルが選択できることを示します。
crosshair crosshair.gif 十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。
text text.gif テキストを選択可能であることを示します。通常、 I ビームが表示されます。
vertical-text vertical-text.gif 縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。
ドラッグ&ドロップ alias alias.gif エイリアスやショートカットが作成されることを示します。
copy copy.gif 何かがコピーされることを示します。
move move.gif 何かが移動されることを示します。
no-drop no-drop.gif 現在の位置にアイテムがドロップできないことを示します。
バグ 275173: Windows および Mac OS X では、 no-dropnot-allowed と同じです。
not-allowed not-allowed.gif 要求された操作が受け付けられないことを示します。
grab grab.gif 何かがグラブ (移動のためにドラッグ) することができることを示します。
grabbing grabbing.gif 何かがグラブ (移動のためにドラッグ) されようとしていることを示します。
サイズ変更&スクロール all-scroll all-scroll.gif 何かが任意の方向にスクロール (パン) 可能であることを示します。
バグ 275174: Windows では、 all-scrollmove 同じです。
col-resize col-resize.gif アイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。
row-resize row-resize.gif アイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。
n-resize 上方向へのサイズ変更カーソルの例 辺が移動できることを表します。例えば、 se-resize のカーソルはボックスの南東 (south-east) の角から移動を開始した時に使われます。
環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 n-resize および s-resizens-resize と同じです。
e-resize 右方向へのサイズ変更カーソルの例
s-resize 下方向へのサイズ変更カーソルの例
w-resize 左方向へのサイズ変更カーソルの例
ne-resize 右上方向へのサイズ変更カーソルの例
nw-resize 左上方向へのサイズ変更カーソルの例
se-resize 右下方向へのサイズ変更カーソルの例
sw-resize 左下方向へのサイズ変更カーソルの例
ew-resize 3-resize.gif 双方向へのサイズ変更が可能であることを示します。
ns-resize 6-resize.gif
nesw-resize 1-resize.gif
nwse-resize 4-resize.gif
拡大/縮小 zoom-in zoom-in.gif

拡大/縮小が可能であることを示す

zoom-out zoom-out.gif

使用上の注意

仕様書では cursor について寸法の制限は定義されていませんが、それぞれのユーザーエージェントには制限がある場合があります。ブラウザーが対応している寸法の範囲を超えた画像を使用してカーソルを変更しようとすると、一般的には単に無視されます。

カーソルの寸法の制限に関するメモは、ブラウザーの互換性の表をチェックしてください。

公式定義

初期値auto
適用対象すべての要素
継承あり
計算値指定通り、ただし url の値は絶対パスになる
アニメーションの種類離散値

形式文法

[ [ <url> [ <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 | grab | grabbing ] ]

カーソルの種類の設定

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* URL を使用する場合は、代替のキーワード値が必要です。 */
.baz {
  cursor: url("hyper.cur"), auto;
}

仕様書

仕様書 状態 備考
CSS Basic User Interface Module Level 3
cursor の定義
勧告 幾つかのキーワード、ポジション構文、 url() 関数形式の追加
CSS Level 2 (Revision 1)
cursor の定義
勧告 初回定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報