プログラミング

cursorでマウスポインターの形状を指定する【CSS】

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