CSSのcursorプロパティでカーソルの種類を変える方法

公開日: 2022.01.31
更新日: 2024.01.03
CSSのcursorプロパティでカーソルの種類を変える方法

「CSSを使ってマウスカーソルの種類を変えたい」
「CSSのcursorで指定できるカーソルの種類について知りたい」

上記のような疑問を抱えていてこの記事にたどり着いた方も多いのではないでしょうか?

マウスカーソルの種類を変更するには、CSSのcursorを使います。

cursorに指定できるカーソルの種類は多数ありますが、その中でも頻繁に利用するカーソルは限られています。

今回WEBCAMP MEDIAでは、CSSのcursorプロパティでカーソルの種類を変える方法について解説します。

  • cursorについて
  • cursorの使い方
  • 画像を指定する方法
  • cursorが効かないときの対処法

以上の項目について解説します。

この記事を読むことで、cursorプロパティの使い方を理解でき、よく利用するカーソルの種類を把握できるのでぜひチェックしてみてくださいね!

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

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5