cursorプロパティは、マウスカーソルの形状を指定する際に使用します。
下の使用例にある値の中には、ブラウザにより対応していないものもあるので注意してください。
尚、オリジナルカーソルに使用できるファイル形式には、.CUR(カーソルファイル)と.ANI(アニメーションカーソルファイル)があります。
■使用例
HTMLソース
<ul>
<li style=”cursor: auto”>auto ブラウザが自動的に選択したカーソル</li>
<li style=”cursor: default”>default 矢印型など利用環境の標準カーソル</li>
<li style=”cursor: pointer”>pointer リンクカーソル</li>
<li style=”cursor: crosshair”>crosshair 十字カーソル</li>
<li style=”cursor: move”>move 移動カーソル</li>
<li style=”cursor: text”>text テキスト編集カーソル</li>
<li style=”cursor: wait”>wait 待機・処理中カーソル</li>
<li style=”cursor: help”>help ヘルプカーソル</li>
<li style=”cursor: n-resize”>n-resize 北方向のリサイズカーソル</li>
<li style=”cursor: s-resize”>s-resize 南方向のリサイズカーソル</li>
<li style=”cursor: w-resize”>w-resize 西方向のリサイズカーソル</li>
<li style=”cursor: e-resize”>e-resize 東方向のリサイズカーソル</li>
<li style=”cursor: ne-resize;”>ne-resize 北東方向のリサイズカーソル</li>
<li style=”cursor: nw-resize;”>nw-resize 北西方向のリサイズカーソル</li>
<li style=”cursor: se-resize”>se-resize 南東方向のリサイズカーソル</li>
<li style=”cursor: sw-resize;”>sw-resize 南西方向のリサイズカーソル</li>
<li style=”cursor: progress”>progress 進行中カーソル(CSS 2.1より仕様に追加)</li>
<li style=”cursor: url(‘../images/htmq.cur’)”>url(‘ファイルのパス’) オリジナルのカーソル</li>
<li style=”cursor: hand”>hand 指型カーソル(IE4以上の独自拡張)</li>
<li style=”cursor: no-drop”>no-drop ドロップ禁止カーソル(IE6以上の独自拡張)</li>
<li style=”cursor: all-scroll”>all-scroll 全スクロールカーソル(IE6以上の独自拡張)</li>
<li style=”cursor: col-resize”>col-resize 横方向のリサイズカーソル(IE6以上の独自拡張)</li>
<li style=”cursor: row-resize”>row-resize 縦方向のリサイズカーソル(IE6以上の独自拡張)</li>
<li style=”cursor: not-allowed”>not-allowed 禁止カーソル(IE6以上の独自拡張)</li>
<li style=”cursor: vertical-text”>vertical-text 縦書きカーソル(IE6以上の独自拡張)</li>
</ul>
ブラウザ上の表示
- auto ブラウザが自動的に選択したカーソル
- default 矢印型など利用環境の標準カーソル
- pointer リンクカーソル
- crosshair 十字カーソル
- move 移動カーソル
- text テキスト編集カーソル
- wait 待機・処理中カーソル
- help ヘルプカーソル
- n-resize 北方向のリサイズカーソル
- s-resize 南方向のリサイズカーソル
- w-resize 西方向のリサイズカーソル
- e-resize 東方向のリサイズカーソル
- ne-resize 北東方向のリサイズカーソル
- nw-resize 北西方向のリサイズカーソル
- se-resize 南東方向のリサイズカーソル
- sw-resize 南西方向のリサイズカーソル
- progress 進行中カーソル(CSS 2.1より仕様に追加)
- url(‘ファイルのパス’) オリジナルのカーソル
- hand 指型カーソル(IE4以上の独自拡張)
- no-drop ドロップ禁止カーソル(IE6以上の独自拡張)
- all-scroll 全スクロールカーソル(IE6以上の独自拡張)
- col-resize 横方向のリサイズカーソル(IE6以上の独自拡張)
- row-resize 縦方向のリサイズカーソル(IE6以上の独自拡張)
- not-allowed 禁止カーソル(IE6以上の独自拡張)
- vertical-text 縦書きカーソル(IE6以上の独自拡張)