cursorプロパティの値
要素にマウスカーソルが乗っかった時にマウスカーソルを変更するCSSプロパティは、cursorプロパティです。
このcursorプロパティは値の種類が非常に多く、その数30種類以上もあります。
ですが、一般的なWebサイトを作る際に知っておきたい値の種類はせいぜい、そのうちの数種類です。
WebサイトではなくWebアプリケーションを作りたい場合…例えば、ユーザーが画像をドラッグ＆ドロップでアップロードできる仕組みを作りたい場合などは、マウスドラッグ・ドロップ用のカーソル変化を用意する必要がありますが、一般的なWebサイトでそのような機能は必要ないですよね。
ということで、ここではシンプルにわかりやすくするため、cursorプロパティの値の種類を厳選し、余計な情報は省いて掲載しました。
下の表が、Webサイト制作において必ず知っておきたいcursorプロパティの値です。
＊値の上にマウスカーソルを乗せると、該当のカーソルになります＊
| 値 | 説明 |
| auto | 初期値。ブラウザのデフォルトのカーソルが表示される。
例えばテキストならば『I』字型のカーソル（Iビーム）になる。 |
| default | 基本のマウスカーソル。普通は矢印。 |
| none | マウスカーソルが非表示になる。 |
| pointer | リンクやボタンなどクリックできることを表すカーソルになる。 |
| text | テキストが選択可能であることを示すカーソルになる。 |
| not-allowed | 選択（クリック）不可であることを示すカーソルになる。 |
上の表の中でも特に使用頻度が高いのが、pointer（クリックできることを明示する）です。
UIを考えたときに最も避けなければならないのは、クリックできるボタンやテキストをクリックできると認識できずに、クリックされないこと…と言えます。
ブラウザのデフォルトの設定である程度カバーはしてくれますが、それだけでは不十分であることも多いです。
特にリセットCSSなどでブラウザのデフォルトの挙動を変更している場合は注意が必要です。
ということで次の章では、cursorプロパティのpointerについて解説していきます。
POINT!
- ・マウスカーソルを変化させるCSSプロパティは、cursorプロパティ！
- ・cursorプロパティの値の種類はとても多いが、通常のWebサイト制作では数種類知っておくだけでOK！
- ・cursorプロパティの中でもっとも使用頻度が高いのは、クリックできることを明示するpointer！
値：pointerの使い方
この章ではcursorプロパティの値の中でも最も使用頻度が高い、pointerの使い方と注意点について解説していきます。
値：pointerに限ったことではありませんが、cursorプロパティの扱いはとても簡単で、マウスカーソルを乗せた時にカーソルを変化させたい要素に、該当のCSSを指定するだけです。
要素の上にマウスカーソルが乗っかる＝擬似クラス:hoverの指定が必要なのでは？…と思ってしまう方もいるかもしれませんが、:hoverは必要ありません。
用語解説：擬似クラス:hover（ホバー）とは？
cursorプロパティそのものが要素上のマウスカーソルを変更するためのCSSなので、マウスカーソルが乗っかったとき（マウスオーバー）という条件指定が必要ないというわけですね。
※擬似クラス:hoverとマウスオーバーアクションについての詳しい記事は、こちらをご覧ください。
下は、ボタンに対してマウスカーソルをpointer指定したCSSコードサンプルです。
HTML
<button type="button" name="button" class="pointer_bt">カーソルをポインターに</button>
CSS
.pointer_bt {
cursor: pointer;
padding: 10px 20px;
font-size: 16px;
}
＊表示結果＊
このように、マウスカーソルを変更するのはとても簡単です。
cursorプロパティを使ってマウスカーソルをpointerにする場面としては、サンプルのようにbuttonタグを使ったボタンなどが多いです。
aタグを使ったリンク挿入要素は、通常であればブラウザのデフォルト設定によりマウスカーソルがpointerになるため、cursorプロパティを指定する必要はありません。
しかし、button要素などデフォルトではpointerにならない要素に関しては、クリックで何かしらの変化が起こるようにしているのであればマウスカーソルをpointerにしておいた方が親切かと思います。
特に、button要素の見た目をCSSで大きく調整している場合はボタンに見えるデザインにしていても、「色んなWebサイトでも見かけるボタン」とは言えなくなります。
こういった場合はマウスカーソルをpointerにしておくことで、少なくともPCからWebサイトを訪問したユーザーはボタンであると確信を持つことができると言えるでしょう。
POINT!
- ・マウスカーソルを変更するには、該当の要素をセレクタに指定してcursorプロパティを指定すればOK！
- ・マウスカーソルが要素の上に乗った時の指定だが、擬似クラス:hoverの指定は必要なし！
- ・button要素など、デフォルト（auto）ではpointerにならないが、クリックできるものにpointer指定をすると良い！
値：pointerの応用
cursor: pointer;は、前章で紹介したようにクリックできるbutton要素などに指定するのが一般的ですが、他にも役に立つ場面があるのでその具体例を紹介します。
具体例１）カルーセル
下のような、ユーザーが矢印（＜、＞）をクリックすることで表示画像などが切り替わる機能を、カルーセルと言います。
左右に配置されている矢印（＜、＞）はクリックできますが、これはリンクテキストでもなければボタンでもないため、対策なしではクリックできることに気づきにくいものであると言えます。
こういった、リンクでもボタンでもないものをクリックできることを少しでも分かりやすくするために、マウスカーソルをpointerにすることは有効な対策です。
具体例２）ライトボックス
下のような、画像をクリックすると画像が拡大（全画面）表示される機能をライトボックスと言います。
しかし、ただ画像を配置しただけではそれがクリックで拡大表示される画像だとは判別できませんよね。
こういった場合もマウスカーソルをpointerにすることで、クリックできる画像であるということがわかります。
ただ、それだけではまだ不十分なので、さらに「画像をクリックで拡大表示できます。」と一言添えておくと尚良いでしょう。
＊クリックで拡大＊
クリックして閉じる
このように、リンクやボタンだけでなく、クリックで何かが起こる要素に対してマウスカーソルをpointerに指定することで、ユーザーがよりわかりやすくWebサイトの機能を利用できるようになります。
POINT!
- ・cursor: pointer;指定の使い道は、button要素だけではない！
- ・カルーセルを配置する場合、クリックできる矢印にpointer指定すると良い！
- ・ライトボックスの画像要素にも、クリックできることを明示するためにpointer指定が有効！
not-allowedの使い道
これまでご紹介してきたように、cursorプロパティはpointerに指定して、クリックできる要素を分かりやすくする目的で使うことが多いです。
とは言え、pointer以外の値の使い道がないわけではありません。
アイデア次第で色々と使い道は考えられるので、活用していきましょう！
この章では、クリック不可であることを明示するnot-allowedの活用例をご紹介します。
＊チェックを入れないとクリックできない送信ボタン
お問い合わせフォームは個人・法人問わず多くのWebサイトに設置されていますが、あまりにも簡単に送信できるようにしておくと迷惑メール・スパムが多く送られてくることになってしまいます。
そこで、○文字以上入力しないと受け付けないようにするとか、入力必須項目を多くするとか、そういった対策が取られるわけですが、対策の１つとして確認のチェックを入れることを必須にするという方法があります。
チェックボックスにチェックを入れるまで送信ボタンをクリックできないようにしておくことで、ある程度迷惑メールが送られてしまうことを減らすことができます。
この場合、チェックボックスにチェックを入れるまでは、cursor: not-allowed;を使って、クリックできないようにしておくと良いでしょう。
下がそのサンプルです。（チェックを入れて送信ボタンを押しても何も起こりません）
チェックボックスにチェックが入っているかどうかの判定はJavaScriptを使っています。
サンプルのコードは下のようになっています。
HTML
<div class="sample_form">
<input type="text" name="" value="" placeholder="サンプルです">
<input class="sample_check" type="checkbox" name="" value="">
<div style="margin-top: 2rem;">
<div class="sample_submit_outer">
<input class="sample_submit" type="submit" name="" value="送信する">
</div>
</div>
</div>
CSS
.pointer_bt {
cursor: pointer;
padding: 10px 20px;
font-size: 16px;
}
.sample_form input {
font-size: 16px;
}
.sample_submit_outer {
cursor: not-allowed;
width: fit-content;
}
.sample_submit {
pointer-events: none;
opacity: .5;
}
JavaScript
const sampleCheck = document.querySelector('.sample_check');
const sampleSubmit = document.querySelector('.sample_submit');
const sampleCursor = document.querySelector('.sample_submit_outer');
sampleCheck.addEventListener('input', () => {
if (sampleCheck.checked ) {
sampleSubmit.style.cursor = 'pointer';
sampleSubmit.style.opacity = '1';
sampleSubmit.style.pointerEvents = 'auto';
}
else {
sampleCursor.style.cursor = 'not-allowed';
sampleSubmit.style.opacity = '.5';
sampleSubmit.style.pointerEvents = 'none';
}
});
Webサイト制作においては「クリックできる・できない」を明確にする…ということがとにかく大切です。
クリックできるか、できないか、実際にクリックしてみるまでわからない…というのは使い勝手が悪く、UI改善が必要と言えるでしょう。
そういった意味で、cursorプロパティのpointerとnot-allowedは、特に上手に活用すると良いと思います。
POINT!
- ・cursor: not-allowed;は、要素がクリックできないことを表すカーソルになる！
- ・チェックを入れないと押せないボタンなどに使用すると分かりやすい！
- ・pointerとnot-allowedを使いこなして、クリックできるorできないを明確にしよう！
- 関連記事 -
