カーソルの形状変更

cursorpointer-events

マウスカーソルの形状を変更することで、ユーザーに操作のヒントを視覚的に伝えます。各カーソル値は特定のインタラクションを暗示し、適切に使用することでUXが向上します。

デモ：各ボックスにホバーしてカーソルを確認

インタラクティブ系

default
通常の矢印

pointer
クリック可能

grab
つかめる

grabbing
つかんでいる

copy
コピー

help
ヘルプ

状態系

not-allowed
操作不可

wait
処理中

progress
バックグラウンド処理

none
カーソル非表示

テキスト・ズーム系

text
テキスト選択

crosshair
十字線

zoom-in
ズームイン

zoom-out
ズームアウト

移動・リサイズ系

move
移動

col-resize
列リサイズ

row-resize
行リサイズ

ew-resize
左右リサイズ

n-resize
上リサイズ

nwse-resize
斜めリサイズ

コード例

/* 基本的なカーソル値 */
.button     { cursor: pointer; }
.disabled   { cursor: not-allowed; }
.loading    { cursor: wait; }
.draggable  { cursor: grab; }
.dragging   { cursor: grabbing; }
.resizable  { cursor: col-resize; }

/* カスタム画像カーソル */
.custom {
  cursor: url('/cursor.png') 16 16, auto;
  /* url(), hotspot-x, hotspot-y, フォールバック */
}

/* SVGカーソル */
.svg-cursor {
  cursor: url("data:image/svg+xml,...") 8 8, pointer;
}

/* pointer-events — マウスイベントの制御 */
.overlay    { pointer-events: none; }  /* クリック透過 */
.clickable  { pointer-events: auto; }  /* デフォルト */
.svg-all    { pointer-events: all; }   /* SVG用 */

/* touch-action — モバイルジェスチャー制御 */
.no-zoom    { touch-action: manipulation; } /* ダブルタップズーム無効 */
.pan-only   { touch-action: pan-y; }        /* 縦スクロールのみ許可 */
.no-touch   { touch-action: none; }         /* すべてのタッチ操作を無効化 */

用途別カーソル一覧

用途	カーソル値	使用例
クリック可能	`pointer`	ボタン、リンク、カード
操作不可	`not-allowed`	disabledボタン、制限された操作
ドラッグ	`grab` / `grabbing`	ドラッグ可能な要素、スライダー
読み込み中	`wait` / `progress`	wait: 操作不可、progress: 操作しながら待機
テキスト入力	`text`	テキストエリア、入力可能な領域
ズーム	`zoom-in` / `zoom-out`	画像ビューア、マップ
リサイズ	`col-resize` / `row-resize`	パネル境界、分割ビュー

NEWpointer-events: none と touch-action

pointer-events: none はオーバーレイなどでクリックを透過させたいときに使います。touch-action はモバイルでのジェスチャー（スワイプ・ピンチ）を制御するプロパティで、カスタムスワイプUIの実装に重要です。

/* オーバーレイのクリック透過 */
.tooltip-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* 下の要素をクリックできる */
}
/* 特定の子要素だけクリック可能にする */
.tooltip-overlay .close-btn {
  pointer-events: auto;
}

/* モバイルジェスチャーの制御 */
.carousel {
  touch-action: pan-y;  /* 縦スクロールはOK、横はカスタム処理 */
}
.map-area {
  touch-action: none;   /* すべてのデフォルトジェスチャーを無効化 */
}
.button {
  touch-action: manipulation; /* ダブルタップズームを無効化（高速クリック対応） */
}

touch-action: manipulation はモバイルのボタンで300msクリック遅延を排除するためによく使われます。

🤖 AIプロンプトテンプレート

CSSのcursorプロパティとpointer-eventsを使ったカーソルスタイルの実装例をReact + Tailwind CSSで作成してください。

要件:
- 主要カーソル値の一覧デモ: default / pointer / text / move / grab / grabbing / not-allowed / wait / crosshair / zoom-in / zoom-out / help / ns-resize / ew-resize など
- 各カーソルをホバーで確認できるカード形式のギャラリー
- pointer-events: none でクリックを無効化する例
- カスタムカーソル（SVGやPNGをURLで指定）の実装例
- ドラッグ操作中にcursorをgrabとgrabbingに切り替えるインタラクティブデモ
- cursor: not-allowed を使ったdisabledボタンの実装例

ホバーするだけでカーソルの変化を確認できる一覧デモにしてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧 ☕ Buy Me a Coffee