cursorプロパティは、マウスポインター(カーソル)の形状を指定するプロパティです。
{cursor: 画像 位置 種類;}
cursorの値の指定方法
マウスポインターとして使いたい画像をurlで指定することができます。
画像を指定するときは、マウスポインターの位置を2つの値で指定し、1つ目の値は水平方向、2つ目の値は垂直方向の位置を記述します。
指定した値が1つの場合は、水平方向と垂直方向の両方に同じ値が適用されます。
マウスポインターの種類
画像以外、もしくは画像が表示されなかった場合のために、以下のようにマウスポインターの種類を指定します。
| auto | ブラウザによって自動で選択される適切なポインター |
|---|---|
| default | 矢印型の標準ポインター |
| context-menu | コンテキストメニューアイコン付きポインター |
| help | クエスチョンマークのポインター |
| pointer | 指差しマークのポインター |
| progress | データ処理中(待機中)マークのポインター |
| wait | データ処理中(待機中)マークのポインター |
| cell | 十字マークのポインター |
| crosshair | 十字マークのポインター |
| text | テキスト編集マークのポインター |
| virtical-text | 縦書きマークのポインター |
| alias | エイリアス作成マークのポインター |
| copy | プラスマークのポインター |
| move | 矢印十字マークのポインター |
| no-drop | 禁止マークのポインター |
| not-allowed | 禁止マークのポインター |
| n-resize | 上(北)方向のリサイズポインター |
| ne-resize | 右上(北東)方向のリサイズポインター |
| e-resize | 右(東)方向のリサイズポインター |
| se-resize | 右下(南東)方向のリサイズポインター |
| s-resize | 下(南)方向のリサイズポインター |
| sw-resize | 左下(南西)方向のリサイズポインター |
| w-resize | 左(西)方向のリサイズポインター |
| nw-resize | 左上(北西)方向のリサイズポインター |
| ew-resize | 左右方向のリサイズポインター |
| ns-resize | 上下方向のリサイズポインター |
| nesw-resize | 右上左下方向のリサイズポインター |
| nwse-resize | 左上右下方向のリサイズポインター |
| col-resize | 列幅変更マークのポインター |
| row-resize | 行幅変更マークのポインター |
| all-scroll | 全スクロールのポインター |
| zoom-in | 拡大マークのポインター |
| zoom-out | 縮小マークのポインター |
それぞれのキーワード部分にカーソルを合わせると、ポインターが表示されます。
Leave a Comment