CSS:お遊び編
次期バージョンのSafariはCSSのカスタムカーソルをサポート。
それに備えてお勉強しましょう。
カスタムカーソルとはリンクが張ってあるところでは「指」の形、テキストエリアなどでは「I」の形といった感じでカーソルの形が変わるものです。
これをCSSで任意のカーソルに指示してしまおうというものです。
カスタムカーソルの種類 オンマウスで反映されます(現在はIEでしか見られません:涙)
crosshair | 十字カーソル |
default | 標準カーソル |
pointer | ポインター(指) |
move | 移動カーソル(十字) |
n-resize | 上向き矢印 |
ne-resize | 上斜め右向き矢印 |
e-resize | 右向き矢印 |
se-resize | 下斜め右向き矢印 |
s-resize | 下向き矢印 |
sw-resize | 下斜め左向き矢印 |
w-resize | 左向き矢印 |
nw-resize | 上斜め左向き矢印 |
text | テキストカーソル(I字) |
wait | 時計カーソル |
help | ?カーソル |
それではタグの書き方です。
十字カーソルの場合
<SPAN style=cursor:crosshair(ここを上の表を元に書き換えます);>カーソルを変えたい部分</span>
リンク部分に適応したい場合はアンカータグ(<A>〜</A>)の内側に書けばOKです。
<A HREF="help.html"><SPAN style=cursor:help;>help</span><A>
CSSを利用して全部のアンカータグに適応したい場合は
A{cursor: crosshair;}
と書けばOKです。
※<>{}は半角にしてください。
次期Safari1.2(v125)では対応になるようですのでリリースされたらまた見に来てください。
ちょっと雰囲気を変えるにはいいかもね。