PR
用途 カーソルの外観を指定する

[ [<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 ] ] | inherit

対象となる要素 すべて
解説

マウスやコントローラなどのポインティングデバイスの位置を示す、カーソルの外観を指定します。同じ値を適用しても、レンダリング後の外観はOSやブラウザによりスタイルがやや異なりますが、形の持つ意味合いは同じです。リンク指定した個所に設定するのはもちろんのこと、pやdivなどでマークアップした文字要素に対して適用することも考えられます。

本プロパティで指定可能な値は以下の通りです。カーソルの外観は「リンクボタン」にカーソルを重ねて確認してください。

スタイルの記述とカーソルの形

auto
これが初期値です。OSで標準の矢印や、ブラウザ標準の指カーソルになることが多いです。
<a href="#" style="cursor:auto"></a>

sample

crosshair
十字キーとしてレンダリングされます。画像編集ツールでは画像の上でクリックドラッグで広範囲を選択する際、このスタイルのカーソルが適用されます。そのため十字キーを「広範囲の選択」という意味に捉えているユーザは多いでしょう。
<a href="#" style="cursor:crosshair"></a>

sample

default
OSのデフォルトのカーソルとしてレンダリングされます。auto同様矢印になることが多いです。
<a href="#" style="cursor:default"></a>

sample

pointer
リンクを示すポインターの形になります。HTMLでリンク設定した個所に、スタイルなしでも適用される指カーソルが出ます。
<a href="#" style="cursor:pointer"></a>

sample

move
ポイントした対象がクリックドラッグなどの操作で移動可能なことを示します。手のひらカーソルや十字の移動キーが出ます。
<a href="#" style="cursor:move"></a>

sample

e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
ポイントした「辺」がクリックドラッグなどの操作で移動可能なことを示します。移動方向に適した矢印付きのスタイルになります。

左から
<a href="#" style="cursor:e-resize"></a>
<a href="#" style="cursor:ne-resize"></a>
<a href="#" style="cursor:nw-resize"></a>
<a href="#" style="cursor:n-resize"></a>
左から
<a href="#" style="cursor:se-resize"></a>
<a href="#" style="cursor:sw-resize"></a>
<a href="#" style="cursor:s-resize"></a>
<a href="#" style="cursor:w-resize"></a>

sample sample sample sample

sample sample sample sample

text
テキストを選択する際になじみのあるスタイルのカーソルとなります。
<a href="#" style="cursor:text"></a>

sample

wait
プログラムが計算中であることを示す時計などのカーソルになります。送信ボタンを押した後などこのカーソルが適用されると2度押しなどの操作を避けられるかもしれません。単なるリンク個所でこのカーソルが出ると、不具合が起こったように見えてしまうかもしれません。
<a href="#" style="cursor:wait"></a>

sample

progress
wait同様プログラムなどが実行中であることを示します。時計などのカーソルになります。 <a href="#" style="cursor:progress"></a>

sample

help
疑問符付きのカーソルになります。説明書きの個所などに適用すると、操作が分かりやすくなります。
<a href="#" style="cursor:help"></a>

sample

<uri>
カーソルの形をネット上の画像ファイルなどとして表示します。Windows向けに.curや.aniといったカーソル用画像ファイルが指定できます。しかしカーソルファイルに対応していないクライアントのために、uri指定の後は必ずカンマ区切りでdefaultなどの指定をいれます。
<a href="#" style="cursor:url(cur.gif), default"></a>

sample

値の表記について

  1. CSS2のプロパティは解説の中で<color>など単位の表記と混同することを避ける目的でSingle Quotation(')で囲っています。
  2. Box bracket [ ] は、各プロパティに指定可能な値をグループ化しています。
  3. Bar | は各プロパティに指定可能な値を区切っています。
  4. 2重のBar || は各プロパティに指定可能な値のグループ、または個別の特性を持つプロパティを区切っています。
  5. inheritは親要素のプロパティが継承できる種類であることを意味します。
  6. <length>や<color>、<percentage>などAngle brackets < > で囲ったものは、それぞれ単位を採用できる値です。
  7. <margin-width>{1,4}のように単位がBraces { }で囲った整数を伴う場合は、その数だけ単位の指定が可能です。例の場合は単位を上、下、左、右のように1つ以上、4つ以下で単位を複数指定できる、という意味になります。
  8. <length>? のように単位が疑問符を伴う場合は、単位を0または1つだけ指定できる、という意味になります。
  9. [<uri> ,]* のように単位がAsteriskを伴う場合は、単位を0以上指定できます。つまり指定しなくても良い、または必要あれば可能な限り指定できるという意味です。
  10. [ <identifier> <integer>? ]+ のように単位(のグループ)がPlus + を伴う場合は、単位を必要あれば可能な限り指定できるという意味です。例の場合は識別子と整数(1つだけ)のセットを必要なだけ指定できる、となります。