マウスカーソルを指定する方法

CSSを使用した記述方法

記述方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<p style="cursor: auto;">ブラウザが自動的に選択</p>
<p style="cursor: default;">利用環境の標準</p>
<p style="cursor: pointer;">リンク</p>
<p style="cursor: crosshair;">十字</p>
<p style="cursor: move;">移動</p>
<p style="cursor: text;">テキスト編集</p>
<p style="cursor: wait;">待機・処理中</p>
<p style="cursor: help;">ヘルプ</p>
<p style="cursor: n-resize;">北方向のリサイズ</p>
<p style="cursor: s-resize;">南方向のリサイズ</p>
<p style="cursor: w-resize;">西方向のリサイズ</p>
<p style="cursor: e-resize;">東方向のリサイズ</p>
<p style="cursor: ne-resize;">北東方向のリサイズ</p>
<p style="cursor: nw-resize;">北西方向のリサイズ</p>
<p style="cursor: se-resize;">南東方向のリサイズ</p>
<p style="cursor: sw-resize;">南西方向のリサイズ</p> 
<p style="cursor: hand;">指型</p> 
<p style="cursor: no-drop;">ドロップ禁止(IE6以上)</p>
<p style="cursor: all-scroll;">全スクロール(IE6以上)</p>
<p style="cursor: col-resize;">横方向のリサイズ(IE6以上)</p>
<p style="cursor: row-resize;">縦方向のリサイズ</p>
<p style="cursor: progress;">進行中(IE6以上)</p>
<p style="cursor: not-allowed;">禁止(IE6以上)</p>
<p style="cursor: vertical-text;">縦書き(IE6以上)</p>
<p style="cursor: url('./samp.ani');">オリジナルカーソル(IE6以上)</p>
</body>
</html>

表示サンプル

別窓でサンプルページが開きます。
サンプルは見やすいように少し加工しています。

解説

マウスカーソルの形状を指定することができます。サンプルを開きそれぞれにマウスカーソルをあててみて下さい。今回は「DIV」タグに指定をしましたが、「P」「SPAN」「IMG」「A」「TD」などなどにも指定することができます。オリジナルカーソルも指定することができますが、使用できるファイル形式は「.CUR」と「.ANI」のみです。