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

cursorプロパティの説明

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

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

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

cursorに指定できる値

<url>

カーソルに画像を使う場合の指定です。url()の形式を使って外部ファイルをURLで呼び出します。複数の画像をカンマ区切りのリスト形式で記述しておくと、ブラウザが対応していない画像形式の代替画像を提供することができます。この値を使用する場合は、末尾にカンマ区切りでキーワードを併記します。

keyword

カーソルの種類を表すキーワードです。あらかじめ用意されている予約語の中から任意のものを指定します。キーワードはカーソルの形状が変化した時の記号の意味を表します。キーワードの一覧はサンプルの中で解説します。

cursorの使い方とサンプルコード

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

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

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

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

cursorの実例

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