# CSSのcursorプロパティで変えられるカーソル一覧

URL: https://webrandum.net/css-cursor/
公開日: 2019-04-11
更新日: 2019-04-11
カテゴリー: コーディング
タグ: CSS
出典: Webrandum（著者: サイトウ マサカズ）

通常のWebサイトだとあまり指定する事はありませんが、サービス系のサイトの実装を行う時には、CSSでカーソルの指定をしておく必要があります。

スマホには関係のない設定ですし、レイアウトなどをいじっている時はつい忘れてしまいがちですが、1行で済みますし、自然と設定できるようにしておきたいものです。

## cursorプロパティ

「cursor」プロパティに値を設定すると、カーソルが変わります。

```
div{
  cursor: pointer;
}
```

## CSSのカーソル一覧

| 値 | 内容 |
| --- | --- |

| auto | ブラウザが自動で選択 |
| --- | --- |

| default | 通常時の矢印カーソル |
| --- | --- |

| pointer | リンク用のポインタカーソル |
| --- | --- |

| move | 移動カーソル |
| --- | --- |

| text | テキスト入力用のカーソル |
| --- | --- |

| crosshair | 十字カーソル |
| --- | --- |

| cell | Excel等でセルを選択する用のカーソル |
| --- | --- |

| help | クエスチョンマーク |
| --- | --- |

| grab | 手のカーソル |
| --- | --- |

| grabbiing | 手を握っている状態のカーソル |
| --- | --- |

| zoom-in | 拡大用のカーソル |
| --- | --- |

| zoom-out | 縮小用のカーソル |
| --- | --- |

| not-allowed | 矢印の右下に禁止アイコンが付いているカーソル |
| --- | --- |

| wait | 進行中の回転するカーソル（Windowsだと回転アイコンのみ） |
| --- | --- |

| progress | 進行中の回転するカーソル（Windowsだとカーソル + 回転アイコン） |
| --- | --- |

| alias | Macのエイリアスに使われるアイコン |
| --- | --- |

| context-menu | メニューアイコンがついたカーソル |
| --- | --- |

| vertical-text | 縦書きのテキスト入力用カーソル |
| --- | --- |

| n-resize | 上への矢印カーソル |
| --- | --- |

| e-resize | 右への矢印カーソル |
| --- | --- |

| s-resize | 下への矢印カーソル |
| --- | --- |

| w-resize | 左への矢印カーソル |
| --- | --- |

| nw-resize | 左上への矢印カーソル |
| --- | --- |

| ne-resize | 右上への矢印カーソル |
| --- | --- |

| se-resize | 右下への矢印カーソル |
| --- | --- |

| sw-resize | 左下への矢印カーソル |
| --- | --- |

| ew-resize | 左右の矢印カーソル |
| --- | --- |

| ns-resize | 上下の矢印カーソル |
| --- | --- |

| nesw-resize | 斜めの矢印カーソル（右上と左下） |
| --- | --- |

| nwse-resize | 斜めの矢印カーソル（左上と右下） |
| --- | --- |

| col-resize | 横幅を変更する時用のカーソル |
| --- | --- |

| row-resize | 高さを変更する時用のカーソル |
| --- | --- |

| all-scroll | 全方向への矢印カーソル |
| --- | --- |

| copy | 「+」アイコンのついたカーソル |
| --- | --- |

| no-drop | 矢印の右下に禁止アイコンが付いているカーソル |
| --- | --- |

| none | カーソルの表示が消える |
| --- | --- |

| url() | URL設定した画像が表示される |
| --- | --- |

CodePenで全てのカーソルが見れるPenを作成しました。

See the Pen [CSS cursor](https://codepen.io/31mskz10/pen/VRbVxO/) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).