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

2019年4月11日

通常の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設定した画像が表示される