マウスなどのポインティングデバイスのカーソルの形状は、ブラウザが状況に応じて自動的に変更している。その形状を、スタイルシートのcursorプロパティで指定して、通常、リンク部分にカーソルを合わせると手の形になるところを、ヘルプを参照可能な状態を示す形状になるようにしたりできる。
cursorプロパティはすべての要素に適用可能で、body {cursor:wait}のように指定し、指定できるカーソル形状は１５種類ある。しかし、この例のように指定すると、リンク部分以外の通常は矢印のところすべてが処理中の状態を示す形状になってしまう（想像してみよう。ハッキリ言って気分悪いぞ）。このように、カーソル形状などのナビゲーションに関するスタイルを大幅に変えてしまうと、閲覧者を混乱させたり不安にさせてしまうので、指定の際はリンク部分のスタイルを指定するときと同様な配慮をした方がいい。サイトに特色を持たせるという他に特に理由もなくカーソル形状を変えるなんてことは、おすすめできない度１００％だ。特にbody要素のカーソルを変えてるサイトなんかは、それだけで退散してしまう確率９０％以上だな、私は。
「なんだ、要するに使うなってことかよ！」と思うのはまだ早い。まあ、そう慌てずに、順番に下の方まで読んでみそ。
カーソル形状は環境（OSやブラウザ）によって異なるが、ほとんど同じイメージの形状になります。説明の点線枠内にカーソルをのせるとカーソルがその値の形状に変わります。
- auto
- 初期値はこれで、ブラウザが状況に応じて自動的に変更します。
- default
- ブラウザのデフォルトのカーソル（一般的には矢印）になります。
- pointer
- リンク部分を示すカーソルになります。IE6.0未満では対応していません。
- crosshair
- クロスヘア（十字型）のカーソルになります。
- move
- 移動可能な状態を示すカーソルになります。
- text
- テキストを編集可能な状態を示すカーソルになります。
- wait
- 処理中であることを示すカーソルになります。
- help
- ヘルプを参照可能な状態を示すカーソルになります。
- n-resize
- IE5.5では、上方向へリサイズ可能な状態を示すカーソルになります。IE6.0、Netscape7.0、Opera7.11、以上では、逆方向の下向き矢印もついた、上下方向にリサイズ可能な状態を示す形状になります（以下のリサイズ可能な状態を示すカーソル形状も同様です）。
- s-resize
- 下方向へリサイズ可能な状態を示すカーソルになります。
- w-resize
- 左方向へリサイズ可能な状態を示すカーソルになります。
- e-resize
- 右方向へリサイズ可能な状態を示すカーソルになります。
- ne-resize
- 右上方向へリサイズ可能な状態を示すカーソルになります。
- nw-resize
- 左上方向へリサイズ可能な状態を示すカーソルになります。
- se-resize
- 右下方向へリサイズ可能な状態を示すカーソルになります。
- sw-resize
- 左下方向へリサイズ可能な状態を示すカーソルになります。
リサイズ可能な状態を示すカーソルの値の、n, s, w, e, は、それぞれ、北、南、西、東、を意味している。地図と同じく、北が上、東が右で、８方向を表します。
冒頭で述べたように、body要素にbody {cursor:wait}などと指定するのは論外だが、指定する要素の性質や内容によってカーソル形状を変えるのは悪いことではない。
例えば、a要素。a要素のリンク部分は閲覧者の反応（クリック）によって、ページを切り替えたり新たにウィンドウを開いたりもできる。ところが、パッと見ではそのリンクがどのような動作をするのか、また、リンク先はどんな内容や場所のページなのか等、判断するのは難しい。それらを、見てすぐわかるカーソル形状の変更で、閲覧者に分かってもらい易くするのは、むしろ良いことではないかと思うのだが、どうだろう？（って、訊くのかよ、おい！）。
このようなユーザビリティを考えるなら、TITLE属性で補足する方が理想的ではある。でも、どうせスタイルシートを使うなら、cursorプロパティを使用して、視覚的に分かり易いカーソル形状の変更という手法でもやってみようじゃないか。
a要素への使用例
TARGET属性に _blank を指定したa要素は、そのリンク先を新しいウィンドウに表示するわけだが、何の断りもなく勝手に新しいウィンドウを開くのは、あまりよろしくない。とは言え、新しいウィンドウや別ウィンドウにリンク先を表示させたい状況というのもあるだろう。しかもそういうリンクが大量にあったりしたらいちいち断り書きしておくのも面倒。そんな時は、例えば、newwin というクラスセレクタのcursorプロパティを e-resize に設定して、
.newwin {cursor:e-resize;}
カーソルを変えたいa要素のCLASS属性に newwin を指定する。
<a href="http://www.google.com/" target="_blank" class="newwin">ググる</a>
すると、ググる、となって、閲覧者はカーソルを見ただけで通常のリンクとは何か違うんだろうと予想することができる。
上記の「a要素への使用例」のように、リンクの動作やリンク先の内容、場所等に応じてカーソル形状を変えてみよう。また、a要素以外にも、ちょっと気の利いたことができる。部分的に、しかも理由があって、カーソル形状を変えるなら、閲覧者が戸惑うことも少なく、むしろ慣れてくれば便利にすら感じてもらえると思う。
a要素
リンクの動作やリンク先の内容等と、それに合ったカーソル形状のパターンを考えてみる。
- リンク先を新しいウィンドウで開く場合
- 右上向き矢印（ne-resize）あたりかな。
- JavaScriptでポップアップウィンドウを開く場合
- JavaScriptを無効にしている閲覧者もいるわけだし、JavaScriptでウィンドウを開きますよと教えておきましょう。とりあえず、移動可能形状（move）あたりで。
- リンク内容の語句等をキーワードとした検索結果を表示する場合。
- 例えば、Googleの検索結果にリンクするとか。そんな時はやはりヘルプ形状（help）。
- リンク内容の語句等を解説しているページを表示する場合。
- リンク内容が専門用語等で、それを解説しているページ、例えばASCII24 - アスキー デジタル用語辞典の用語解説ページや、自サイトの○○辞典てページへのリンク。カーソルはヘルプ形状が良い気がするが、そのページにズバリあるということでクロスヘアー（crosshair）でどうだ。
- リンク先が同ページ内の場合
- a要素のNAME属性による同ページ内へのリンクだったら、上あるいは下向き矢印。こういうリンクは一瞬どこへ飛んだのか分からなくなったりするんで、こうしておくと親切で良い。最近のIEやNetscape、Operaでは、上下向き矢印になってしまうが、古いブラウザのことも考えて、状況に合わせて、上向き（n-resize）と下向き（s-resize）のどちらかを指定しておいた方がいいでしょう。
- リンク先がサイト内の別ページの場合
- サイト内の別ページへのリンクだったら、右あるいは左向き矢印。最近のIEやNetscape、Operaでは、左右向き矢印になってしまうが、古いブラウザのことも考えて、状況に合わせて、右向き（e-resize）と左向き（w-resize）のどちらかを指定しておいた方がいいでしょう。「次へ」や読み進めた先の方のページへだったら右向きとかね。
- 非常に重いページやサイズの大きなファイルへのリンクの場合
- ページのファイルサイズでも、サーバのスペックや回線の関係でも何でもいい。とにかく表示するまで時間のかかる重いページやファイルへのリンクだったら、処理中形状（wait）にするとか。重いですよ〜、って（笑）。ま、これは洒落だけど。
その他の要素やコンテンツ
その他の要素と言ってもimg要素くらいしかなかった（汗。でも、コンテンツによってはこんなことも考えられるという例を１つ。
- img要素
- イラストや写真等を観賞してもらいたい場合、デフォルトの矢印だとちょっと目障りかも知れない（特に大きなサイズだと）。そこで、カーソルをクロスヘアー（crosshair）にしてみると……。ツールチップが邪魔なのは気にしないこと。
img {cursor:crosshair;}と指定すればすべてのimg要素でカーソル形状がクロスヘアーになる。
- テキストがメインのコンテンツの場合
- コンテンツが小説やコラムなどで、文字の密度や割り合いが高く、リンクもほとんどなく、文章だけに集中してもらいたいページ。こんなページもカーソルが文字に重なって邪魔になることがある。そこで、img要素の場合と同じくクロスヘアーにするかテキストカーソル（text）にすると、カーソルもそんなに邪魔にならない。カーソルを変える時は、カーソルを変えたい範囲をdiv要素の内容として、そのdiv要素でカーソル形状を指定しよう。