1. TOP
  2. リファレンス
  3. CSSでカーソルの形を変えるにはcursorを使おう

CSSでカーソルの形を変えるにはcursorを使おう

cursorプロパティは、マウスカーソルの種類を変更する際に使います。

基本的にマウスカーソルの形は、その場にあった形に自動で変化しています。例えばテキストに乗っている時とリンクに乗っている時では形が変化しています。

<p href="" id="demo_242">テキスト</p>
<a href="" id="demo_242">リンク</a>
#demo_242{
    cursor:auto;
}

テキスト

リンク

このようにその場に合わせてマウスカーソルは形を自動で変えていますが、cursorプロパティを使えば好きなカーソルの形を指定することができます。

cursorの使い方

マウスカーソルの種類を変更には下記のように使います。

cursor: 値;

値にはキーワードが入ります。例えば、リンクのカーソルをクエスチョンマークに変える例を見て見ましょう。

<a href="" id="demo_240-1">これは通常のリンクです</a>
 <br>
 <a href="" id="demo_240-2">これはクエスチョンマークリンクです</a>
 #demo_240-2{
   cursor: help;
 }
 

一つ目のリンクは、何も指定していないので、マウスカーソルを乗せてもいつも通りの形ですが、二つ目のリンクに乗せるとマウスカーソルがクエスチョンマークになっているのがわかると思います。

ヘルプの表示などで使うなどすると、ユーザーに何を表しているのかをより直感的に伝えることができるようになりますね。

代表的なcursorの値

cursorの値にはとても多くの種類が用意されていますが、基本的にはよく使うものは限られてきます。代表的なもの紹介します。

  • auto
    初期値です。状況に応じて自動で決定されます。
  • default
    デフォルトのマウスカーソルを指定します。
  • pointer
    リンクポインタ
  • crosshair
    十字
  • move
    移動カーソル
  • text
    テキスト
  • help
    ヘルプカーソル
  • wait
    待機状態カーソル
  • url(URI)
    オリジナル画像を指定します。

オリジナル画像のカーソルについて

画像のURLを指定することで、オリジナル画像のカーソルにすることができます。使い方は下記のようにURLと、キーワードを指定します。

cursor: url(画像のパス), auto;

URLには画像のパスを指定します。その後ろにカンマに続けて、画像が表示できない場合の指定を書いておきます。

上記の場合はautoを設定しているので、画像がない場合その場に応じたカーソルが表示されます。

様々なカーソルを実際にみてみよう

実際どのように表示されるのか見てみましょう。

 <a href="" id="demo_241-1" class="demo_241">auto</a>
 <br></br>
 <a href="" id="demo_241-2" class="demo_241">default</a>
 <br></br>
 <a href="" id="demo_241-3" class="demo_241">pointer</a>
 <br></br>
 <a href="" id="demo_241-4" class="demo_241">crosshair</a>
 <br></br>
 <a href="" id="demo_241-5" class="demo_241">move</a>
 <br></br>
 <a href="" id="demo_241-6" class="demo_241">text</a>
 <br></br>
 <a href="" id="demo_241-7" class="demo_241">help</a>
 <br></br>
 <a href="" id="demo_241-8" class="demo_241">auhelpto</a>
 <br></br>
 <a href="" id="demo_241-9" class="demo_241">url</a>
 <br></br>
#demo_241-1{
   cursor: auto;
 }
 #demo_241-2{
   cursor: default;
 }
 #demo_241-3{
   cursor: pointer;
 }
 #demo_241-4{
   cursor: crosshair;
 }
 #demo_241-5{
   cursor: move;
 }
 #demo_241-6{
   cursor: text;
 }
 #demo_241-7{
   cursor: help;
 }
 #demo_241-8{
   cursor: wait;
 }
 #demo_241-9{
   cursor: url(https://wunderstand.net/wp-content/uploads/2019/08/cursol.png), auto;
 }
 .demo_241{
   padding: 10px;
   border: 1px solid #000;
 }

それぞれにマウスを乗せてみると、どのようにカーソルが変化するかみることができので試してみてください。