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">
    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;
}

構文

css
/* キーワード値 */
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

公式定義

初期値auto
適用対象すべての要素
継承あり
計算値指定通り、ただし <url> の値は絶対パスになる
アニメーションの種類離散値

形式文法

cursor = 
  [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ 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 ]  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

使用上の注意

アイコンの大きさの制限

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

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

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

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

iPadOS

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

その他の注意

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

例

カーソルの種類の設定

css
.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

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

仕様書

Specification
CSS Basic User Interface Module Level 4
# cursor

ブラウザーの互換性

関連情報