はじめに

今回はPC表示の時にユーザビリティを上げてくれる「カーソル表示」をまとめてみました！
カーソルは20種類以上の表示がありますが、今回は覚えておくべきカーソルをピックアップして紹介していきます！！

カーソル表示は対象の要素が「クリックできるのか？」「リサイズできるのか？」「移動させることが出来るのか？」などを示すために大切なものになります。

UIデザインというよりもUXデザインになりますね！

よく使うカーソル表示

まずは、よく使うカーソル表示を4種類、紹介していきます！

• ブラウザの初期値カーソル：auto
• 矢印などの標準カーソル：default
• リンク用カーソル：pointer
• テキスト編集カーソル：text

ブラウザの初期値カーソル

.hoge { cursor: auto; }

ブラウザで設定されている初期値が表示されます。
例：リンク⇒pointer　テキスト⇒text

ここにカーソルを当てると表示を確認できます！

矢印などの標準カーソル

.hoge { cursor: default; }

デフォルトの矢印カーソルが表示されます。
このカーソルは、何も操作できない要素に付与します。

ここにカーソルを当てると表示を確認できます！

リンク用カーソル

.hoge { cursor: pointer; }

リンク用の指カーソルが表示されます。
このカーソルは、ボタンやリンクなどクリックさせたい要素に付与します。

ここにカーソルを当てると表示を確認できます！

テキスト編集カーソル

.hoge { cursor: text; }

テキスト用のカーソルが表示されます。
このカーソルは、テキスト要素に付与します。
テキスト用のカーソルだとユーザは、感覚的にテキストを選択しやすくなります。

ここにカーソルを当てると表示を確認できます！

覚えておいた方がいいカーソル表示

次に、あまり使わないけど、覚えておいた方がいいカーソル表示を7種類、紹介していきます。
特定のサービスではよく使われているので、覚えておくと便利です！！

• 待機・処理中のカーソル：wait, progress
• 十字カーソル：crosshair
• 十字の矢印カーソル：move
• 手のひら＆つかむカーソル：grab, grabbing
• ズームイン・アウトカーソル：zoom-in, zoom-out
• 列のリサイズカーソル：col-resize
• 行のリサイズカーソル：row-resize

待機・処理中のカーソル

.hoge { cursor: wait; }
.hoge { cursor: progress; }

この２つのカーソルは処理中の時に表示させます。
例えば、「ajaxで処理中の時は処理中のカーソルにする」などといった使い方をします。
処理中の時に、このカーソルにすることでユーザは「処理中だから動いてない」ということが直感的に理解できます。

wait

「wait」は処理中で他に操作が出来ない時に使用します。

ここにカーソルを当てると表示を確認できます！（wait）

progress

「progress」は処理中で他に操作が出来る時に使用します。

ここにカーソルを当てると表示を確認できます！（progress）

十字カーソル

.hoge { cursor: crosshair; }

十字カーソルが表示されます。
このカーソルは、エリア選択をする際に使用します。

ここにカーソルを当てると表示を確認できます！

十字の矢印カーソル

.hoge { cursor: move; }

十字の矢印カーソルが表示されます。
このカーソルは、移動できる要素に使用します。
基本的には上下左右に移動できる場合に使用します。

ここにカーソルを当てると表示を確認できます！

手のひら＆つかむカーソル

.hoge { cursor: grab; }
.hoge:active { cursor: grabbing; }

手のひら矢印カーソルが表示されます。
このカーソルも移動できる要素に使用します。
手のひらカーソルでは、上下左右に限らず自由に移動できることを意味します。

個人的には、このカーソルだけで十分だと思います。

ここにカーソルを当てると表示を確認できます！

ズームイン・アウトカーソル

.hoge { cursor: zoom-in; }
.hoge:active { cursor: zoom-out; }

拡大・縮小用のカーソルが表示されます。
操作することで拡大・縮小できる要素に対して使用します。

ズームイン

ここにカーソルを当てると表示を確認できます！

ズームアウト

ここにカーソルを当てると表示を確認できます！

リサイズカーソル

.hoge { cursor: col-resize; }
.hoge:active { cursor: row-resize; }

リサイズ用のカーソルが表示されます。
上下もしくは左右にエリアをリサイズ出来る要素に使用します。
横幅のリサイズ（col-resize）、高さのリサイズ（row-resize）が用意されています。

横幅のリサイズ

ここにカーソルを当てると表示を確認できます！

高さのリサイズ

ここにカーソルを当てると表示を確認できます！