Cursor styles
cursor は CSS のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルを設定します。
カーソル設定により、テキスト選択、ヘルプやコンテキストメニューの有効化、コンテンツのコピー、表のリサイズなど、現在の位置で実行できるマウス操作をユーザーに知らせるべきです。 キーワードを使用してカーソルの種類を指定するか、使用する固有のアイコンを読み込むことができます（オプションで代替画像、そして最終的なフォールバックとしてキーワードが必須です）。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1.2 | 18 | 13.4 | |
alias | 1 | 12 | 1.5 | 3 | 18 | |
all-scroll | 1 | 12 | 1.5 | 3 | 18 | |
auto | 1 | 12 | 1 | 1.2 | 18 | 13.4 |
cell | 1 | 12 | 1.5 | 3 | 18 | 13.4 |
col-resize | 1 | 12 | 1.5 | 3 | 18 | |
context-menu | 1 | 12 | 1.5 | 3 | 18 | |
copy | 1 | 12 | 1.5 | 3 | 18 | |
crosshair | 1 | 12 | 1 | 1.2 | 18 | |
default | 1 | 12 | 1 | 1.2 | 18 | |
e-resize | 1 | 12 | 1 | 1.2 | 18 | |
ew-resize | 1 | 12 | 1.5 | 3 | 18 | |
grab カーソルのグラブ (`grab` および `grabbing`) | 68 | 14 | 27 | 11 | 68 | |
grabbing | 68 | 79 | 27 | 11 | 68 | |
help | 1 | 12 | 1 | 1.2 | 18 | |
move | 1 | 12 | 1 | 1.2 | 18 | |
n-resize | 1 | 12 | 1 | 1.2 | 18 | |
ne-resize | 1 | 12 | 1 | 1.2 | 18 | |
nesw-resize | 1 | 12 | 1.5 | 3 | 18 | |
no-drop | 1 | 12 | 1.5 | 3 | 18 | |
none | 5 | 12 | 3 | 5 | 18 | |
not-allowed | 1 | 12 | 1.5 | 3 | 18 | |
ns-resize | 1 | 12 | 1.5 | 3 | 18 | |
nw-resize | 1 | 12 | 1 | 1.2 | 18 | |
nwse-resize | 1 | 12 | 1.5 | 3 | 18 | |
pointer | 1 | 12 | 1 | 1.2 | 18 | |
progress | 1 | 12 | 1 | 1.2 | 18 | |
row-resize | 1 | 12 | 1.5 | 3 | 18 | |
s-resize | 1 | 12 | 1 | 1.2 | 18 | |
se-resize | 1 | 12 | 1 | 1.2 | 18 | |
sw-resize | 1 | 12 | 1 | 1.2 | 18 | |
text | 1 | 12 | 1 | 1.2 | 18 | 13.4 |
url `url()` | 1 | 12 | 1.5 | 3 | 18 | 13.4 |
url positioning syntax `url()` 位置指定構文 | 1 | 79 | 1.5 | 3 | 18 | |
vertical-text | 1 | 12 | 1.5 | 3 | 18 | |
w-resize | 1 | 12 | 1 | 1.2 | 18 | |
wait | 1 | 12 | 1 | 1.2 | 18 | |
zoom-in | 37 | 12 | 24 | 9 | 37 | |
zoom-out | 37 | 12 | 24 | 9 | 37 | |
| その他 | ||||||
| cursor 属性は、マウスポインタが要素の上にあるときに表示されるマウスカーソルを指定します。 | 1 | 12 | 1 | 1.2 | 18 | 1 |
注釈 1件
実装メモ
- Firefox 67 以降、カーソルは特定の悪意のあるサイトによって悪用されるため、カスタム カーソルに許可される最大サイズは 32x32 ピクセルです。
注釈 2件
実装メモ
- このプロパティは、外部ポインティング デバイスを備えた iPad でのみサポートされます。
- サポートされていない値は、フォールバックとして「default」ポインタを使用します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- このカーソルは macOS と Linux でのみサポートされます。
注釈 1件
実装メモ
- このカーソルは macOS と Linux でのみサポートされます。
注釈 1件
実装メモ
- このカーソルは macOS と Linux でのみサポートされます。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 3件
対応条件
- Chrome はプレフィックス付きバージョンも引き続きサポートします。
- ベンダープレフィックス付きで対応: -webkit- (1)
実装メモ
- Chrome 22 では Windows サポートが追加されました。
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -moz- (1.5)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (4)
注釈 3件
対応条件
- Chrome Android も引き続きプレフィックス付きバージョンをサポートします。
- ベンダープレフィックス付きで対応: -webkit- (18)
実装メモ
- Chrome Android 25 では Windows サポートが追加されました。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (1)
実装メモ
- Chrome 22 では Windows サポートが追加されました。
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (79)
実装メモ
- Edge 79 では Windows サポートが追加されました。
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (18)
実装メモ
- Chrome Android 25 では Windows サポートが追加されました。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- Firefox 4 では macOS のサポートが追加されました。
注釈 1件
実装メモ
- Firefox 4 では macOS のサポートが追加されました。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (1)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -moz- (1)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (3)
注釈 1件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (18)
注釈 1件
実装メモ
- この値が使用される場合、iPad は代わりに「デフォルト」ポインタを表示します。
注釈 1件
実装メモ
- Firefox 67 以降、カーソルは特定の悪意のあるサイトによって悪用されるため、カスタム カーソルに許可される最大サイズは 32x32 ピクセルです。
基本構文
CSS
.clickable { cursor: pointer; }
.draggable { cursor: grab; }
.dragging { cursor: grabbing; }
.disabled { cursor: not-allowed; }ライブデモ
実務での使いどころ
-
インタラクティブ要素の操作ヒント
ドラッグ&ドロップ対応の要素にgrabカーソルを設定し、ユーザーが直感的に操作方法を理解できるようにします。
注意点
- カスタムカーソル画像はサイズ制限（通常32×32px）があり、大きすぎる画像は表示されない場合があります。
アクセシビリティ
- カーソル形状だけで操作可能性を示すのではなく、フォーカスインジケーターやARIA属性も併用してください。