CSS Cursorビューアとは？

CSSのcursorプロパティで指定できるすべてのカーソルスタイルをカテゴリ別に一覧表示し、リアルタイムでプレビューできるツールです。各カーソルの視覚的な効果をすぐに確認でき、選択したカーソル値をワンクリックでCSS形式にコピーできます。

UI設計時の最適なカーソル選択を効率化し、コーディングミスを防ぎます。

使い方

すべてのカーソルスタイルがカテゴリ別にカード形式で表示されます。カードにマウスを置くとそのカーソルスタイルが適用され、右側のコピーボタンでcursor: カーソル名;形式のCSS宣言がクリップボードにコピーされます。

CSSカーソルプロパティについて

cursorプロパティは、要素上のマウスポインタの形状を制御します。適切なカーソルスタイルの選択により、以下のUX向上が期待できます:

• 操作可能性の視覚的な伝達 - リンクやボタンにpointerカーソルを使用
• 状態の表現 - 処理中にwaitやprogressカーソルでフィードバック提供
• 操作制限の表示 - 利用不可の要素にnot-allowedカーソルで明示
• インタラクションの示唆 - ドラッグ可能な要素にgrab/grabbingカーソルを適用

機能

• カテゴリ別表示 - 6つの論理的なカテゴリに分類
  • 一般(auto, default, noneなど)
  • リンク・状態(pointer, wait, progressなど)
  • 選択(text, crosshair, cellなど)
  • ドラッグ&ドロップ(grab, move, not-allowedなど)
  • サイズ変更・スクロール(resize系、方向指示系)
  • 拡大/縮小(zoom-in, zoom-out)
• リアルタイムプレビュー - カードにマウスを置くだけで表示を確認
• ワンクリックコピー - cursor: value;形式で直接コピー

カーソルの選び方

カーソルスタイルは要素の機能や状態を視覚的に伝える重要な役割を持ちます:

• クリック可能な要素 - pointerで操作可能であることを示す
• テキスト選択 - textでテキスト選択可能であることを示す
• ドラッグ操作 - grab(ドラッグ前)とgrabbing(ドラッグ中)を組み合わせ
• サイズ変更 - 方向に応じたresizeカーソル(e-resize, nw-resizeなど)
• 処理中 - waitまたはprogressで処理中であることを伝える

実装例

/* リンクやボタン */
.button,
a {
  cursor: pointer;
}

/* ドラッグ可能な要素 */
.draggable {
  cursor: grab;
}
.draggable:active {
  cursor: grabbing;
}

/* 無効化された要素 */
.disabled {
  cursor: not-allowed;
}

/* ローディング中 */
.loading {
  cursor: progress;
}

ブラウザ互換性

ほとんどのカーソルスタイルは現代のブラウザでサポートされていますが、一部の特殊なカーソル(zoom-in, zoom-outなど)は表示が異なる場合があります。対象ブラウザでの確認を推奨します。

モバイルデバイスではカーソルが表示されないため、タッチインターフェースでは別の視覚的フィードバック(色の変更、アニメーションなど)を検討してください。