カーソルの形を変更する

カーソルの形を変更する

カーソルの形を変更するには、cursorプロパティを使います。

カーソルの変更は以下のように記述します。

.sample {
cursor: 値;
}

カーソル一覧

「値」の列にカーソルを合わせると、実際の表示を確認できます。

説明
auto ブラウザが自動選択したカーソル
default 既定のカーソル
none カーソルを表示しない
context-menu コンテキストメニュー
help ヘルプカーソル
pointer リンクポインタ
progress 進行中カーソル
wait 待機・処理中カーソル
cell セル選択カーソル
crosshair 十字カーソル
text テキスト選択カーソル
vertical-text 縦書きテキスト選択カーソル
alias エイリアス作成カーソル
copy コピーカーソル
move 移動カーソル
no-drop ドロップ禁止カーソル
not-allowed 禁止カーソル
all-scroll 任意の方向にスクロール
col-resize 左右にリサイズ
row-resize 上下にリサイズ
n-resize 北(上)方向にリサイズ
w-resize 西(左)方向にリサイズ
s-resize 南(下)方向にリサイズ
e-resize 東(右)方向にリサイズ
nw-resize 北西(左上)方向にリサイズ
ne-resize 北東(右上)方向にリサイズ
sw-resize 南西(左下)方向にリサイズ
se-resize 南東(右下)方向にリサイズ
ew-resize 東西(左右)方向にリサイズ
ns-resize 南北(上下)方向にリサイズ
nesw-resize 北東(右上)から南西(左下)方向にリサイズ
nwse-resize 北西(左上)から南東(右下)方向にリサイズ

オリジナルカーソルの設定方法

任意の画像をカーソルとして使用できます。

オリジナルカーソルが表示できない場合にどのカーソルを表示するかも記述します。
以下のコードでは「default」カーソルを表示しています。

.sample {
cursor: url(画像ファイルURL), default;
}

複数設定しておくこともできます。

.sample {
cursor: url(example.cur), url(example.gif), auto;
}

参考サイト

下のボタンを押すと拍手送信&メッセージフォームが開きます。→WEB拍手お返事