CSSで使える!覚えておくべき11種類のカーソル表示一覧

ユーザビリティ向上!覚えておくべき11種類のカーソル表示

投稿日:

はじめに

今回は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)が用意されています。

横幅のリサイズ

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

高さのリサイズ

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

Copyright© カノトのアトリエ , 2019 All Rights Reserved Powered by STINGER.