---
title: "CSSカーソルビューワー - CSSカーソルの見た目を一覧確認"
description: "CSSで使えるカーソルスタイルを一覧で確認できるツールです。pointer、grab、not-allowed などの見た目と挙動を比較し、UIに合うカーソル選択に役立ちます。"
canonical_url: "https://web-toolbox.dev/tools/css-cursor-viewer"
meta:
  author: K
  "og:description": "CSSで使えるカーソルスタイルを一覧で確認できるツールです。pointer、grab、not-allowed などの見た目と挙動を比較し、UIに合うカーソル選択に役立ちます。"
  "og:image": "https://web-toolbox.dev/og/ja/tools/css-cursor-viewer-0cd44743.png"
  "og:image:alt": CSSカーソルビューワー
  "og:image:height": "630"
  "og:image:width": "1200"
  "og:title": "CSSカーソルビューワー - CSSカーソルの見た目を一覧確認"
---

> Index of every page on this site: [llms.txt](https://web-toolbox.dev/llms.txt)

# **CSSカーソルビューワー**

CSSカーソルの見た目と動作を一覧確認

## **CSS 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**` プロパティで使えるカーソルを一覧で確認し、見た目をホバーで試せるツールです。各カーソルはカテゴリごとに並んでおり、選んだ値を `**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**` を選んでコピーすると、出力は次のようになります。

```css
cursor: pointer;
```

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

## 活用シーン

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

## 使うときの注意点

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

**使ってみてどうでしたか？**

最終更新: 2024年8月9日

### **関連ツール**

- [<h4>**Border Radiusジェネレーター**</h4>](https://web-toolbox.dev/tools/border-radius-generator)
- [<h4>**Box Shadowジェネレーター**</h4>](https://web-toolbox.dev/tools/box-shadow-generator)
- [<h4>**CSS背景パターンジェネレーター**</h4>](https://web-toolbox.dev/tools/css-background-pattern-generator)
- [<h4>**CSSフィルタージェネレーター**</h4>](https://web-toolbox.dev/tools/css-filter-generator)
- [<h4>**CSSグラデーションジェネレーター**</h4>](https://web-toolbox.dev/tools/css-gradient-generator)
- [<h4>**グラデーションテキストジェネレーター**</h4>](https://web-toolbox.dev/tools/gradient-text-generator)
- [<h4>**Squircleジェネレーター**</h4>](https://web-toolbox.dev/tools/squircle-generator)
- [<h4>**SVG to CSS変換**</h4>](https://web-toolbox.dev/tools/svg-to-css)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://web-toolbox.dev/#website","@type":"WebSite","description":"アカウント登録不要で使える無料Web開発ツール80種類以上。JSON整形、Base64変換、カラーコード変換、QRコード生成などをブラウザ上で瞬時に実行。開発者の作業効率を大幅に向上させます。","inLanguage":"ja-JP","name":"Web ToolBox","url":"https://web-toolbox.dev/","workTranslation":{"@id":"https://web-toolbox.dev/en#website"}},{"@id":"https://web-toolbox.dev/tools/css-cursor-viewer#webpage","@type":"WebPage","description":"CSSで使えるカーソルスタイルを一覧で確認できるツールです。pointer、grab、not-allowed などの見た目と挙動を比較し、UIに合うカーソル選択に役立ちます。","name":"CSSカーソルビューワー - CSSカーソルの見た目を一覧確認","url":"https://web-toolbox.dev/tools/css-cursor-viewer","isPartOf":{"@id":"https://web-toolbox.dev/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://web-toolbox.dev/tools/css-cursor-viewer"]}]},{"@id":"https://web-toolbox.dev/tools/css-cursor-viewer#/schema/web-application/1","@type":"WebApplication","applicationCategory":"UtilityApplication","description":"CSSで使えるカーソルスタイルを一覧で確認できるツールです。pointer、grab、not-allowed などの見た目と挙動を比較し、UIに合うカーソル選択に役立ちます。","name":"CSSカーソルビューワー - CSSカーソルの見た目を一覧確認","operatingSystem":"Windows, macOS, Linux, Android, iOS"}]}
```

## Sitemap

See the full [sitemap](https://web-toolbox.dev/sitemap.md) for all pages.