cursorプロパティは、ポインティングデバイス（マウスとか）の位置を示すカーソルの形状を指定します。

遊びで使われやすいプロパティですが、見た目上の変化だけを狙ったカーソルの変更は、使い勝手を悪くしたり、時にユーザーに不快感を与えてしまう恐れが有るので、むやみに使わないようにしましょう。

対応ブラウザ

• 
• 
• 
• 
• 
• 
• 

プロパティの解説

値

[ [<uri> ,]* [ auto｜crosshair｜default｜pointer｜move｜e-resize｜ne-resize｜nw-resize｜n-resize｜se-resize｜sw-resize｜s-resize｜w-resize｜text｜wait｜help｜progress ] ]｜inherit

初期値

auto

適用される要素

全ての要素

継承

します

パーセント値

N/A

メディア

visual, interactive

値の解説

auto

UA（ブラウザなど）が状況に応じて自動でカーソルを選択します。

crosshair

十字線のカーソル

default

プラットフォーム依存の標準のカーソル

pointer

リンクである事を示すポインタカーソル。通常は指の形。

move

対象が移動可能であることを示すカーソル。通常は十字に矢印が付いた形。

e-resize

ウィンドウなどの辺の右がリサイズ可能であることを示すカーソル。

ne-resize

ウィンドウなどの辺の右上がリサイズ可能であることを示すカーソル。

nw-resize

ウィンドウなどの辺の左上がリサイズ可能であることを示すカーソル。

n-resize

ウィンドウなどの辺の上がリサイズ可能であることを示すカーソル。

se-resize

ウィンドウなどの辺の右下がリサイズ可能であることを示すカーソル。

sw-resize

ウィンドウなどの辺の左下がリサイズ可能であることを示すカーソル。

s-resize

ウィンドウなどの辺の下がリサイズ可能であることを示すカーソル。

w-resize

ウィンドウなどの辺の左がリサイズ可能であることを示すカーソル。

text

テキストとして選択可能を示すカーソル。通常は「 I 」みたいな形。

wait

プログラムが動作中で、ユーザーが待機すべきことを示すカーソル。通常は砂時計の形。Vistaだとぐるぐる回る輪っか。

progress

プログラムが進行中ということを示すカーソル。waitと似ているが、ユーザーがプログラムを操作できる点が違います。通常は矢印付きの時計や砂時計の形が多いです。

help

ヘルプが利用できる事を示すカーソル。通常は「？」の形。

<uri>

ユーザーが用意した任意のカーソル画像をurl()関数で指定できます。この画像はカンマ（,）区切りで複数指定する事もできます。複数指定することで優先順を決められ先に指定したものが優先されます。また、上記のキーワードによる指定も一回だけする事ができます。

<uri>の補足

url()関数で指定した場合に扱える画像形式は、ブラウザが扱えれば何でも表示されるはずですが、ブラウザによって扱える画像形式に差が有ります。
IEでは .cur または .ani しかサポートしていませんが、GeckoやWebkitが .ani には対応していないようです。
Operaは、url()関数自体対応していません。
また、パスの書き方は本来background-imageプロパティなどと同じように、相対パスで問題なのですが、IEがCSSファイルからのパスではなくHTMLファイルからのパスになってしまうため、絶対パスで書くようにします。

カーソルの画像サイズに関しては仕様上の制限はありませんが、OSやプラットフォームでの互換を考慮し、最大で32 × 32pxにします。

cursorのサンプル

ul {
  margin: 0;
  padding: 20px 25px 10px;
}
ul li {
  margin: 0 0 10px;
  padding: 5px;
  list-style: none;
  background: #f2f2f2;
  border: 1px solid #ccc;
}
li.cursor01 {
  cursor: auto;
}
li.cursor02 {
  cursor: crosshair;
}
li.cursor03 {
  cursor: default;
}
li.cursor04 {
  cursor: pointer;
}
li.cursor05 {
  cursor: move;
}
li.cursor06 {
  cursor: e-resize;
}
li.cursor07 {
  cursor: ne-resize;
}
li.cursor08 {
  cursor: nw-resize;
}
li.cursor09 {
  cursor: n-resize;
}
li.cursor10 {
  cursor: se-resize;
}
li.cursor11 {
  cursor: sw-resize;
}
li.cursor12 {
  cursor: s-resize;
}
li.cursor13 {
  cursor: w-resize;
}
li.cursor14 {
  cursor: text;
}
li.cursor15 {
  cursor: wait;
}
li.cursor16 {
  cursor: help;
}
li.cursor17 {
  cursor: progress;
}
li.cursor18 {
  cursor: url(/img/property/click.cur), url(/img/property/clap.cur), pointer;
}

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示

• cursorプロパティの値がautoのカーソルになります。
• cursorプロパティの値がcrosshairのカーソルになります。
• cursorプロパティの値がdefaultのカーソルになります。
• cursorプロパティの値がpointerのカーソルになります。
• cursorプロパティの値がmoveのカーソルになります。
• cursorプロパティの値がe-resizeのカーソルになります。
• cursorプロパティの値がne-resizeのカーソルになります。
• cursorプロパティの値がnw-resizeのカーソルになります。
• cursorプロパティの値がn-resizeのカーソルになります。
• cursorプロパティの値がse-resizeのカーソルになります。
• cursorプロパティの値がsw-resizeのカーソルになります。
• cursorプロパティの値がs-resizeのカーソルになります。
• cursorプロパティの値がw-resizeのカーソルになります。
• cursorプロパティの値がtextのカーソルになります。
• cursorプロパティの値がwaitのカーソルになります。
• cursorプロパティの値がhelpのカーソルになります。
• cursorプロパティの値がprogressのカーソルになります。
• cursorプロパティの値がuriのカーソルになります。

オリジナルで用意したカーソル画像を見てどんな気持ちになったとしても、見なかった事にするのが大人です！

cursorの謎サンプル

サンプルのブラウザ上の表示

・・）ｂ click!

この謎サンプルの詳細が見たい

これは、Firefox独自拡張の値を使ったサンプルです。なので、何もならなかった人はFirefoxで見てください。

・・・・

はい。見てきましたね。
たまには、こんなくだらない事もやりたくなりますよねー！

使ってる値は、-moz-grabと-moz-grabbingです。
これは狙った独自拡張・・・だよね？教えてエロい人！！