cursor
cursor
は 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
十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。 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
公式定義
初期値 | 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()>
<x> =
x
<y> =
y
<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
です。
その他の注意
ツールバーの領域と交差するカーソルの変更は、なりすましを避けるために一般的にブロックされます。
例
カーソルの種類の設定
.foo {
cursor: crosshair;
}
.bar {
cursor: zoom-in;
}
/* URL を使用する場合は、代替のキーワード値が必要です。 */
.baz {
cursor: url("hyper.cur"), auto;
}
仕様書
Specification |
---|
CSS Basic User Interface Module Level 4 # cursor |
ブラウザーの互換性
BCD tables only load in the browser