■cursor

　マウスを文字列に乗せるとマウスカーソルを変えることが出来ます。指さし・十字・砂時計・矢印等自由に変えることが出来ます。
　マウスカーソルを設定するには、「cursor」プロパティにより行います。

cursor
マウスを文字列に乗せるとマウスカーソルを変えることが出来ます。指さし・十字・砂時計・矢印等自由に変えることが出来ます。
設定値	説明
<url>	独自のカーソルを使用する事が出来ます。拡張子は、「.cur」（ノーマルカーソル）と「.ani」（アニメーションカーソル））形式となります。
auto	自動的に指定されます
crosshair	十字カーソル
default	矢印カーソル
pointer	ポインターカーソル
move	十字矢印カーソル
e-resize	右方向リサイズカーソル
ne-resize	右上方向リサイズカーソル
nw-resize	左上方向リサイズカーソル
n-resize	上方向リサイズカーソル
se-resize	右下方向リサイズカーソル
sw-resize	左下方向リサイズカーソル
s-resize	下方向リサイズカーソル
w-resize	左方向リサイズカーソル
text	文字範囲カーソル
wait	砂時計
help	ヘルプカーソル
inherit	継承
hand	アンカーカーソル（IE独自）
progress	砂時計+矢印カーソル（IE独自）
not-allowed	禁止カーソル（IE独自）
no-drop	ドロップ禁止カーソル（IE独自）
vertical-text	テキストカーソル（IE独自）
all-scroll	スクロールカーソル（IE独自）
col-resize	行リサイズカーソル（IE独自）
row-resize	列リサイズカーソル（IE独自）

■ソース

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<TITLE>cursor</TITLE>
<STYLE TYPE="text/css">

</STYLE>
</HEAD>
<BODY>

乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。
乗せて下さい。

</BODY>
</HTML>

■実行例

「cursor:url("to_1.cur")」(独自のカーソル)となっています。
乗せて下さい。
「cursor:auto」(自動的に指定)となっています。
乗せて下さい。
「cursor:crosshair」(十字カーソル)となっています。
乗せて下さい。
「cursor:default」(矢印カーソル)となっています。
乗せて下さい。
「cursor:pointer」(ポインターカーソル)となっています。
乗せて下さい。
「cursor:move」(十字矢印カーソル)となっています。
乗せて下さい。
「cursor:e-resize」(右方向リサイズカーソル)となっています。
乗せて下さい。
「cursor:ne-resize」(右上方向リサイズカーソル)となっています。
乗せて下さい。
「cursor:nw-resize」(左上方向リサイズカーソル)となっています。
乗せて下さい。
「cursor:n-resize」(上方向リサイズカーソル)となっています。
乗せて下さい。
「cursor:se-resize」(右下方向リサイズカーソル)となっています。
乗せて下さい。
「cursor:sw-resize」(左下方向リサイズカーソル)となっています。
乗せて下さい。
「cursor:s-resize」(下方向リサイズカーソル)となっています。
乗せて下さい。
「cursor:w-resize」(左方向リサイズカーソル)となっています。
乗せて下さい。
「cursor:text」(文字範囲カーソル)となっています。
乗せて下さい。
「cursor:wait」(砂時計)となっています。
乗せて下さい。
「cursor:help」(ヘルプカーソル)となっています。
乗せて下さい。
「cursor:hand」(アンカーカーソル)となっています。
乗せて下さい。
「cursor:progress」(砂時計+矢印カーソル)となっています。
乗せて下さい。
「cursor:not-allowed」(禁止カーソル)となっています。
乗せて下さい。
「cursor:no-drop」(ドロップ禁止カーソル)となっています。
乗せて下さい。
「cursor:vertical-text」(テキストカーソル)となっています。
乗せて下さい。
「cursor:all-scroll」(スクロールカーソル)となっています。
乗せて下さい。
「cursor:col-resize」(行リサイズカーソル)となっています。
乗せて下さい。
「cursor:row-resize」(列リサイズカーソル)となっています。
乗せて下さい。

■対応ブラウザ

cursor
設定値	IE3	IE4	IE5	IE5.5	IE6	N3	N4	N6	N7	O6	O7
<url>	×	×	×	×	●	×	×	×	×	×	×
auto	×	●	●	●	●	×	×	●	●	×	●
crosshair	×	●	●	●	●	×	×	●	●	×	●
default	×	●	●	●	●	×	×	●	●	×	●
pointer	×	×	×	×	●	×	×	●	●	×	●
move	×	●	●	●	●	×	×	●	●	×	●
e-resize	×	●	●	●	●	×	×	●	●	×	●
ne-resize	×	●	●	●	●	×	×	●	●	×	●
nw-resize	×	●	●	●	●	×	×	●	●	×	●
n-resize	×	●	●	●	●	×	×	●	●	×	●
se-resize	×	●	●	●	●	×	×	●	●	×	●
sw-resize	×	●	●	●	●	×	×	●	●	×	●
s-resize	×	●	●	●	●	×	×	●	●	×	●
w-resize	×	●	●	●	●	×	×	●	●	×	●
text	×	●	●	●	●	×	×	●	●	×	●
wait	×	●	●	●	●	×	×	●	●	×	●
help	×	●	●	●	●	×	×	●	●	×	●
inherit	×	×	×	×	×	×	×	●	●	×	●
hand	×	●	●	●	●	×	×	●	×	×	×
progress	×	×	×	×	●	×	×	×	×	×	×
not-allowed	×	×	×	×	●	×	×	×	×	×	×
no-drop	×	×	×	×	●	×	×	×	×	×	×
vertical-text	×	×	×	×	●	×	×	×	×	×	×
all-scroll	×	×	×	×	●	×	×	×	×	×	×
col-resize	×	×	×	×	●	×	×	×	×	×	×
row-resize	×	×	×	×	●	×	×	×	×	×	×

[ホーム] [CSS] [CSSプロパティ] [↑ページ最上部へ戻る]

Webマスター、HP作成のプロとして活躍したい方は見てください。
ホームページの開設数が増加し、Web業界や一般企業でWebマスターが急激に求められています。Webマスターの絶対数の不足している今が、技能習得の絶好のチャンスです。