Cursor styles

概要

要素上でのマウスカーソルの表示形状を制御するプロパティです。pointer、grab、not-allowedなどのキーワードにより、要素がクリック可能、ドラッグ可能、無効であることをユーザーに視覚的に伝えます。カスタム画像をカーソルとして使用することも可能です。

対応ブラウザ

基本構文

.clickable { cursor: pointer; }
.draggable { cursor: grab; }
.dragging { cursor: grabbing; }
.disabled { cursor: not-allowed; }

実務での使いどころ

• インタラクティブ要素の操作ヒント

  ドラッグ&ドロップ対応の要素にgrabカーソルを設定し、ユーザーが直感的に操作方法を理解できるようにします。

注意点

アクセシビリティ

• カーソル形状だけで操作可能性を示すのではなく、フォーカスインジケーターやARIA属性も併用してください。

参考リンク

• MDN Web Docs — Cursor styles
• Can I use — Cursor styles