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

1. CSSのcursorでカーソル形状を変える

CSSのcursorプロパティにより、マウスカーソルの形状を変えることができます。具体的には以下のような指定をします。

◯◯には「何にカーソルをのせたときに形状を変えるか」ということを示すセレクタを書きます。

CSSのセレクタとは？覚えておきたい25種類と書き方

値には「カーソルを具体的にどんな形にするのか」を書きます。cursorで取ることのできる値は後ほどまとめて紹介します。

「このボタンの上にカーソルをのせたときには、カーソルを 指にする」というような指定ができるわけですね。

cursorの使用例

たとえば、リンク（aタグ）にカーソルをあてると「はてなマーク」になるようにしてみましょう。はてなマークの値はhelpです。

<a href="https://saruwakakun.com/">サルワカとは？</a>

a {cursor: help}

「サルワカとは？」にカーソルをあてるとはてなマークが表示されるはずです。このようにCSSで要素ごとに自由にマウスカーソルの形状を指定することができます。この例はaタグでしたが、divやpなどの他のタグにも使うことができます。うまく使えば直感的に分かりやすい表現ができるわけですね。

2. cursorの値一覧とブラウザの対応状況

「どんな値を取ることができるのか」とブラウザの対応状況をまとめました。よく使われそうなものから並べています。値名にカーソルをあてると実際の表示が確認できます。

右にスクロールできるかもです

cursor:	表示	解説	IE	Chrome	Safari	FireFox	Opera
auto	–	初期値。状況に応じて変わる。リンクならpointerに文字ならtextに。	◯	◯	◯	◯	◯
default		普通の矢印。	◯	◯	◯	◯	◯
pointer		指差しの手に。主にリンクで使われる。	◯	◯	◯	◯	◯
move		十字の矢印。移動させられる物を示すのに便利。	◯	◯	◯	◯	◯
text		Iビーム。主にテキスト用	◯	◯	◯	◯	◯
crosshair		十字。選択範囲を作る動作に使えそう。	◯	◯	◯	◯	◯
cell		Excelのセル選択風。	◯	◯	◯	◯	◯
help		クエスチョンマーク。Windowsだと矢印カーソルと一緒に表示される。	◯	◯	◯	◯	◯
grab		基本的にgrabbingとセットで使う。		◯	◯	◯	◯
grabbing		grabとセットで使う。:activeに指定することで掴むような動作に。		◯	◯	◯	◯
zoom-in		拡大できるものを表すのに使える。		◯	◯	◯	◯
zoom-out		縮小できるものを表すのに使える。		◯	◯	◯	◯
not-allowed		操作できないことを表すのに便利。	◯	◯	◯	◯	◯
wait		ぐるぐる or 砂時計。処理中で操作ができないことを表すのに便利	◯	◯	◯	◯	◯
progress		矢印＋ぐるぐるor砂時計。処理中だが操作はできるときを表す。 新しいMacだと矢印なしのぐるぐだけ。	◯	◯	◯	◯	◯
none		カーソルが非表示に。	◯	◯	◯	◯	◯
alias		ショートカットを連想させるもの。	◯	◯	◯	◯	◯
context-menu		メニューアイコン＋矢印。	◯	◯	◯	Mac のみ	◯
vertical-text		縦書きテキストの選択用。	◯	◯	◯	◯	◯
n-resize		上へのサイズ変更用。	◯	◯	◯	◯	◯
e-resize		右へのサイズ変更用。	◯	◯	◯	◯	◯
s-resize		下へのサイズ変更用。	◯	◯	◯	◯	◯
w-resize		左へのサイズ変更用。	◯	◯	◯	◯	◯
nw-resize		左上へのサイズ変更用。	◯	◯	◯	◯	◯
ne-resize		右上へのサイズ変更用。	◯	◯	◯	◯	◯
se-resize		右下へのサイズ変更用。	◯	◯	◯	◯	◯
sw-resize		左下へのサイズ変更用	◯	◯	◯	◯	◯
ew-resize		左右のサイズ変更用。	◯	◯	◯	◯	◯
ns-resize		上下のサイズ変更用。	◯	◯	◯	◯	◯
nesw-resize		斜めのサイズ変更用。	◯	◯	◯	◯	◯
nwse-resize		斜めのサイズ変更用。	◯	◯	◯	◯	◯
col-resize		幅を変更するとき用。	◯	◯	◯	◯	◯
row-resize		高さを変更するとき用。	◯	◯	◯	◯	◯
all-scroll		全方向にドラッグしてスクロールする用。	◯	◯	◯	◯	◯
copy		矢印の横に＋マーク。コピーできるものを表すのに便利	◯	◯	◯	◯	◯
no-drop		矢印＋禁止マーク。ドロップできない領域を表す用。	◯	◯	◯	◯	◯

表示はMacのGoogle Chromeで見た場合です。 解説文はあくまでも使い方の一例です。目的に合った値を選ぶのが良いですね。

grabとgrabbingを使うときは接頭辞をつける

grabとgrabbingを指定したいときは、ベンダープレフィックス（接頭辞）をつけましょう。これはChromeや、Safari、Firefoxに対応させるために必要なおまじないのようなものです。具体的には以下のように書きましょう。

/*grabの場合*/
a {
	cursor:-moz-grab;
	cursor:-webkit-grab;
	cursor: grab;
}

/*grabbingの場合*/
a {
	cursor:-moz-grabbing;
	cursor:-webkit-grabbing;
	cursor: grabbing;
}

ただしこのように書いてもInternet Explorerは非対応のままです…。

対応していなかった場合どうなるの？

たとえばcursor: grabを指定したとき、非対応のWindowsではどのように表示されるのでしょうか。答えは、auto（初期値）のカーソルなります。つまりリンクならpointerになり、テキストならtextとなるわけです。