# cursor

> 要素にマウスを重ねた時のカーソルの形状を指定するプロパティです。pointer、text、move、not-allowedなど多数の値があり、ユーザーに操作のフィードバックを与える重要なUIプロパティです。

- カテゴリ: インタラクション・UX
- URL: https://www.css-dictionary.com/property/cursor/

## 構文

```css
cursor: <cursor-type>
```

## Tailwindでは

- `cursor-pointer` → cursor: pointer
- `cursor-not-allowed` → cursor: not-allowed
- `cursor-help` → cursor: help
- 一般形: `cursor-{keyword}`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1.2+ / Edge 12+

## コード例

### 例1: 手の形のカーソル（クリック可能要素）

```css
cursor: pointer;
```

### 例2: 禁止マークのカーソル（無効要素）

```css
cursor: not-allowed;
```

## TIPS

ユーザビリティ向上のため、クリック可能な要素には必ずpointerを設定。

## AIがよく間違えるポイント

AIは「クリックできる感」を出すために非インタラクティブ要素にまでcursor: pointerを付けがちですが、押せないものをポインターにするのはUX上の嘘になります。またカスタムカーソル画像には必ずフォールバック値が必要（cursor: url(...), pointer;）で、これを省略した無効構文が生成されることがあります。

## AIへの依頼文例

- このUIのcursor指定を監査して、実際にクリックできる要素だけがpointerになるよう修正して