1. Home
  2. スタイルシート CSS
  3. ページ全般
  4. カーソルの形を変更する

カーソルの形を変更する


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

【独自拡張のカーソル】

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

プロパティ名 表示例 説明
cursor col-resize [表示例] 左右リサイズ
row-resize [表示例] 上下リサイズ
all-scroll [表示例] 上下左右スクロール
not-allowed [表示例] 不可
no-drop [表示例] ドロップ不可
progress [表示例] 処理中
vertical-text [表示例] 縦書テキスト

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

独自の画像をカーソルとして使用することができます。

■指定方法

cursor: url(example.cur), text;

url( ) … ( ) 内に、カーソルとして使用する画像ファイルを指定します。

オリジナルカーソルが表示できない場合に備え、カンマ( , )に続けて任意のキーワード(defaultpointer 等)を指定しておきます。(上記の例では 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>

表示例

しばらくお待ちください

ヘルプ

[顔]


ページ全般

ページの先頭へ