ユーザー操作
cursor
cursor は、要素の上にマウスなどのポインターを乗せたときのカーソルの形を指定します。
構文[ <cursor-image> , ]* <cursor-predefined> …
[ <cursor-image> , ]* <cursor-predefined>
<cursor-image> = [ <url> | <url-set> ] <number>{2}?
<cursor-predefined> = 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プレビュー
コード
.box {
cursor: pointer;
}コントロール
解説
値の書き方
カーソルの形をキーワードで書きます。初期値は auto で、ブラウザが場所に合わせて選びます（文字の上では I 字の text、それ以外では矢印の default）。cursor は継承するので、親に書けば中の要素にも付きます。
プレビューの箱やコントロールのボタンにポインターを乗せると、その形のカーソルになります。auto と default を比べると、見本の文章の上でカーソルが変わるかどうかの違いが分かります。
キーワードの種類
- ふつう：
auto・default・none（カーソルを消す） - リンクと状態：
pointer（リンク）・help・context-menu・progress（裏で処理中で、操作はできる）・wait（処理が終わるまで操作できない） - 選択：
text・vertical-text（縦書きの文字）・cell（表のセル）・crosshair - ドラッグ：
grab・grabbing・move・copy・alias・no-drop・not-allowed - 大きさを変える・スクロール：
n-resizeなどの方角つき（n・e・s・w が北・東・南・西）、ew-resizeなどの両向き、col-resize・row-resize・all-scroll - 拡大・縮小：
zoom-in・zoom-out
カーソルの絵は OS とブラウザが描くので、環境によって形が違います。n-resize と s-resize のように、片向きのキーワードが両向きの矢印で出る環境もあります。
画像のカーソル
url(cursor.png) 4 4, pointer のように、画像を書くこともできます。画像の後ろの 2 つの数値は、画像の左上から測った、カーソルが指す点の位置です。カンマで区切って画像をいくつも並べられますが、最後には画像が読めないときのキーワードが必ず要ります。このページのコントロールでは、キーワードだけを選べます。
Firefox と Chrome・Edge は、128×128 ピクセルより大きい画像を使いません。どの環境でも出せるように、32×32 ピクセル以内にしておくのがおすすめです。
形が変わるだけ
cursor が変えるのは見た目だけで、pointer にしても要素がクリックできるようにはならず、not-allowed にしてもクリックは止まりません。押せるものは button や a で作り、押せなくするなら disabled 属性などを使います。
スマートフォンなどのタッチ操作ではカーソルが出ないので、cursor の形だけに頼った案内はしないようにします。iPad でマウスやトラックパッドを使うときも、効くのは text だけです。