CSSのcursorプロパティでカーソルの種類を変える方法
「CSSを使ってマウスカーソルの種類を変えたい」
「CSSのcursorで指定できるカーソルの種類について知りたい」
上記のような疑問を抱えていてこの記事にたどり着いた方も多いのではないでしょうか？
マウスカーソルの種類を変更するには、CSSのcursorを使います。
cursorに指定できるカーソルの種類は多数ありますが、その中でも頻繁に利用するカーソルは限られています。
今回WEBCAMP MEDIAでは、CSSのcursorプロパティでカーソルの種類を変える方法について解説します。
- cursorについて
- cursorの使い方
- 画像を指定する方法
- cursorが効かないときの対処法
以上の項目について解説します。
この記事を読むことで、cursorプロパティの使い方を理解でき、よく利用するカーソルの種類を把握できるのでぜひチェックしてみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
CSSのcursorプロパティでカーソルの種類を変更できる
cursorとは、HTML要素の上にマウスカーソルを置いたときの種類を変えることができるCSSプロパティです。
cursorプロパティを使ってカーソルの種類を変えることで、ユーザーがマウスを置いた要素の役割について理解できます。
たとえば、pointerという人差し指の形をしたカーソルは、ユーザーがクリックできる要素だと認識しやすくなります。
このように、要素に適したカーソルを指定することでユーザビリティが向上するのでおすすめです。
カーソルで指定できる主な種類一覧
cursorプロパティには数多くの種類が存在します。その中でも、よく利用されているカーソルの種類と役割は下記の通りです。
- pointer：人差し指のようなマークのカーソル。リンクやボタンなどクリックできる要素に利用される
- default：よく見慣れている矢印状のカーソル
- none：カーソルを非表示にする
- auto：cursorの初期値。リンクの場合ポインターになったり、標準時は矢印カーソルになったりと場面によって変わる
- text：I状のカーソルで、テキストを選択しやすい形のカーソル
- crosshair：十字形のカーソル。
- move：十字形で先端が矢印仕様になっているカーソル。要素を移動するときによく利用される
- wait：処理中を表すときに利用されるカーソル
上記の種類はカーソルの中でもよく利用されるので、この記事をきっかけに覚えておくとよいでしょう。
cursorの使い方をサンプルコードを用いて解説
cursorは下記のように入力します。
指定したいセレクタ名{
cursor: カーソルの種類;
}カーソルの種類を変えたい要素をセレクタで指定し、cursorの値でカーソルの種類を指定します。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
.test{
cursor: pointer;
}
</style>
</head>
<body>
<p class="test">テストアイテム1</p>
</body>
</html>pタグは文字列なので、cursorの初期値であるautoの場合はI状のカーソルが表示されます。
そこに「cursor: pointer;」を指定すると、pタグ内にマウスを置いたときのカーソルを人差し指型に変更できます。
ほかのカーソルも同じ方法で指定できるので、サンプルコードをコピペして試してみてくださいね。
cursorに画像を指定する方法
cursorプロパティにURL関数を使って画像を指定することで、マウスカーソルに画像を表示できます。
cursor: url(画像の場所), カーソルの種類;上記のように、カーソルとして表示したい画像とカーソルの種類を指定します。画像だけ指定しても表示されないので、必ず2つの値を指定しましょう。
カーソルの種類に指定した値は、もしカーソルとして指定した画像が表示されなかったときに代用として表示されます。
cursorが効かないときの対処法
cursorが効かないときは、下記の内容に該当していないかチェックしてみましょう。
- positionプロパティなどが原因で別の要素が上に被っている
- 画像を指定するときにurl()のみ指定している
positionプロパティで配置した要素がcursorを指定した要素の上に被ると、positionプロパティで配置した要素にマウスが当たるのでcursorが効きません。
上記の問題でcursorが効かないときは、z-indexプロパティで表示順位を変えるとよいでしょう。
また、cursorに画像を指定するときにurl()だけ指定して、2番目の値にcursorの種類を指定しないことで効かないことも多いです。
cursorに画像を指定するときは、url()とカーソルの種類を必ず指定しましょう。
まとめ
今回は、CSSのcursorプロパティでカーソルの種類を変える方法について解説しましたが、いかがでしたでしょうか。
cursorで指定できるカーソルの種類を把握することで、場面に適したカーソルを指定できるようになります。
また、url関数を使うと自分で作った画像をカーソルとして利用できるので、この記事をきっかけにぜひ試してみてくださいね！
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
