CSSのcursorプロパティで変えられるカーソル一覧
通常の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 by Masakazu Saito (@31mskz10) on CodePen.
