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

書式

cursor: type

属性値

type
以下の値をから選択するか、URLを指定します。
意味
auto 自動(規定値)指しているものによって変化します
crosshair 十字
default 通常(指しているものが何であれ強制的に通常の形状になります)
pointer ポインタ
move 移動
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 継承

対応状況

Webブラウザ 対応状況
Internet Explorer 6.0
FireFox 3.0
Google Chrome 1.0
Opera 9.62
Safari 3.2

使用例と表示サンプル

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

<span style="cursor: crosshair;">crosshair</span>
<span style="cursor: default;">default</span>
<span style="cursor: pointer;">pointer</span>
<span style="cursor: move;">move</span>
<span style="cursor: text;">text</span>
<span style="cursor: wait;">wait</span>
<span style="cursor: help;">help</span>
<span style="cursor: n-resize;">n-resize</span>
<span style="cursor: ne-resize;">ne-resize</span>
<span style="cursor: e-resize;">e-resize</span>
<span style="cursor: se-resize;">se-resize</span>
<span style="cursor: s-resize;">s-resize</span>
<span style="cursor: sw-resize;">sw-resize</span>
<span style="cursor: w-resize;">w-resize</span>
<span style="cursor: nw-resize;">nw-resize</span>

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

crosshair default pointer move text wait help n-resize ne-resize e-resize se-resize s-resize sw-resize w-resize nw-resize