cursorスタイルシート属性

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>

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

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

SEO 仕事 掲示板 レンタルサーバー プロフ SEO