CSSのcursorプロパティでマウスポインタを変更する方法

カーソルの変更は、CSSの中でも特に注目されるプロパティではありませんが、開発者にとって便利なツールであることに変わりありません。リンクやドラッグ可能な要素など、一部のオブジェクトについてはブラウザが自動的にカーソルを切り替えてくれますが、意図したカーソルを明示的に指定することで、より良いユーザー体験を実現できます。

CSSでマウスポインタを変更する基本

カーソルの見た目は、CSSのcursorプロパティによって制御されます。このプロパティは、ユーザーがオブジェクトにマウスを重ねたときに表示されるカーソルの種類を指定します。例えば、以下のクラスが適用された要素にマウスを重ねると、四方向の移動矢印が表示されます。

.cursor { cursor: move; }

この要素にマウスを重ねると、次のようなカーソルが表示されます。

CSSで指定できる標準カーソルの一覧

cursorプロパティには、実にさまざまな値を設定できます。一覧にある「N」「S」「W」「E」は、それぞれ北・南・西・東の方角を表しています。例えば、cursor: e-resize;と指定すると、右側（東側）に矢印のあるリサイズ用カーソルが表示されます。

.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: grab;}
.grabbing {cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur), auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}

CSS-Tricks.comの運営者として知られるChris Coyier氏は、CSSのさまざまなカーソルオプションを分かりやすく紹介するために、このイラストを作成しました。

画像をカーソルとして使う方法

他の多くのCSSプロパティと同様に、cursorプロパティでもURLを指定してカスタムカーソルを設定できます。例えば、以下のクラスでは、指定した画像がそのままカーソルとして使用されます。

.cursor {cursor: url('path/to/image.png'), auto;}

末尾のautoはフォールバック（代替）カーソルの指定です。autoを指定すると、ブラウザがそのオブジェクトに対して通常表示するカーソルが表示されます。また、カンマ区切りのリストで複数の画像を指定したり、任意の標準カーソルをフォールバックとして指定することも可能です。

.cursor {cursor: url(cursor.svg), url(path/to/image.png), wait;}

なお、GIF、SVG、PNGなどのアニメーションカーソルは、ブラウザではサポートされていません。ただし、透過PNGは現在普及している主要なWebブラウザすべてで問題なく動作します。SVGはFirefoxでの表示が不安定になる場合がありますが、他のブラウザでは良好に動作します。

デフォルトでは、カーソルの「ホットスポット」（クリック判定の基準点）は画像の左上隅に設定されます。別の場所をホットスポットにしたい場合は、cursorの指定時に(X,Y)座標ペアを追加します。以下の例では、左上を(0,0)として、ホットスポットを(3,3)に設定しています。

.cursor {cursor: url(cursor.svg) 3 3, pointer;}

まとめ：これらの属性の活用方法

Webサイトを開発しているなら、サイト上の任意の要素にこれらのCSSプロパティを追加するだけで、マウスを重ねたときに表示されるカーソルを自由に変更できます。さらに踏み込んだ使い方としては、Stylus、TamperMonkey、GreaseMonkeyといったブラウザ拡張機能を利用すれば、既存のWebサイトの上に独自のCSSを適用することも可能です。これにより、好きなときに好きな場所でオリジナルのカスタムカーソルを表示できるようになります。