cursor

試してみましょう

cursor: help;

cursor: wait;

cursor: crosshair;

cursor: not-allowed;

cursor: zoom-in;

cursor: grab;

<section class="default-example container" id="default-example">
  <div id="example-element">
    Move over this element to see the cursor style.
  </div>
</section>

#example-element {
  display: flex;
  background-color: #1766aa;
  color: white;
  height: 180px;
  width: 360px;
  justify-content: center;
  align-items: center;
  font-size: 14pt;
  padding: 5px;
}

構文

/* キーワード値 */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;

/* URL とキーワードによる代替 */
cursor: url(hand.cur), pointer;

/* URL と座標とキーワードによる代替 */
cursor:
  url(cursor_1.png) 4 12,
  auto;
cursor:
  url(cursor_2.png) 2 2,
  pointer;

/* URL と代替 URL （一部は座標つき）、そして必須のキーワードによる代替 */
cursor:
  url(cursor_1.svg) 4 5,
  url(cursor_2.svg),
  /* …, */ url(cursor_n.cur) 5 5,
  progress;

/* グローバル値 */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

cursor プロパティはゼロ個以上の <url> をカンマで区切ったものと、それに続く必須のキーワード値によって指定します。 それぞれの <url> は画像ファイルを指します。 ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。

それぞれの <url> には空白で区切った 2 つの数値を続けることができ、カーソルのホットスポットを画像の左上隅からの相対位置、 <x> および <y> 座標で設定します。

値

<url> 省略可

url() またはカンマ区切りのリスト url(), url(), … で画像の URL を指定します。複数の <url> は、一部のカーソル画像形式に対応していなかった場合の代替として設定できます。 代替リストの最後には、キーワード値のいずれか 1 つ以上を指定しなければなりません。

<x>, <y> 省略可

任意でホットスポットの x 座標と y 座標を指定します。これはカーソルが指している先の詳細な位置です。

数値は画像ピクセル単位です。 これらは画像の左上隅（0 0 に相当）からの相対座標であり、カーソル画像の境界でクランプされます。 これらの値が指定されていない場合、ファイル自体から読み込まれることがあり、そうでない場合は画像の左上隅が既定値となります。

keyword

キーワード値は指定する必要があり、使用するカーソルの種類、または指定したアイコンをすべて読み込めなかった場合に使用する代替カーソルのどちらか示します。

利用可能なキーワードは以下の一覧表に掲載されています。カーソルなしを意味している none 以外には、カーソルがどのように表示されるかを示す画像があります。表の行にマウスカーソルを当てると、さまざまなカーソルキーワードの値が現在のブラウザーに与える影響を見ることができます。

カテゴリー	CSS 値	例	説明
一般	auto		現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにカーソルを当てた時は text キーワードを指定した場合と同様です。
	default		プラットフォームに依存する既定のカーソルです。ふつうは矢印です。
	none		カーソルを表示しません。
リンクおよび状態	context-menu		コンテキストメニューが利用できることを示します。
	help		ヘルプが使用可能であることを示します。
	pointer		カーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。
	progress		プログラムがバックグラウンドでビジー状態であるが、（wait とは異なり）ユーザーがインターフェイスを操作可能であることを示します。
	wait		プログラムがビジー状態で、（progress とは異なり）ユーザーによる操作が不可能である状態を示します。 よく砂時計や腕時計の画像が使われます。
選択	cell		表のセルまたは一連のセルが選択できることを示します。
	crosshair		十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。
	text		テキストを選択可能であることを示します。通常、I ビームが表示されます。
	vertical-text		縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。
ドラッグ＆ドロップ	alias		エイリアスやショートカットが作成されることを示します。
	copy		何かがコピーされることを示します。
	move		何かが移動されることを示します。
	no-drop		現在の位置にアイテムがドロップできないことを示します。 Firefox バグ 275173: Windows および Mac OS X では、no-drop は not-allowed と同じです。
	not-allowed		要求された操作が受け付けられないことを示します。
	grab		何かをグラブ (移動のためにドラッグ) することができることを示します。
	grabbing		何かをグラブ (移動のためにドラッグ) していることを示します。
サイズ変更＆スクロール	all-scroll		何かが任意の方向にスクロール (パン) 可能であることを示します。 Firefox バグ 275174: Windows では、 all-scroll は move 同じです。
	col-resize		アイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。
	row-resize		アイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。
	n-resize		辺が移動できることを表します。例えば、se-resize のカーソルはボックスの*南東* (south-east) の角から移動を開始した時に使われます。 環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 n-resize と s-resize は ns-resize と同じになります。
	e-resize
	s-resize
	w-resize
	ne-resize
	nw-resize
	se-resize
	sw-resize
	ew-resize		双方向へのサイズ変更が可能であることを示します。
	ns-resize
	nesw-resize
	nwse-resize
拡大/縮小	zoom-in		拡大/縮小が可能であることを示します。
	zoom-out

公式定義

形式文法

cursor = 
  <cursor-image>#? <cursor-predefined>  

<cursor-image> = 
  [ <url> | <url-set> ] [ <number>{2} ]?  

<cursor-predefined> = 
  auto           |
  default        |
  none           |
  context-menu   |
  help           |
  pointer        |
  progress       |
  wait           |
  cell           |
  crosshair      |
  text           |
  vertical-text  |
  alias          |
  copy           |
  move           |
  no-drop        |
  not-allowed    |
  grab           |
  grabbing       |
  e-resize       |
  n-resize       |
  ne-resize      |
  nw-resize      |
  s-resize       |
  se-resize      |
  sw-resize      |
  w-resize       |
  ew-resize      |
  ns-resize      |
  nesw-resize    |
  nwse-resize    |
  col-resize     |
  row-resize     |
  all-scroll     |
  zoom-in        |
  zoom-out       

使用上の注意

アイコンの大きさの制限

仕様書では cursor の画像サイズは制限されていませんが、ユーザーエージェントは一般的に誤用を防ぐために制限をしています。 例えば、Firefox と Chromium ではカーソル画像は既定では 128x128 ピクセルに制限されていますが、カーソル画像のサイズは 32x32 ピクセルに制限することを推奨します。ユーザーエージェントが対応している最大サイズよりも大きな画像を使用してカーソルを変更しても、通常は無視されます。

対応している画像ファイル形式

ユーザーエージェントは、 PNG ファイル、自然なサイズを持つ安全な静的モードの SVG v1.1 ファイル、他のプロパティの画像に対応しているアニメーション以外の画像ファイル形式に対応するよう、この仕様書は要求しています。 デスクトップブラウザーは .cur ファイル形式にも広く対応しています。

この仕様書はさらに、ユーザーエージェントは、他のプロパティの画像について対応している他のアニメーション画像ファイル形式とともに、自然なサイズを含む安全なアニメーションモードの SVG v1.1 ファイルも対応すべきであると示しています。 ユーザーエージェントは自然なサイズを持たない静的な SVG 画像とアニメーション SVG 画像の両方に対応することもできます。

iPadOS

iPadOS はトラックパッドやマウスなどのポインター機器に対応しています。既定では、 iPad のカーソルは円形で表示され、ポインターに現れる値を変更する唯一の対応する値は text です。

その他の注意

ツールバーの領域と交差するカーソルの変更は、なりすましを避けるために一般的にブロックされます。

例

カーソルの種類の設定

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* URL を使用する場合は、代替のキーワード値が必要です。 */
.baz {
  cursor: url("hyper.cur"), auto;
}

仕様書

ブラウザーの互換性

関連情報

• pointer-events
• <url> 型
• SVG の cursor 属性