CSS辞書

cursor

インタラクション・UX

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

構文

Syntax
cursor: <cursor-type>

Tailwindでは

cursor-pointercursor: pointer
cursor-not-allowedcursor: not-allowed
cursor-helpcursor: help

一般形: cursor-{keyword}

インタラクティブデモ

Try it

コントロール

プレビュー

カーソルを重ねてください

生成されたCSS

.element { cursor: default; }

コード例

1

cursor: pointer;
実行結果

手の形のカーソル(クリック可能要素)

2

cursor: not-allowed;
実行結果

禁止マークのカーソル(無効要素)

💡 TIPS

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

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

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

💬 AIへの頼み方

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

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

ブラウザサポート

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