5-1 カーソルの形を変える
- se-resize
(右斜め下)
- n-resize
(上向き)
- ne-resize
(右斜め上)
- e-resize
(右向き)
- nw-resize
(左斜め上)
- s-resize
(下向き)
- sw-resize
(左斜め下)
- w-resize
(左向き)
- default
- hand
- help
- move
- wait
- text
- crosshair
5-2 IE6以降で対応
- col-resize
- row-resize
- vertical-text
- progress
- all-scroll
- not-allowed
- no-drop
- 上記のテーブルの中身にカーソルを合わせてみて下さい。(実際にカーソルの形が変わります)
- 動作はWinのIE6.0、NN7.1、OPERA7.5、Firefox1.5.0.1で
確認済みです。(使用しているブラウザのヴァージョンや種類によっては未対応の物があります。 [カーソル効果はIE4、NN6.2以降から対応しておりますが、それ以前のVer では動作致しません]) - IE6以降に対応分の物はNN7.1やOPERA7.5では見れません。
(但し例外的に「progress」のみOPERA7.5でも見れました) - NN7.1では「hand」が表示出来ず、指定しても「default」が表示されます。
- 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
- (フレーム分割をされている時は)一段だけ
フレームを解除してリンク先を表示。
- 何も指定していない(target="★"自体を書いていない)と、同じページにリンクが表示されます。
[ 関連事項 : HP-TIPS > CSS > リンクに関する基礎知識 ]
[ 関連事項 : HP-TIPS > HPの作り方 > HTML文章を作る > リンクの書き方 ]