cursor

2025年4月5日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は、CSSのcursorについて調べました。

cursorとは

参考：MDN｜cursor

参考：サルワカ｜【CSS】cursorの使い方：カーソル形状の変え方と値一覧

cursorとは、マウスカーソルの形を変えるプロパティです。

「カーソル」って日本語だと何ていうんでしょうね。「指標」とか「位置指定」とかですかね。

cursor一覧

形状	名称	意味
	alias	ショートカット
	all-scroll	全方向にスクロール
	auto	初期値 状況に応じて変わる
	cell	表のセルを選択
	col-resize	幅を変更
	context-menu	右クリックでメニューが出る？
	copy	コピー
	crosshair	範囲選択
	default	矢印
	e-resize	右のサイズ変更
	ew-resize	左右のサイズ変更
	grab	掴める
	grabbing	掴んでいる
	help	ヘルプ
	move	動かせる
	ne-resize	右上へのサイズ変更
	nesw-resize	右上・左下へのサイズ変更
	no-drop	ドロップできない
	none	カーソル非表示
	not-allowed	操作できない
	n-resize	上へのサイズ変更
	ns-resize	上下へのサイズ変更
	nw-resize	左上へのサイズ変更
	nwse-resize	左上・右下へのサイズ変更
	pointer	指差し
	progress	処理中だが操作はできる
	row-resize	高さを変更
	se-resize	右下へのサイズ変更
	s-resize	下へのサイズ変更
	sw-resize	左下へのサイズ変更
	text	テキスト
	vertical-text	縦書きテキスト
	wait	処理中で操作できない
	w-resize	左へのサイズ変更
	zoom-in	拡大
	zoom-out	縮小

Windows11のChromeで調べました。

Windowsだと見た目が同じものがいくつかありますね。Macだとまた違うみたいです。

「context-menu」だけよくわかりませんでした。

まとめ

いろいろあるけど、autoかpointerしか使わないかな・・・