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>
    • : 任意で 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 現在の位置にアイテムがドロップできないことを示します。
      [Firefox バグ 275173](https://bugzil.la/275173): Windows および Mac OS X では、no-drop は not-allowed と同じです。
      not-allowed not-allowed.gif 要求された操作が受け付けられないことを示します。
      grab 何かをグラブ (移動のためにドラッグ) することができることを示します。
      grabbing 何かをグラブ (移動のためにドラッグ) していることを示します。
      サイズ変更＆スクロール all-scroll all-scroll.gif 何かが任意の方向にスクロール (パン) 可能であることを示します。
      [Firefox バグ 275174](https://bugzil.la/275174): Windows では、 all-scroll は move 同じです。
      col-resize col-resize.gif アイテムや列が水平方向にサイズ変更可能であることを示します。通常、左右を指す矢印とそれを仕切る垂直線が表示されます。
      row-resize row-resize.gif アイテムや行が垂直方向にサイズ変更可能であることを示します。通常、上下を指す矢印とそれを仕切る水平線が表示されます。
      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 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 の値は絶対パスになる
アニメーションの種類離散値

形式文法

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

関連情報