メインメニュー


［スポンサードリンク］
HOME CSS - 機能別 その他
HOME CSS - プロパティ別 C
カーソルの形状を指定する
cursor:形状
cursor:url(URL)
形状：
auto ， crosshair ， default ， pointer ， move ， text ， wait ， help ， e-resize ， ne-resize ， nw-resize ， n-resize ， se-resize ， sw-resize ， s-resize ， w-resize
URL：
カーソルのURL

cursorプロパティで、マウスなどのポインティングデバイスのカーソルが、その要素の上にあるときのカーソルの形状を指定します。
InternetExplorer6.0以降では、自作のカーソル(「.cur」または「.ani」形式)を指定することもできます。
NetScapeやOperaの場合は文字の上でのみカーソルの形状が変ります。
また、InternetExplorer6.0以降でも、ドキュメントの宣言によりカーソルの形状が変わる場所が違います。　→　『ドキュメントタイプの宣言 』
●　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">を宣言した場合 → 文字の上のみ
●　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">を
宣言した場合 →　画面上



インラインフレームで色々なカーソルの形状を指定したページを表示しています。
それぞれのページ上にカーソルを乗せると、カーソルの形状が変わります。
このサンプルは<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">を宣言しているページを表示しています。
　 ↑このカーソルは「9031.com」さまからダウンロードさせていただきました。
なお、IE6.0以降でなければ動作しません。

<STYLE type="text/css">
<!--
body { cursor : auto ; }
body { cursor : crosshair ; }
body { cursor : default ; }
body { cursor : pointer ; }
body { cursor : move ; }
body { cursor : text ; }
body { cursor : wait ; }
body { cursor : help ; }
body { cursor : e-resize ; }
body { cursor : ne-resize ; }
body { cursor : nw-resize ; }
body { cursor : n-resize ; }
body { cursor : se-resize ; }
body { cursor : sw-resize ; }
body { cursor : s-resize ; }
body { cursor : w-resize ; }
body { cursor : url(../img/mickey.cur) ; }
body { cursor : url(../img/air.cur) ; }
-->
</STYLE>

※　上記のプロパティをそれぞれのページに記述しています。