cursor: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

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


.example { cursor: wait; }

カーソルの種類

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

  • 表示例のセル内にカーソルを合わせると、実際の表示例をご覧いただけます。（環境により、カーソルの形は異なる場合があります）
プロパティ名 値 表示例 説明
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(URI) ［表示例］ オリジナルカーソル
  • オリジナルカーソルは、IE 6以上、Firefox、Safari、Chromeで対応しています。

独自拡張のカーソル

独自拡張となりますが、以下の値を指定することもできます。（古いブラウザでは対応していない場合があります）

プロパティ名 値 表示例 説明
cursor 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), auto;

上記のように、カンマ（ , ）で区切って複数のカーソル候補を設定しておくこともできます。この場合、ユーザーの環境で利用できる形式の画像が使用されます。（先に指定したものが優先されます）

対応ブラウザ

オリジナルカーソルは、IE 6以上、Firefox、Safari、Chromeで対応しています。（Firefoxはバージョン1.5から対応しているようです）

未対応ブラウザの場合は、url(***) の指定があると最後のキーワードも無視されてしまうようです。

ファイル形式

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

カーソル用の画像（.cur、.ani）を作成するには、アイコン作成ソフトなどが必要になります。

使用例


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

.wait { cursor: wait; }
.help { cursor: help; }
.face { cursor: url(face.cur), default; }

</style>

</head>
<body>

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

<p><a href="index.html" class="help">ヘルプ</a></p>

<p><img src="face.gif" alt="［顔］" width="109" height="93" class="face"></p>

</body>
</html>
表示例

しばらくお待ちください

ヘルプ

［顔］