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

*cursor: ***;*

ブラウザ
特性: cursor

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で対応しています。

【独自拡張のカーソル】

独自拡張となりますが、以下の値を指定することもできます。（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>

表示例

しばらくお待ちください

ヘルプ

［顔］

サイト内検索

ページ全般

ページの先頭へ