上記のような疑問を抱えていてこの記事にたどり着いた方も多いのではないでしょうか?マウスカーソルの種類を変更するには、CSSのcursorを使います。cursorに指定できるカーソルの種類は多数ありますが、その中でも頻繁に利用するカーソルは限られています。MEDIAでは、CSSのcursorプロパティでカーソルの種類を変える方法について解説します。以上の項目について解説します。公式HP公式HP公式HPCSSのcursorプロパティでカーソルの種類を変更できるcursorとは、HTML要素の上にマウスカーソルを置いたときの種類を変えることができるCSSプロパティです。cursorプロパティを使ってカーソルの種類を変えることで、ユーザーがマウスを置いた要素の役割について理解できます。pointerという人差し指の形をしたカーソルは、ユーザーがクリックできる要素だと認識しやすくなります。このように、要素に適したカーソルを指定することでユーザビリティが向上するのでおすすめです。カーソルで指定できる主な種類一覧cursorプロパティには数多くの種類が存在します。その中でも、よく利用されているカーソルの種類と役割は下記の通りです。pointer:人差し指のようなマークのカーソル。リンクやボタンなどクリックできる要素に利用されるdefault:よく見慣れている矢印状のカーソルnone:カーソルを非表示にするauto:cursorの初期値。リンクの場合ポインターになったり、標準時は矢印カーソルになったりと場面によって変わるtext:I状のカーソルで、テキストを選択しやすい形のカーソルcrosshair:十字形のカーソル。move:十字形で先端が矢印仕様になっているカーソル。要素を移動するときによく利用されるwait:処理中を表すときに利用されるカーソル上記の種類はカーソルの中でもよく利用されるので、この記事をきっかけに覚えておくとよいでしょう。cursorの使い方をサンプルコードを用いて解説cursorは下記のように入力します。カーソルの種類;}カーソルの種類を変えたい要素をセレクタで指定し、cursorの値でカーソルの種類を指定します。class="test">テストアイテム1</p></body></html>pタグは文字列なので、cursorの初期値であるautoの場合はI状のカーソルが表示されます。pointer;」を指定すると、pタグ内にマウスを置いたときのカーソルを人差し指型に変更できます。ほかのカーソルも同じ方法で指定できるので、サンプルコードをコピペして試してみてくださいね。cursorに画像を指定する方法cursorプロパティにURL関数を使って画像を指定することで、マウスカーソルに画像を表示できます。カーソルの種類;上記のように、カーソルとして表示したい画像とカーソルの種類を指定します。画像だけ指定しても表示されないので、必ず2つの値を指定しましょう。カーソルの種類に指定した値は、もしカーソルとして指定した画像が表示されなかったときに代用として表示されます。cursorが効かないときの対処法cursorが効かないときは、下記の内容に該当していないかチェックしてみましょう。positionプロパティなどが原因で別の要素が上に被っている画像を指定するときにurl()のみ指定しているpositionプロパティで配置した要素がcursorを指定した要素の上に被ると、positionプロパティで配置した要素にマウスが当たるのでcursorが効きません。上記の問題でcursorが効かないときは、z-indexプロパティで表示順位を変えるとよいでしょう。cursorに画像を指定するときにurl()だけ指定して、2番目の値にcursorの種類を指定しないことで効かないことも多いです。cursorに画像を指定するときは、url()とカーソルの種類を必ず指定しましょう。まとめ今回は、CSSのcursorプロパティでカーソルの種類を変える方法について解説しましたが、いかがでしたでしょうか。cursorで指定できるカーソルの種類を把握することで、場面に適したカーソルを指定できるようになります。WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。資料をダウンロードするIT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。資料をダウンロードする働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。ペースでエンジニア転職を目指す。