cursor
スタイルシート属性 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 継承
使用例と表示サンプル
次にスタイルシート属性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>
<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