cursor
CSSの書き方
cursor:値 ;
| CSSの詳細情報 | |||||
|---|---|---|---|---|---|
| プロパティ名 | cursor | 読み方 | カーソル | ||
| 初期値 | auto | 意味 | マウスカーソルの形状を変える | ||
| 値 | auto/default/crroshair…etc（表を参照） | ||||
| 対象 | すべての要素 | ||||
| CSSレベル | CSSレベル2 | 対応ブラウザ | Windows | MAC | |
| 継承 | する | IE 5.0以上/FF1.0/NS7.1/OP8.0 | SF/IE5.0 | ||
解説
「cursor」プロパティは、ページ上で表示されるマウスポインタ（カーソル）の種類を変えることができるスタイルシートです。
通常、マウスカーソルは矢印で表示されますが、リンクの上にきたときや入力中のはそれぞれ異なる種類のカーソルが表示されるはずです。
これらカーソルの種類を要素ごとに変えることができます。
値
「cursor」プロパティで指定できるカーソルの種類に割り当てられた値は、以下の表のようになっています。
以下はWindows系のOSのポインタの一例です。
OSやブラウザによって表示されるカーソルの形状は異なります。
| 値 | カーソル形状 | ポインタ例 |
|---|---|---|
| auto | WEBブラウザに依存 |  |
| default | 標準のカーソル | |
| crosshair | 十字 |  |
| pointer | ポインタ |  |
| move | 移動 |  |
| text | 入力中 |  |
| wait | 動作待ち |  |
| help | ヘルプ |  |
| n-resize | 上方向にサイズ変更 |  |
| s-resize | 下方向にサイズ変更 | |
| w-resize | 左方向にサイズ変更 |  |
| e-resize | 右方向にサイズ変更 | |
| nw-resize | 左上方向にサイズ変更 |  |
| ne-resize | 右上方向にサイズ変更 |  |
| sw-resize | 左下方向にサイズ変更 | |
| se-resize | 右下方向にサイズ変更 | |
IE独自のカーソル
また、以下の表はInternetExplorer6.0限定のカーソルです。
IEの6.0以外のバージョン、または他のブラウザには対応していません。
| 値 | カーソル形状 | ポインタ例 |
|---|---|---|
| hand | 手の形 | |
| no-drop | クリック禁止 |  |
| all-scroll | 全方向でスクロール可能 |  |
| col-resize | 列幅のサイズ変更 |  |
| row-resize | 行の高さのサイズ変更 |  |
| progress | 動作中 |  |
| not-allowed | 禁止 |  |
| vertical-text | 縦書きテキストの入力中 |  |
CSS/HTMLサンプル
p { cursor:crosshair; width:400px; background-color:#ffdff9; }
マウスポインタが段落要素の上にきたときカーソル形状を十字に サンプル
