cursor
cursor
は CSS のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルの種類を設定します。
試してみましょう
構文
css
/* キーワード値 */
cursor: pointer;
cursor: auto;
/* URL とキーワードによる代替 */
cursor: url(hand.cur), pointer;
/* URL と座標とキーワードによる代替 */
cursor:
url(cursor1.png) 4 12,
auto;
cursor:
url(cursor2.png) 2 2,
pointer;
/* グローバル値 */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: unset;
cursor
プロパティはゼロ個以上の <url>
をカンマで区切ったものと、それに続く必須のキーワード値によって指定します。それぞれの <url>
は画像ファイルを指します。ブラウザーは最初に指定された画像を読み込もうとし、ない場合は次に代替されて、いずれも画像が読み込めないとき (または指定がなかったとき) は、キーワード値に代替されます。
それぞれの <url>
には空白で区切った 2 つの数値を続けることができ、<x><y>
座標を表します。これは画像の左上隅からの相対位置で、カーソルのホットスポットを設定します。
例えば、これは <url>
値を使用して 2 つの画像を指定し、<x><y>
座標を 2 つ目に設定し、どちらの画像も読み込めなかったときは progress
キーワードで代替されるように指定しています。
css
cursor:
url(one.svg),
url(two.svg) 5 5,
progress;
値
-
<url>
url(…)
の形式か、またはカンマ区切りのリストurl(…), url(…), …
で画像の URL を指定します。複数のurl()
の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。詳細は cursor プロパティにおける URL 値の使用を参照して下さい。 <x>
<y>
Experimental- : 任意で x 座標と y 座標を指定します。2 つの 32 未満の非負数で、単位なしです。
- キーワード値
- : 値の上にマウスを当てると、各項目の実際の表示を確認できます。
カテゴリー 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](https://bugzil.la/275173): Windows および Mac OS X では、no-drop
はnot-allowed
と同じです。not-allowed
要求された操作が受け付けられないことを示します。 grab
何かをグラブ (移動のためにドラッグ) することができることを示します。 grabbing
何かをグラブ (移動のためにドラッグ) していることを示します。 サイズ変更&スクロール all-scroll
何かが任意の方向にスクロール (パン) 可能であることを示します。
[Firefox バグ 275174](https://bugzil.la/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 =
[ [ <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( <string> <url-modifier>* ) |
src( <string> <url-modifier>* )
例
カーソルの種類の設定
css
.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