CSSカーソル一覧
CSSの cursor に書ける全36種類の値を並べ、マウスを乗せて実際の形を確かめられます。クリックで宣言をコピーできます。
値の名前のほか、「指」「禁止」「右下」のような日本語でも探せます。空白で区切ると、すべてを含むものだけを出します。
タイルにマウスを乗せると実際のカーソルになります。クリックでコピーします。
- 最後にコピーした宣言 —
補足
-
カーソルの絵は OS とブラウザが描きます。同じ値でも Windows・macOS・Linux で形が違い、
環境によっては別の値と同じ絵になることがあります（たとえば
no-dropとnot-allowed）。 - スマートフォンやタブレットなどのタッチ操作ではマウスカーソルが出ないため、形は確認できません。 マウスやトラックパッドのある端末で開いてください。
-
noneのタイルに乗せるとカーソルが消えます。タイルの外へ動かせば戻ります。 -
画像を使う独自カーソルは
cursor: url(画像) x y, auto;のように、最後に必ずキーワードの予備を書きます。 SVG をそのまま書き込む方法は「SVGをCSS用データURIに変換」で作れます。
よくある質問
リンクではない要素で、カーソルを指の形にするには？
cursor: pointer; を指定します。button や a 要素以外（div や span にクリック処理を付けたもの）では自動で指の形にならないためです。見た目だけでなく、キーボードで操作できるよう button 要素を使うことも検討してください。
スマートフォンでカーソルの形を確認できますか？
できません。タッチ操作ではマウスカーソルが表示されないためです。マウスやトラックパッドのあるパソコン、またはマウスをつないだタブレットで開いてください。
not-allowed と no-drop は何が違いますか？
意味が違います。not-allowed は「その操作自体ができない」（無効なボタンなど）、no-drop は「ドラッグ中のものをここには落とせない」ことを示します。OS によっては同じ絵で表示されます。
grab と move はどう使い分けますか？
つかんで動かす操作（地図・スライダー・並べ替え）には grab を使い、つかんでいる間は grabbing に切り替えます。move は「移動できる」ことを示す四方向の矢印で、ウィンドウやパネルの移動によく使われます。
自作の画像をカーソルにできますか？
できます。cursor: url(画像のURL) 4 4, auto; のように書き、最後に必ずキーワードの予備を付けます。このツールはキーワードの一覧だけで、画像カーソルの作成はしません。SVG を CSS に直接書き込む形は「SVGをCSS用データURIに変換」で作れます。