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プロパティを使用することで、これをカスタマイズすることができます。
たとえば、リンクの上にマウスを置いたときに手のひらの形を表示したり、操作が禁止されている領域で斜線付きの丸いカーソルを表示したりすることが可能です。また、カスタム画像を指定して、独自のカーソルスタイルを作成することもできます。