WebDesigner's Memorandumウェブデザイナーの備忘録

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

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

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

cursorプロパティ

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

div{
  cursor: pointer;
}

CSSのカーソル一覧

内容
autoブラウザが自動で選択
default通常時の矢印カーソル
pointerリンク用のポインタカーソル
move移動カーソル
textテキスト入力用のカーソル
crosshair十字カーソル
cellExcel等でセルを選択する用のカーソル
helpクエスチョンマーク
grab手のカーソル
grabbiing手を握っている状態のカーソル
zoom-in拡大用のカーソル
zoom-out縮小用のカーソル
not-allowed矢印の右下に禁止アイコンが付いているカーソル
wait進行中の回転するカーソル(Windowsだと回転アイコンのみ)
progress進行中の回転するカーソル(Windowsだとカーソル + 回転アイコン)
aliasMacのエイリアスに使われるアイコン
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.

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね