スタイルシート属性 cursor は、マウスカーソルの形状を指定します。

目次

cursorの構文

cursor: type

cursorの属性値

type

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

意味
auto 自動(規定値)指しているものによって変化します
crosshair 十字
default 通常(指しているものが何であれ強制的に通常の形状になります)
pointer ポインタ
move 移動
text テキストを選択可能であることを表わす
vertical-text 縦書きのテキストを選択可能であることを表わす
wait 待ち
help ヘルプ
n-resize 上(north)リサイズ
ne-resize 右上(north west)リサイズ
e-resize 右(east)リサイズ
se-resize 右下(south east)リサイズ
s-resize 下(south)リサイズ
sw-resize 左下(south west)リサイズ
w-resize 左(west)リサイズ
nw-resize 左上(north west)リサイズ
inherit 継承
cell 表のセルが選択できることを表わす
none マウスポインタを表示しない
not-allowed 操作が受け付けられないことを表わす
grab ドラッグ可能であることを表わす
grabbing ドラッグ中であることを表わす
zoom-in 拡大が可能であることを表わす
zoom-out 縮小が可能であることを表わす
alias ショートカットを作成できることを表わす
copy コピーできることを表わす
col-resize 水平方向にサイズが変更できることを表わす
row-resize 垂直方向にサイズが変更できることを表わす

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オブジェクトを使用する。

element.style.cursor = value;
このエントリーをはてなブックマークに追加