cursor
Baseline
広く利用可能
*
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2021年12月以降、すべてのブラウザーで利用可能です。
もっと多くのブラウザーがこの機能に対応してほしいですか？ 理由を教えてください。
* この機能の一部は、対応レベルにばらつきがある場合があります。
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以外には、カーソルがどのように表示されるかを示す画像があります。表の行にマウスカーソルを当てると、さまざまなカーソルキーワードの値が現在のブラウザーに与える影響を見ることができます。
公式定義
| 初期値 | auto |
|---|---|
| 適用対象 | すべての要素 |
| 継承 | あり |
| 計算値 | 指定通り、ただし <url> の値は絶対パスになる |
| アニメーションの種類 | 離散値 |
形式文法
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属性