CSS cursor

cursorとは、マウスカーソルのデザインを変化させるCSSプロパティです。特定の要素にカーソルが乗った時に、指の形などにすることができます。

cursor: type

type には次のうちいずれかを指定する。

type

以下の値から選択するか、URLを指定します。

意味
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 右(east)リサイズ
n-resize 上(north)リサイズ
ne-resize 右上(north west)リサイズ
nw-resize 左上(north west)リサイズ
s-resize 下(south)リサイズ
se-resize 右下(south east)リサイズ
sw-resize 左下(south west)リサイズ
w-resize 左(west)リサイズ
ew-resize 左右(east west)リサイズ
ns-resize 上下(north south)リサイズ
nesw-resize 右上から左下(north east to south west)リサイズ
nwse-resize 左上から右下上下左右(north west to south east)リサイズ
col-resize 水平方向にサイズが変更できることを表わす
row-resize 垂直方向にサイズが変更できることを表わす
all-scroll 全スクロール
zoom-in 拡大が可能であることを表わす
zoom-out 縮小が可能であることを表わす

cursorの使用例と表示サンプル

次にスタイルシート属性cursorを使用したHTMLの例を示します。

<p style="cursor: crosshair;">crosshair</p>
<p style="cursor: default;">default</p>
<p style="cursor: pointer;">pointer</p>
<p style="cursor: move;">move</p>
<p style="cursor: text;">text</p>
<p style="cursor: vertical-text;">text</p>
<p style="cursor: wait;">wait</p>
<p style="cursor: help;">help</p>
<p style="cursor: n-resize;">n-resize</p>
<p style="cursor: ne-resize;">ne-resize</p>
<p style="cursor: e-resize;">e-resize</p>
<p style="cursor: se-resize;">se-resize</p>
<p style="cursor: s-resize;">s-resize</p>
<p style="cursor: sw-resize;">sw-resize</p>
<p style="cursor: w-resize;">w-resize</p>
<p style="cursor: nw-resize;">nw-resize</p>
<p style="cursor: cell;">cell</p>
<p style="cursor: none;">none</p>
<p style="cursor: not-allowed;">not-allowed</p>
<p style="cursor: grab;">grab</p>
<p style="cursor: grabbing;">grabbing</p>
<p style="cursor: zoom-in;">zoom-in</p>
<p style="cursor: zoom-out;">zoom-out</p>
<p style="cursor: alias;">alias</p>
<p style="cursor: copy;">copy</p>
<p style="cursor: col-resize;">col-resize</p>
<p style="cursor: row-resize;">row-resize</p>

実際の表示見本です。各単語にマウスカーソルを合わせると、マウスカーソルの形状が変化します。

crosshair

default

pointer

move

text

vertical-text

wait

help

n-resize

ne-resize

e-resize

se-resize

s-resize

sw-resize

w-resize

nw-resize

cell

none

not-allowed

grab

grabbing

zoom-in

zoom-out

alias

copy

col-resize

row-resize

JavaScriptでcursorを指定する

JavaScriptでcursorを指定するには、styleオブジェクトを使用する。

var element = document.getElementById('example');
element.style.cursor = 'pointer';

参考文献

W2C (2021) CSS Basic User Interface Module Level 3 (CSS3 UI)