cursor

cursor は CSS のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルを設定します。

カーソル設定により、テキスト選択、ヘルプやコンテキストメニューの有効化、コンテンツのコピー、表のリサイズなど、現在の位置で実行できるマウス操作をユーザーに知らせるべきです。 キーワードを使用してカーソルの種類を指定するか、使用する固有のアイコンを読み込むことができます(オプションで代替画像、そして最終的なフォールバックとしてキーワードが必須です)。

試してみましょう

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">
 この要素の上にカーソルを移動してスタイルを確認してください。
 </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	2 本の細い線で校正されたプラス記号	十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。
	text	垂直の I ビーム	テキストを選択可能であることを示します。通常、I ビームが表示されます。
	vertical-text	水平の I ビーム	縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。
ドラッグ&ドロップ	alias	左上向きの太い矢印が、右上向きのカーブした矢印が描かれた小さなフォルダーアイコンを部分的に隠しています	エイリアスやショートカットが作成されることを示します。
	copy	左上向きの太い矢印が、プラス記号の付いた小さなフォルダーアイコンを部分的に隠しています	何かがコピーされることを示します。
	move	2 本の細い線で作られたプラス記号。4 方向の外向きの小さな矢印	何かが移動されることを示します。
	no-drop	ポインターアイコンと不許可アイコン	現在の位置にアイテムがドロップできないことを示します。 Firefox バグ 275173: Windows および Mac OS X では、no-drop は not-allowed と同じです。
	not-allowed	不許可アイコンで、丸に線を引いたものです。	要求された操作が受け付けられないことを示します。
	grab	開ききった手のアイコン	何かをグラブ (移動のためにドラッグ) することができることを示します。
	grabbing	手の甲の閉じられた手のアイコン	何かをグラブ (移動のためにドラッグ) していることを示します。
サイズ変更&スクロール	all-scroll	中くらいのドットとそれを囲む 4 つの三角形のアイコン	何かが任意の方向にスクロール (パン) 可能であることを示します。 Firefox バグ 275174: Windows では、 all-scroll は move 同じです。
	col-resize	col-resize.gif	アイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。
	row-resize	2 本の細い並列水平線に、上向きの小矢印と下向きの小矢印	アイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。
	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	zoom-out.gif

公式定義

形式文法

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 属性