5-1 カーソルの形を変える

se-resize
se-resize
(右斜め下)
n-resize
n-resize
(上向き)
ne-resize
ne-resize
(右斜め上)
e-resize
e-resize
(右向き)
nw-resize
nw-resize
(左斜め上)
s-resize
s-resize
(下向き)
sw-resize
sw-resize
(左斜め下)
w-resize
w-resize
(左向き)
default
default
hand
hand
help
help
move
move
wait
wait
text
text
crosshair
crosshair

5-2 IE6以降で対応

col-resize
col-resize
row-resize
row-resize
vertical-text
vertical-text
progress
progress
all-scroll
all-scroll
not-allowed
not-allowed
no-drop
no-drop

  1. 上記のテーブルの中身にカーソルを合わせてみて下さい。(実際にカーソルの形が変わります)
  2. 動作はWinのIE6.0、NN7.1、OPERA7.5、Firefox1.5.0.1で
    確認済みです。(使用しているブラウザのヴァージョンや種類によっては未対応の物があります。 [カーソル効果はIE4、NN6.2以降から対応しておりますが、それ以前のVer では動作致しません])
  3. IE6以降に対応分の物はNN7.1やOPERA7.5では見れません。
    (但し例外的に「progress」のみOPERA7.5でも見れました)
  4. NN7.1では「hand」が表示出来ず、指定しても「default」が表示されます。
  5. Firefox1.5.0.1ではNN7.1同様に「hand」が表示出来ず、
    指定しても「default」が表示されます。しかしIE6以降でないと見れないはずの物が、「no-drop」以外キチンと表示されます。 (「nodrop」で指定しても「not-allowed」と同じカーソルが出ます)

[ 関連事項 : HP-TIPS > CSS > 外部スタイルシートの記述方法 ]

5-3 ページ全体に適応させる

<head> ~ </head> 内に記述して下さい。

<style type="text/css">
<!--
body { cursor : カーソルの種類 ; }
-->
</style>

5-4 ページ内のリンク全てに適応させる

<head> ~ </head> 内に記述して下さい。

<style type="text/css">
<!--
a { cursor : カーソルの種類 ; }
-->
</style>

5-5 一部の文字等にカーソルを適応させる

<body> ~ </body> 内に記述して下さい。

<span style= "cursor : カーソルの種類 ;" >文字</span>

または
<p style= "cursor : カーソルの種類 ;" >文字</p>

または
<div style= "cursor : カーソルの種類 ;">文字</div>

さらに
<table><tr>
<td style= "cursor : カーソルの種類 ;">文字</td>
</tr></table>

でも使用出来ます。

5-6 リンク事に適応させる

<body> ~ </body> 内に記述して下さい。

<a href= "リンク先URL" target="★" style= "cursor : カーソルの種類 ;">リンク名</a>

★には下記の物が入ります。

_blank
新しいウィンドウでリンク先を表示。
_self
現在のウィンドウ(フレーム)にリンク先を表示。
_top
(フレーム分割をされている時は)全ての分割を
解除してウィンドウ全体にリンク先を表示。
_parent
(フレーム分割をされている時は)一段だけ
フレームを解除してリンク先を表示。

[ 関連事項 : HP-TIPS > CSS > リンクに関する基礎知識 ]
[ 関連事項 : HP-TIPS > HPの作り方 > HTML文章を作る > リンクの書き方 ]