スタイルシート［CSS］/ページ全般/マウスカーソルの形を変更する

cursor は、マウスカーソルの形を指定するプロパティです。

#example { cursor: wait; }

【カーソルの種類】

cursor: ***　（*** の部分に以下の値を指定します）

■ … この部分をポイントすると、カーソルの形が変わります。

値	表示例	内容
▼
auto		自動（デフォルト）	■
default		標準	■
pointer		リンク	■
crosshair		十字	■
move		移動	■
text		テキスト	■
wait		処理中	■
help		ヘルプ	■
n-resize		上リサイズ	■
e-resize		右リサイズ	■
s-resize		下リサイズ	■
w-resize		左リサイズ	■
ne-resize		右上リサイズ	■
se-resize		右下リサイズ	■
sw-resize		左下リサイズ	■
nw-resize		左上リサイズ	■
▼
url(***.cur)		オリジナルカーソル	■
▼独自拡張
col-resize		左右リサイズ	■
row-resize		上下リサイズ	■
all-scroll		上下左右スクロール	■
not-allowed		不可	■
no-drop		ドロップ不可	■
progress		処理中	■
vertical-text		縦書テキスト	■

※実際に表示されるカーソルの形状は、閲覧者の環境により異なる場合があります。

【オリジナルカーソルについて】

■指定方法

cursor: url(example.cur), text;

url( ) … ( ) 内にカーソルのファイルを指定します。

オリジナルカーソルが表示できない場合に備え、カンマ（ , ）に続けてキーワード（例：default や pointer、他）を指定しておきます。（上記の例では text を指定しています）

■カーソルの候補

cursor: url(example.cur), url(example.gif), text;

上記のように、カンマ（ , ）で区切って複数のカーソル候補を設定しておくこともできます。この場合、ユーザーの環境で表示できる形式のファイルが使用されます。候補の優先順位は、左から順に右へと続きます。

■対応ブラウザ

オリジナルカーソルはIE6で対応しています。（Firefoxもバージョン1.5で対応しているようです）

未対応ブラウザの場合、url(***) の指定があると最後のキーワードも無視されてしまうようです（Netscape7とOpera8で確認）。ただし、未対応ブラウザのうちFirefox1ではキーワードが有効でした。

■ファイル形式

カーソルに使用できるファイル形式は、IEの場合はカーソル（ .cur ）とアニメーションカーソル（ .ani ）だけです。（Firefox1.5の場合は、GIFやJPEG、PNGなどが使えるようです。）

.cur などの特殊な形式のファイルを作成するには、カーソル作成ソフトが必要になります。ソフトをお探しの方は、「カーソル　作成」などのキーワードで検索してみてください。→（Google）

表示例で使用している ← この変なカーソルは、フリーウェアをお借りして作成したものです。

形状の変更を嫌う人もいますので、この指定を行う場合はワンポイント的に使う程度に留めておきましょう。

使用例

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">

</style>

</head>
<body>

<p><span id="example1">しばらくお待ちください</span></p>

<p><a href="index.html" id="example2">ヘルプ</a></p>

<p><img src="image/face.gif" alt="顔" width="75" height="78" id="example3"></p>

</body>
</html>

▼これをブラウザで見ると次のように表示されます

しばらくお待ちください

ヘルプ

マウスカーソルの形を変更する

cursor: ***;

使用例