cursor

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

構文

/* キーワード値 */
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 キーワードで代替されるように指定しています。

cursor: url(one.svg), url(two.svg) 5 5, progress;

  • <url>

url(…) の形式か、またはカンマ区切りのリスト url(…), url(…), … で画像の URL を指定します。複数の url() の指定は、前候補の画像形式がサポートされていなかった場合は代替として機能します。リストの最後には、キーワード値の何れかを一つ以上指定しなければなりません。詳細は cursor プロパティにおける URL 値の使用を参照して下さい。

  • <x> <y>
    • : 任意で x 座標と y 座標を指定します。2 つの 32 未満の非負数で、単位なしです。
  • キーワード値
  • : 値の上にマウスを当てると、各項目の実際の表示を確認できます。
    カテゴリー CSS 値 説明
    一般 auto 現在のコンテキストに基づき表示するカーソルをユーザーエージェントが決定します。例えば、テキストにマウスオーバーした時には text キーワードを指定した場合と同様です。
    default プラットフォームに依存する既定のカーソルです。ふつうは矢印です。
    none カーソルを表示しません。
    リンクおよび状態 context-menu context-menu.png コンテキストメニューが利用できることを示します。
    help ヘルプが使用可能であることを示します。
    pointer カーソルがリンクを示すポインターになります。ふつうは指差す手の画像です。
    progress プログラムがバックグラウンドでビジー状態であるが、(wait とは異なり) ユーザーがインターフェイスを操作可能であることを示します。
    wait プログラムがビジー状態で、(progress とは異なり) ユーザーによる操作が不可能である状態を示します。よく砂時計や腕時計の画像が使われます。
    選択 cell 表のセルまたは一連のセルが選択できることを示します。
    crosshair 十字カーソルで、多くの場合はビットマップ内の選択を示すために使用されます。
    text テキストを選択可能であることを示します。通常、I ビームが表示されます。
    vertical-text vertical-text.gif 縦書きのテキストを選択可能であることを示します。通常、水平の I ビームが表示されます。
    ドラッグ&ドロップ alias エイリアスやショートカットが作成されることを示します。
    copy 何かがコピーされることを示します。
    move 何かが移動されることを示します。
    no-drop no-drop.gif 現在の位置にアイテムがドロップできないことを示します。
    バグ 275173: Windows および Mac OS X では、no-dropnot-allowed と同じです。
    not-allowed not-allowed.gif 要求された操作が受け付けられないことを示します。
    grab 何かをグラブ (移動のためにドラッグ) することができることを示します。
    grabbing 何かをグラブ (移動のためにドラッグ) していることを示します。
    サイズ変更&スクロール all-scroll all-scroll.gif 何かが任意の方向にスクロール (パン) 可能であることを示します。
    バグ 275174: Windows では、 all-scrollmove 同じです。
    col-resize col-resize.gif アイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。
    row-resize row-resize.gif アイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。
    n-resize 上方向へのサイズ変更カーソルの例 辺が移動できることを表します。例えば、se-resize のカーソルはボックスの*南東* (south-east) の角から移動を開始した時に使われます。
    環境によっては、等価の双方向のサイズ変更カーソルが表示されます。例えば、 n-resizes-resizens-resize と同じになります。
    e-resize 右方向へのサイズ変更カーソルの例
    s-resize 下方向へのサイズ変更カーソルの例
    w-resize 左方向へのサイズ変更カーソルの例
    ne-resize 右上方向へのサイズ変更カーソルの例
    nw-resize 左上方向へのサイズ変更カーソルの例
    se-resize 右下方向へのサイズ変更カーソルの例
    sw-resize 左下方向へのサイズ変更カーソルの例
    ew-resize 3-resize.gif 双方向へのサイズ変更が可能であることを示します。
    ns-resize 6-resize.gif
    nesw-resize 1-resize.gif
    nwse-resize 4-resize.gif
    拡大/縮小 zoom-in zoom-in.gif

    拡大/縮小が可能であることを示します。

    zoom-out zoom-out.gif

使用上の注意

仕様書では cursor について寸法の制限は定義されていませんが、それぞれのユーザーエージェントには制限がある場合があります。ブラウザーが対応している寸法の範囲を超えた画像を使用してカーソルを変更しようとすると、一般的には単に無視されます。

カーソルの寸法の制限に関するメモは、ブラウザーの互換性の表をチェックしてください。

公式定義

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

形式文法

[ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | 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 | grab | grabbing ] ]

カーソルの種類の設定

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

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

仕様書

Specification
CSS Basic User Interface Module Level 4 (CSS User Interface 4)
# cursor

ブラウザーの互換性

BCD tables only load in the browser

関連情報