【CSS】cursorプロパティを使って、マウスポインタ(カーソル)を変更する

ノートパソコンでネットサーフィン

こんいちは、タクローです。

ウェブサイト、ウェブアプリケーションは、マウスを使って操作していくことがほとんどでしょう。

今回の記事では、そんなマウス操作に焦点を当ててみます。

早速ですが、みなさんがウェブサイト、ウェブアプリケーションをマウスで操作するときのことを想像してみてください。

マウスを使って、ポインタ(カーソル)を動かしたり、クリックしたり。

そんな操作をしていく中で、「クリックする、しない」の判断基準として、何が考えられるでしょう?

ざっくり分けて、下の3点を挙げてみました。

  • ボタンやバナー
  • テキスト
  • マウスポインタの形

ボタンやバナー、テキストについては、ちょっとした工夫でクリックを誘導することができるでしょう。

では、最後の「マウスポインタの形」についてはどうでしょうか?

マウスポインタの形が変わらなければ、クリックすべき箇所に気づかず、スルーしてしまうかも。

そのようなちょっとした配慮不足が原因で、ページビューやコンバージョンを減少させることにつながるかもしれません。

また、ウェブアプリケーションに至っては、操作性の低下が業務効率を落とすことにもつながっていくでしょう。

そうならないためにも、ウェブサイト、ウェブアプリ制作者がマウスポインタの形にも配慮する必要があるのです。

今回はウェブサイト、ウェブアプリ制作者のための「マウスポインタの変更」について、解説していきます。

マウスポインタの形は、「CSS」で簡単に変更することができます。

https://takro-blog.com/about-services-for-creating-website-simply-and-inexpensively/

CSSでマウスポインタ(カーソル)の形を変える

制作者側がクリックしてほしい箇所に、ユーザーがマウスポインタを動かした時、その形が変わらなければ、クリックしてもらえないこともあるでしょう。

マウスポインタの形は、制作者側の操作意図を伝える大きな役割を担っているのです。

では、具体的にCSSでマウスポインタの形を変える方法を解説していきます。

書き方はとても簡単。

cursor: 値;

これだけです。

cursorの値一覧

CSSの「cursor」プロパティで以下の値を指定することで、マウスポインタ(カーソル)の形を変えることができます。

表内の「サンプル」の文字列上にマウスポインタ(カーソル)を乗せてみてください。

指定する「cursor」プロパティの値に対応したマウスポインタ(カーソル)の形を実際に確認することができます。

カーソルの形
auto ブラウザに依存
サンプル
default 標準のカーソル
サンプル
crosshair 十字
サンプル
pointer ポインタ
サンプル
move 移動
サンプル
text 入力中
サンプル
vertical-text 入力中(縦書き)
サンプル
wait 動作待ち
サンプル
progress 動作待ち(操作可)
サンプル
help ヘルプ
サンプル
cell Excelのセル選択
サンプル
not-allowed 操作不可
サンプル
none カーソル非表示
サンプル
n-resize 上方向にサイズ変更
サンプル
s-resize 下方向にサイズ変更
サンプル
w-resize 左方向にサイズ変更
サンプル
e-resize 右方向にサイズ変更
サンプル
nw-resize 左上方向にサイズ変更
サンプル
ne-resize 右上方向にサイズ変更
サンプル
sw-resize 左下方向にサイズ変更
サンプル
se-resize 右下方向にサイズ変更
サンプル
col-resize 幅変更
サンプル
row-resize 高さ変更
サンプル
all-scroll 全方向スクロール
サンプル
copy コピー可
サンプル
no-drop ドロップ不可
サンプル

古いブラウザでは対応していない場合がありますので、あらかじめご了承の上、参考にしていただけると幸いです。

オリジナルマウスポインタ(カーソル)

マウスポインタ(カーソル)にオリジナルの画像を使うことができます。

インパクトのある画像を使えば、オリジナリティ溢れる面白いウェブサイトが作れますね。

「cursor」プロパティで以下のように画像ファイルを指定するだけです。

corsor: url(image/XXX.gif);

上の例では、同じ階層の「image」フォルダに対象の画像ファイルがある場合です。

url( )内に表示した画像ファイルのパスを指定しましょう。

万が一、うまく表示されなかったことを考え、下のように複数の値をカンマで区切って指定することもできます。

corsor: url(image/XXX.gif), pointer;

この場合、先に指定した値から優先的にマウスポインタ(カーソル)の形が表示されます。

まとめ

今回は、マウスポインタ(カーソル)の形について、解説しました。

ちょっとした工夫でユーザビリティは向上するはずです。

ユーザビリティはウェブサイトのページビューやコンバージョンにも影響してきます。
ウェブアプリケーションでは業務効率などにも影響してくるでしょう。

マウスポインタ(カーソル)の形を駆使して、ウェブサイトやウェブアプリケーションのユーザビリティを少しでも改善していきましょう。

最後までお付き合いいただき、ありがとうございました。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする