Help us understand the problem. What is going on with this article?

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

はじめに

Webアプリケーションでは、clickなどのユーザーのアクションを要求する事が多くなります。
その際に時々見かけるのが、どこをclickすれば良いのか分からない画面です。

考えられる対応策はいろいろありますが、個人的に簡単で効果が高いものは、アイコンマウスポインタの形状変更だとおもっています。

そして、マウスポインタの形状はcssで変更が可能です。
ここではマウスポインタの形状変更の方法をまとめます。

*なお、アイコンはこちらなどを使用すれば良いかと思います。
https://fontawesome.com/

方法

CSSのcursorを使用します。

cursorとは

マウスポインタが要素の上にある時に表示されるカーソルの形状を設定するstyleプロパティです。

どんな形があるの?

こちらを参照してください。
https://developer.mozilla.org/ja/docs/Web/CSS/cursor#Syntax

個人的に良く使用しているものはこちらです。

内容
pointer リンクの時に表示される矢印です。
私はA要素以外でclickで実行になる箇所に設置します。
help ヘルプが使える事を示します。
私はヘルプ表示の箇所に設置します。
not-allowed 操作できない事を示すカーソルになります。
私は未入力で実行できない時に、disabledと併用する事があります。

コード例

.sum {
  cursor: pointer
}
<p class="sum">合計値を出す</p>

* class意外にもdisabledなどをセレクタにすると、UIフレームワークで扱いやすいと思います。

サンプル

See the Pen Cursor sample by H.N (@H_Naito) on CodePen.

注意すること

使い方自体はかんたんですが、使う場所とタイミングが大事かと思います。
例えばですが、helpでもない部分にhelpがあったり、clickできる状態なのにnot-allowedのままだと、エンドユーザーが混乱します。
うまく使い分けることで、使いやすい画面を作る事が出来ると思います。

参考資料

CSS cursor プロパティ
https://developer.mozilla.org/ja/docs/Web/CSS/cursor

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした