cursor

インタラクション・UX

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

構文

Syntax
cursor: <cursor-type>
🎮

インタラクティブデモ

コントロール

プレビュー

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

生成されたCSS

.element { cursor: default; }

コード例

1

cursor: pointer;
実行結果

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

2

cursor: not-allowed;
実行結果

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

💡 TIPS

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

ブラウザサポート

全ブラウザ対応