cursor:マウスポインタのカーソルの種類を指定する

初期値 auto
適用対象 全ての要素
継承 する
アニメーション 離散値
対応ブラウザ caniuseで確認

cursorプロパティの説明

cursorは、マウスポインターが要素に重なった時に表示されるカーソルの種類を指定します。一般的な挙動は、ブラウザの既定値に従って表示される代表的なアイコンで確認できます。多くの場合、カーソルはユーザーの操作とコンピュターの状況との間に立って認識を仲介する役目を担います。

カーソルの形状は、あらかじめ用意されているキーワードや画像のURLを使って指定します。オリジナルの画像を使用する場合、一般的なメディア拡張子の他に.cur(カーソルファイル)や.ani(アニメーションカーソル)が使用できます。

カーソルに画像を指定する場合は、URLを記述した後にカンマ区切りで何らかのキーワードを併記しなければなりません。カーソル画像の寸法について共通した制限はありませんが、ブラウザの仕様を超えたサイズの画像を指定した場合は無視されます。そして何らかの理由で画像が表示されなかった場合も、代替表示させるカーソルのキーワードが必用になります。この場合、autoを指定しておくとブラウザの判断で自動的にカーソルの種類が決まります。

cursorに指定できる値

<url>
カーソルに画像を使う場合の指定です。url()の形式を使って外部ファイルをURLで呼び出します。複数の画像をカンマ区切りのリスト形式で記述しておくと、ブラウザが対応していない画像形式の代替画像を提供することができます。この値を使用する場合は、末尾にカンマ区切りでキーワードを併記します。
キーワード値
カーソルの種類を表すキーワードです。あらかじめ用意されている予約語の中から任意のものを指定します。キーワードはカーソルの形状が変化した時の記号の意味を表します。キーワードの一覧はサンプルの中で解説します。

cursorの使い方とサンプル

cursorプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
cursor: auto;
cursor: pointer;
cursor: wait;

/* URLによる画像指定とキーワード */
cursor: url(pictname.cur), pointer;

/* グローバル値 */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: unset;

cursorの実例

それでは実際にcursorの種類を見て行きましょう。以下の一覧表では、各キーワードを指定した場合にブラウザがどのようなカーソルを表示させるのかを確認できます。マウスポインタを表の上に重ねると、該当するキーワードに応じたカーソルに変化します。

キーワード 説明
一般
auto ブラウザがコンテキストに基づいて自動的にカーソルを決定します。
default 通常の矢印を表示します。
none カーソルを表示しません。
リンク関連
context-menu コンテキストメニューが使用できることを表します。
help ヘルプ項目であることを表します。
pointer リンクを示すポインターを表します。
progress コンピューターがタスクの処理中であることを表します。同時にユーザーが操作可能であることを表します。
wait コンピューターがタスクの処理中であることを表します。同時にユーザーが操作不可であることを表します。
選択
cell 選択可能な表のセルを表します。
crosshair 二次元座標の交差である十字を表します。
text 選択可能なテキストであることを表します。
vertical-text 選択可能な縦書きのテキストであることを表します。
操作
alias エイリアスやショートカットを表します。
copy コピーできることを表します。
move 移動できることを表します。
no-drop その位置にアイテムをドロップできないことを表します。
not-allowed リクエストした内容が実行できないことを表します。
grab アイテムを掴んでドラッグできることを表します。
grabbing アイテムを掴んでドラッグしている状態を表します。
スクロール・リサイズ
all-scroll 任意の方向へスクロールできることを表します。
col-resize 可変式のボックスで辺を水平方向に移動できることを表します。
row-resize 可変式のボックスで辺を垂直方向に移動できることを表します。
n-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に関連するCSSプロパティ

インターフェイスの装飾
accent-color 一部の要素の強調色を指定する
all 要素の全てのプロパティを初期化する
appearance ブラウザが独自に描画する標準的なUIをCSSで変更できるようにする
caret-color テキストの挿入位置や選択補助として表示されるキャレットの色を指定する
cursor マウスポインタのカーソルの種類を指定する
scrollbar-base-color スクロールバーのベースになる色を指定する
scrollbar-arrow-color スクロールバーの矢印にあたる色を指定する
scrollbar-face-color スクロールバーの表面にあたる色を指定する
scrollbar-3dlight-color スクロールバーの左端と上端にあたる色を指定する
scrollbar-highlight-color スクロールバーのハイライトにあたる色を指定する
scrollbar-shadow-color スクロールバーの影にあたる色を指定する
scrollbar-darkshadow-color スクロールバーの右端と下端にあたる色を指定する