はじめに
今回は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; }
この2つのカーソルは処理中の時に表示させます。
例えば、「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)が用意されています。
横幅のリサイズ
ここにカーソルを当てると表示を確認できます!
高さのリサイズ
ここにカーソルを当てると表示を確認できます!