CSSでカーソルの形状を変える方法と「cursor」の値一覧

CSSでカーソルの種類を変える方法と値一覧

CSSではマウスカーソルの形状を自由に変えることができます。今回はその方法と各形状のブラウザ対応状況をまとめておきます。

1. カーソルの形状を変える方法

cursorプロパティの指定によりマウスカーソルの形状を変えることができます。

{cursor: 値;}

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

HTML
<a href="https://saruwakakun.com/">サルワカとは?</a>
CSS
a {cursor: help}
ブラウザ表示

サルワカとは?


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

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

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

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

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

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

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

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

CSS
/*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となるわけです。

サルワカくんの顔(通常)
サルワカくん

ここまでたくさんの値を紹介してきました。「ユーザーが直感的にどんな操作をするべきなのか分かる」ようなカーソルを選ぶことが重要ですね。

サルワカ