cursor

Home>CSS>プロパティリファレンス>cursor

この情報はお役に立ちましたか?よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

cursorプロパティの役割

cursorプロパティは、マウスカーソル(ポインタ)の画像を指定します。

cursorプロパティに設定できる値

auto   ブラウザが自動的に選択。
crosshair crosshair 十字線。
default default 初期値。Windowsならば矢印、Macintoshならポインターの形状。
e-resize e-resize 右辺リサイズ。
help help ヘルプ。
move move 移動可能。
n-resize n-resize 上辺リサイズ。
ne-resize ne-resize 右上隅リサイズ。
nw-resize nw-resize 左上隅リサイズ。
pointer pointer リンクボタン用。
progress progress 砂時計。
s-resize s-resize 下辺リサイズ。
se-resize se-resize 右下隅リサイズ。
sw-resize sw-resize 左下隅リサイズ。
text text テキスト選択。
w-resize w-resize 左辺リサイズ。
wait wait 待機中。
URLを指定   指定したURLにある画像をカーソルとして表示。

なお、URLを指定する場合には、

cursor: url(xxx.cur), default;

のように、カーソル画像ファイルへのパスと、それが表示できなかった場合のパラメータを上記リストから一つ選んでおきます。

cursorプロパティの使い方

cursor:url(../../../data/img/css/property/cursor-17.cur),default

この枠線内ではカーソルの画像が変わります。

上記のサンプルでは、[sample]の枠線内にマウスポインタがある間は、指定した画像(cursor-17.cur)に変わります。

カーソル画像の作り方

なお、カーソルに指定できる画像を作る場合には、.curというファイル形式で画像を作らなければ認識されません。

.cur形式の画像をつくるには、ANIメーカーANIメーカーダウンロードページを別ページで開くというソフトが適しています。

関連リンク

よく読まれている記事

UpDate:2010-8-3