CSSのcursorプロパティはマウスカーソルを要素に当てたときのカーソルの形状を変えることができます。
たとえば画像やボタンなどにリンクを埋め込む場合、カーソルをポインター（指先のアイコン）に変えることでユーザーにリンクがあることが伝わりやすくなります。
この記事ではcursorの使い方について解説していきます。
cursorの使い方
cursorの使い方はカーソルを変えたい要素に対しcursor: 〇〇を適用します。
以下の例では「cursor: pointer（指先マーク）」を設定しました。
同じpタグですが、２番目のpタグはカーソルを合わせたときにポインター（指先のアイコン）に変わっています。
また、pタグ以外にもdivタグやlabelタグやaタグなど、さまざまなタグに対して使うことができます。
See the Pen css-cursor1 by Usagi (@naniwa_usagi) on CodePen.
cursorで設定できる値一覧
cursorで設定できる値一覧をまとめました。（アルファベット順）
記事執筆時点で36個存在しています。
- alias
- all-scroll
- auto
- cell
- col-resize
- context-menu
- copy
- crosshair
- default
- e-resize
- ew-resize
- grab
- grabbing
- help
- move
- n-resize
- ne-resize
- nesw-resize
- no-drop
- none
- not-allowed
- ns-resize
- nw-resize
- nwse-resize
- pointer
- progress
- row-resize
- s-resize
- se-resize
- sw-resize
- text
- vertical-text
- w-resize
- wait
- zoom-in
- zoom-out
また、それぞれの値を適用した結果がこちらです。
「pointer」や「none」や「default」などはよく使われるので、ぜひ覚えておいてください。
See the Pen css-cursor2 by Usagi (@naniwa_usagi) on CodePen.
一部IE（Internet Explorer）に対応していないものもありますが、2022年でサポートは終了しているため本記事では説明を省いています。
Chrome・Edge・Firefox・Opera・Safariといった主要ブラウザば問題なく動作します。
対応していない場合は初期値（auto）で表示されます。
ブラウザの対応状況は日々変わりますので使用する際は動作確認をお忘れなく！
まとめ
cursorプロパティを使用してカーソルの形状を適切に設定することでユーザビリティを向上させることができます。
「どういった操作ができるか」が伝わりやすいデザイン作りにぜひ活用してください。
