カーソル プレビュー

機能

• 30 以上の `cursor` キーワードを、基本 / 読み込み / ドラッグ / ズーム / サイズ変更 / スクロール / セル でグループ化
• プレビュー枠にマウスを乗せれば、推測せずに実際の見た目を確認できます
• 各値に日本語の説明を付けています（`nesw` は左下↔右上 など）
• ⚠️ 見た目は OS とカーソルテーマが決めるため、同じキーワードでも環境によって異なることを明記
• ⚠️ タッチ機器ではポインターが表示されず、唯一の手がかりにはできないことを明記
• 値はホワイトリストを通してから宣言に書きます（自由入力は受け付けません）
• コピーできるのは、そのままスタイルシートに貼れる `.target { cursor: …; }`

使い方

1. グループ分けされたドロップダウンから目的のキーワードを探します
2. 下の枠にマウスを乗せ、自分の環境でどう見えるか確認します
3. コードをコピーし、セレクターを自分のものに変えます

よくある質問

見えているポインターが画像と違うのはなぜですか？

見た目は OS とカーソルテーマが決めるもので、ブラウザーはキーワードをシステムに渡して描かせているだけだからです。同じ `cursor: pointer` でも、Windows では白い手、macOS では指差しの手、各 Linux デスクトップではまた別の形です。ユーザーがカーソルテーマを変更していたり、アクセシビリティの拡大ポインターを使っていればさらに変わります。したがってここで保証できるのは「どのキーワードか」だけです。外観を完全に制御するには `url()` で自前の画像を渡しますが、ホットスポット座標・サイズ上限（ブラウザーにより 32×32 から 128×128 まで）・形式の互換性を扱う必要があり、多くの場合は割に合いません。

col-resize と ew-resize は何が違いますか？

見た目はほぼ同じで、意味が違います。 `ew-resize` は「左右にドラッグしてサイズを変えられる」という汎用の両方向矢印、`col-resize` は表の列の境界線専用で、多くのシステムでは縦線の付いた両方向矢印として描かれます。スクリーンリーダーや一部の支援機能はこの違いを読み取るため、表の列幅には `col-resize`、汎用のドラッグには `ew-resize` が適切です。`row-resize` は行高について同じ関係です。

スマートフォンで反応しないのはなぜですか？

タッチ機器ではポインターが表示されないからです —— `cursor` はまったく効果を持ちません。これは互換性の問題ではなく、このプロパティの適用範囲そのものです：要素の上にマウスが乗ったときのポインターの形を記述するもので、タッチ画面には「乗っている」状態がありません。したがってポインターの形だけで「ここはドラッグできます」と伝える画面では、スマートフォンではその情報が存在しません。ポインターはあくまで補助で、伝えるべきことは文字・目に見えるハンドル・アイコンの形など別の方法でも表現してください。

カーソルに自前の画像は使えますか？

使えます（`cursor: url(hand.cur), pointer`）。ただしこのツールでは扱っていません。理由は 2 つ。画像が必要であり、このツールの形は「値を選んで結果を見る」なので、アップロード欄を足すと別のツールになること。そして見た目より面倒だからです：ホットスポット座標の指定、サイズ上限（ブラウザーによって 32×32 から 128×128 までで、超えると無視されます）、`.cur` と `.png` の対応のばらつき、さらに読み込みに失敗すると既定のポインターに黙って戻るため、画像が効いていないことにユーザーは気づけません。どうしても使うなら、最後に必ずキーワードをフォールバックとして置いてください。

not-allowed と no-drop はどちらを使うべきですか？

場面によります。`not-allowed` は「その操作は許可されていない」で、通常は無効状態。`no-drop` は「ここにはドロップできない」で、ドラッグ中に無効なドロップ先へ乗せたときに使います。ポインターの見た目は多くのシステムで同じ（斜線付きの丸）で、違いは意味にあります —— ドラッグ＆ドロップの文脈では `no-drop` が正確です。