CSS Cursorビューアとは？

CSS の cursor プロパティで使えるカーソルを一覧で確認し、見た目をホバーで試せるツールです。各カーソルはカテゴリごとに並んでおり、選んだ値を cursor: value; の形でそのままコピーできます。

ボタン、リンク、ドラッグ操作、サイズ変更など、UI の状態に合うカーソルを探したいときに便利です。

使い方

1. カテゴリごとに並んだカーソル一覧を確認します。
2. 各カードにマウスを乗せて、実際のカーソル表示をプレビューします。
3. 使いたいカーソルが見つかったら、コピー ボタンを押します。
4. コピーした cursor: value; を CSS に貼り付けます。

ツール上ではカーソル名と見た目をまとめて確認できるため、名前だけでは判断しづらい grab、not-allowed、zoom-in なども試しやすくなっています。

確認できるカテゴリ

• 一般
• リンクおよび状態
• 選択
• ドラッグ＆ドロップ
• サイズ変更＆スクロール
• 拡大 / 縮小

代表的な値として、pointer、progress、text、grab、col-resize、zoom-in などをまとめて比較できます。

使い分けの目安

クリック可能な要素

リンクやボタンには pointer がよく使われます。クリックできることを視覚的に伝えたいときの基本です。

テキストや選択操作

テキスト選択には text、セル選択のような場面では cell や crosshair を検討しやすくなります。

ドラッグや移動

ドラッグ前は grab、ドラッグ中は grabbing を使うと、操作状態が伝わりやすくなります。

サイズ変更

リサイズハンドルには col-resize、row-resize、nwse-resize など方向付きのカーソルが向いています。

出力例

たとえば pointer を選んでコピーすると、出力は次のようになります。

cursor: pointer;

grabbing や zoom-in なども同じ形式でコピーできるため、そのままスタイル定義へ貼り付けられます。

活用シーン

• ボタンやリンクに適切なカーソルを付けたいとき
• ドラッグ可能な UI のカーソルを決めたいとき
• リサイズハンドルの見せ方を確認したいとき
• CSS の cursor 値を名前だけでなく見た目で比較したいとき

使うときの注意点

• カーソルの見え方はブラウザや OS によって多少異なることがあります
• モバイルやタッチ環境では、カーソル自体が表示されないことがあります
• カーソルだけで状態を伝えきれない場合は、色やラベルなど他の手がかりも併用するのが安全です