CSS Cursor ビューア

CSSのcursorプロパティを一覧で表示します。

Cursor一覧 (ホバーでプレビュー)

一般

  • auto
  • default
  • none

リンクおよび状態

  • context-menu
  • help
  • pointer
  • progress
  • wait

選択

  • cell
  • crosshair
  • text
  • vertical-text

ドラッグ&ドロップ

  • alias
  • copy
  • move
  • no-drop
  • not-allowed
  • grab
  • grabbing

サイズ変更&スクロール

  • all-scroll
  • col-resize
  • row-resize
  • e-resize
  • n-resize
  • ne-resize
  • nw-resize
  • s-resize
  • se-resize
  • sw-resize
  • w-resize
  • ew-resize
  • ns-resize
  • nesw-resize
  • nwse-resize

拡大/縮小

  • zoom-in
  • zoom-out

CSS Cursor ビューアとは?

CSS Cursor ビューアは、CSSのcursorプロパティで指定できるさまざまなカーソルスタイルを一覧表示し、リアルタイムでプレビューできる機能を提供します。各カーソルスタイルが実際にどのように表示されるかを視覚的に確認しながら、簡単に適切なカーソルを選択できます。
また、選択したカーソルスタイルをクリック一つでコピーしてコードに貼り付けることができるため、作業効率を大幅に向上させます。Webデザインやフロントエンド開発において、見た目や操作性を最適化するための強力なサポートツールです。

CSS Cursor ビューアの使い方

CSSのcursorプロパティで指定できるすべてのカーソルスタイルを適用したカード一覧が表示されます。
カードをマウスでホバーすることで適用されたカーソルを確認できます。

また、コピーボタンでcursorプロパティとしてコピーできます。

cursorとは?

cursorは、CSSで使用されるプロパティの一つで、ユーザーが要素上にマウスポインタを置いたときに表示されるカーソルの形状を指定するために使用されます。デフォルトでは要素の種類やその状態に応じて、矢印やテキスト選択用のIビームなどのカーソルが自動的に表示されますが、cursorプロパティを使用することで、これをカスタマイズすることができます。

たとえば、リンクの上にマウスを置いたときに手のひらの形を表示したり、操作が禁止されている領域で斜線付きの丸いカーソルを表示したりすることが可能です。また、カスタム画像を指定して、独自のカーソルスタイルを作成することもできます。