【CSS】cursor プロパティの使い方｜マウスカーソルの形状を変える方法

ボタンにマウスを乗せると矢印が指の形に変わったり、ドラッグできる要素の上で手のひらのアイコンが出たり——こうした「マウスカーソルの見た目」を切り替えているのが CSS の cursor プロパティです。カーソルの形は、その要素がクリックできるのか・入力できるのか・今は操作できないのかを、言葉を使わずに伝えてくれる大切な手がかりになります。

この記事では cursor の基本的な書き方から、よく使う値の一覧、url() で自分の画像をカーソルにする方法、そして「思ったようにカーソルが変わらない」ときの原因までを、初心者の方にも分かるように解説します。

cursor プロパティとは

cursor は、マウスポインターがその要素の上に来たときに表示されるカーソルの形状を指定するプロパティです。指定できる値の多くは pointer や text といったキーワードで、ブラウザや OS があらかじめ用意している標準のカーソル画像が表示されます。書き方はとてもシンプルで、対象の要素に対して次のように1行書くだけです。

/* このボタンにマウスを乗せると指の形（手）のカーソルになる */
.button {
  cursor: pointer;
}

カーソルは、その要素の上にポインターがある間だけ変化します。子要素に別の cursor が指定されていれば、そちらが優先されます。値は継承されるため、親要素に指定すると、上書きしていない子要素にも同じカーソルが引き継がれます。

代表的なカーソルの形を実際に触ってみる

言葉で説明するより、実際にマウスを乗せて形を確かめるのが一番です。下のデモは、それぞれのマスに別々の cursor 値を指定したものです。マスの上にマウスポインターを移動させると、カーソルの形が値ごとに変わります（形状は OS やブラウザによって多少異なります）。CSS タブを開くと、どんなスタイルを当てているかも確認できます。

<div class="cursor-demo">
  <div class="cursor-box" style="cursor: pointer;">pointer</div>
  <div class="cursor-box" style="cursor: default;">default</div>
  <div class="cursor-box" style="cursor: text;">text</div>
  <div class="cursor-box" style="cursor: move;">move</div>
  <div class="cursor-box" style="cursor: not-allowed;">not-allowed</div>
  <div class="cursor-box" style="cursor: grab;">grab</div>
  <div class="cursor-box" style="cursor: wait;">wait</div>
  <div class="cursor-box" style="cursor: help;">help</div>
  <div class="cursor-box" style="cursor: ew-resize;">ew-resize</div>
  <div class="cursor-box" style="cursor: zoom-in;">zoom-in</div>
</div>

.cursor-demo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  padding: 16px;
}

.cursor-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  background: #f6f8fa;
  font-family: monospace;
  font-size: 14px;
  color: #24292f;
  user-select: none;
  transition: background 0.15s;
}

/* ホバーすると背景色が変わり、指定した形のカーソルが出る */
.cursor-box:hover {
  background: #dbeafe;
  border-color: #60a5fa;
}

よく使う cursor の値と意味

キーワードの値は数十種類ありますが、実務でよく使うものはそれほど多くありません。用途ごとに代表的な値と、それが表す意味を一覧にまとめました。UI を作るときに「この操作を伝えたい」という観点で選ぶと迷いにくくなります。

要素をリサイズするときのカーソルもよく使います。方向を表す値がいくつも用意されており、リサイズ可能なパネルの端などに指定します。

ボタンやリンクにカーソルを指定する

実務で一番多いのは、<a> や <button> のような本来クリックできる要素に pointer を、無効化した要素に not-allowed を指定するケースです。<a href> や標準のボタンには最初から pointer が付いていますが、<div> をボタン代わりにしている場合などは自分で指定する必要があります。

/* div で作った擬似ボタンにも手のカーソルを付ける */
.card-button {
  cursor: pointer;
}

/* 無効状態のボタンは「押せない」ことを示す */
.card-button:disabled,
.card-button.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

なお cursor: not-allowed はあくまで見た目だけを変えるものです。クリック自体を止める働きはないので、実際に操作を無効化したいときは disabled 属性を付けたり、JavaScript 側でイベントを止めたりする必要があります。

url() で画像をカスタムカーソルにする

標準のキーワードだけでなく、url() を使って自分で用意した画像をカーソルにすることもできます。書式は「url(画像のパス) X座標 Y座標, フォールバック値」です。座標の部分はカーソルの「ホットスポット」——つまり画像のどこがクリック位置になるかを、画像の左上を原点として指定します。省略すると左上（0 0）が基準になります。

.custom-area {
  /* 画像 → ホットスポット座標(4 4) → 最後にフォールバックのキーワード */
  cursor: url(/images/pointer.png) 4 4, pointer;
}

ここで重要なのが、カンマの後ろに書いた pointer のようなフォールバック値です。これは省略できません。画像が読み込めなかったり、指定した画像形式にブラウザが対応していなかったりした場合に、代わりに使われるキーワードです。フォールバックが無いと cursor の宣言全体が無効になり、指定が効かなくなります。複数の画像を並べて「1つ目がダメなら2つ目」とフォールバックを重ねることもできますが、最後は必ずキーワードで締めます。

画像のサイズにも注意が必要です。多くのブラウザでは、カーソル画像は 128×128 ピクセルまでを目安とし、それを超えると無視されて表示されなくなります。実際のカーソルとしては 32×32 程度が扱いやすく、大きすぎる画像は避けるのが無難です。形式は PNG が広く使えます。ホットスポット座標も画像内（0〜画像サイズの範囲）に収める必要があり、範囲外だと無効と見なされることがあります。

cursor: pointer が効かないとき

「pointer を指定したのに手の形にならない」という相談はよくあります。いくつか典型的な原因があるので、順に確認してみましょう。

子要素が親のカーソルを上書きしている

ボタンの中にテキストやアイコンの要素があり、そこに text や auto が効いていると、その部分だけカーソルが変わってしまいます。テキスト上では標準で I 字カーソルになるため、内側の要素にも cursor: pointer を継承させるか、ボタン全体を囲む要素に指定するのが確実です。

url() のフォールバックを書き忘れている

前の章で触れたとおり、url() の指定はフォールバックのキーワードが必須です。cursor: url(cur.png); のようにキーワードを付け忘れると宣言全体が無効になり、カーソルがまったく変わりません。画像パスの間違いで読み込めていないケースも同様なので、開発者ツールで画像が 404 になっていないかも確認しましょう。

タッチデバイスにはカーソルがない

スマートフォンやタブレットなどのタッチ操作にはマウスカーソルという概念がありません。そのため cursor の指定はタッチ環境では見た目に反映されません。あくまでマウス（ポインター）操作のための装飾だと理解しておくと、動作確認で戸惑わずに済みます。

まとめ

cursor プロパティは、要素の上でのマウスカーソルの形を切り替え、その要素が「クリックできる」「入力できる」「今は操作できない」といった状態を視覚的に伝えるためのものです。基本は pointer や text、not-allowed といったキーワードを1行指定するだけで、用途に合わせて使い分けます。

独自の画像をカーソルにしたいときは url() を使い、ホットスポット座標とフォールバックのキーワードを必ず添えます。画像サイズは 128px 以下を目安にし、大きすぎる画像は表示されないことも覚えておきましょう。うまく効かないときは、子要素による上書き・フォールバックの書き忘れ・タッチ環境という3点をまず疑うと、原因にたどり着きやすくなります。

参考ページ

• cursor – CSS: カスケーディングスタイルシート | MDN
• <url> – CSS: カスケーディングスタイルシート | MDN
• cursor – CSS: Cascading Style Sheets | MDN