CSSでマウスポインタを変更する方法

カーソルの変更は、世界で最も人気のあるプロパティではないかもしれませんが、それでも開発者にとっては便利なツールです。ブラウザはリンクやドラッグ可能なアイテムなどの特定のオブジェクトのカーソルを自動的に変更しますが、開発者は目的のカーソルを具体的に指定することでより良い結果を得ることができます。

CSSでマウスポイントを変更する

カーソルの外観は、カーソルのCSSプロパティによって制御されます。このプロパティは、ユーザーがオブジェクトの上にマウスを置いたときにレンダリングされるカーソルのタイプを制御します。たとえば、以下のクラスに関連付けられているオブジェクトにマウスを合わせると、4方向のドラッグ矢印が生成されます。

.cursor { cursor: move;}

オブジェクトにマウスを合わせると、ユーザーには次のようなカーソルが表示されます。

CSSの標準カーソルオプション

カーソルの使用法に合わせて設定できるさまざまなカーソルオプションがあります。リストに表示されている「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の背後にあるウィザードであるChrisCoyierは、CSSのさまざまなカーソルオプションをアピールするためにこのDoodleを作成しました。

画像をカーソルとして使用する

多くの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ではそれほど信頼性がありませんが、他のブラウザではうまく機能します。

デフォルトでは、カーソルの「ホットスポット」は画像の左上隅に設定されます。別の「ホットスポット」を示すには、カーソル呼び出しで（X、Y）座標ペアを指定します。以下のこの例では、左上を（0,0）として使用して、ホットスポットを（3,3）として設定します。

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

結論：これらの属性の使用

Webサイトを開発している場合は、これらのCSSプロパティをサイト上の任意のオブジェクトに追加して、オブジェクトにマウスを合わせたときにユーザーに表示されるカーソルを変更できます。もっと冒険したい場合は、Stylus、TamperMonkey、GreaseMonkeyなどのブラウザ拡張機能を使用して、ウェブサイト上で任意のCSSを実行することもできます。このようにして、いつでもどこでも独自のカスタムカーソルを表示できます。