Go to information

cursor

cursorプロパティはカーソル（ポインタ）の形状を指定することができます。要素の内容領域にカーソルが入った時に、表示するカーソルの形状を指定します。表示される形状は、Windows や Macintosh といったプラットフォーム（OS）、またはユーザーの環境設定によって異なります。

値
初期値
auto
適用対象
すべての要素
継承
する
メディア

cursorプロパティに指定できる値はそれぞれ以下の意味を示します。各キーワード部分にカーソルが合わさると、指定のキーワードに形状が変更されます。UA によっては対応していないものもあります（詳しくは実装状況を参照ください）。

auto
状況に応じて、UA が自動選択
crosshair
十字線
default
デフォルト
Windows：矢印の形
Macintosh：リンクボタン用（pointer の形状）
pointer
リンクボタン用
move
移動可能対象
e-resize
右辺移動
ne-resize
右上隅移動
nw-resize
左上隅移動
n-resize
上辺移動
se-resize
右下隅移動
sw-resize
左下隅移動
s-resize
下辺移動
w-resize
左辺移動
text
テキスト選択（I の形）
wait
待機中（時計や砂時計）
progress
砂時計
help
ヘルプ利用時（疑問符やバルーンなど）
<URI>
指定された URI の画像を表示（サンプル参照）
cursor : url(URI,キーワード) ; の形で、括弧内に画像の所在となる URI に続いてコンマ（,）で区切って、画像表示に対応できなかった場合のためのカーソルの形状を指定するキーワードを1つ指定します。

cursorプロパティの実装状況

Windows版Internet Explorer
○
Firefox
○（Macintosh版は <URI> の画像表示は未実装）
Opera
<URI> の画像表示は未実装（なお、Macintosh版は auto, crosshair, defalut, pointer, move, text, wait, help のみ実装済み、その他はすべて無効）
Safari
<URI> の画像表示は未実装
Macintosh版Internet Explorer 5
<URI> の画像表示は未実装

Macintosh版Opera では "resize" のつくキーワードはすべて無効です。<URI> で指定する画像表示に対応しているのは、Windows版Internet Explorer 6, Windows版Internet Explorer 7 と Windows版Firefox のみです。

サンプル

記述例
.img_cursor { cursor : url(image.cur), text ; }
表示例

オリジナルの画像を使いたい場合は、アイコン作成専用のソフトウェアなどを利用して、カーソル用の curファイルに加工する必要があります。

現在位置
  1. W3G
  2. CSS
  3. ユーザインタフェイス
  4. cursor
ナビゲーション
ステータス情報
作者
上田 遼
公開
2007-02-02T16:13:01+09:00
更新
2008-12-29T04:30:37+09:00
URI
http://w3g.jp/css/user_interface/cursor
検索

直近の制作実績等：大阪人間科学大学 New! / 大阪薫英女子短期大学 New! / セキスイハイム みんなのお国じまん New!