cursor

マウスポインタの形を指定します。ブラウザによっては、カーソル画像(.curまたは、.ani)を指定することもできるようです。
カーソル画像の拡張子には、「.cur」と「.ani」があり、「.cur」は動きのない普通のカーソルで、「.ani」はアニメーションカーソル(動きのあるカーソル)であるという違いがあります。


ブラウザ

IE4 / IE5 / IE5.5 / IE6 / N6 / N7 / O7 / O9 / Fx1 / Fx2 / IE5 mac

▲PageTop

書式

要素[.class名][#id名]{ [url("URL"),] cursor : 値; }

▲PageTop

指定できる値

値 初期値 意味
default 使用しているパソコンの環境に依存します。
auto ○ テキスト選択・windowサイズ変更などの状況に応じて変化します。
crosshair 十字線のカーソルです。
pointer リンク部分をクリックするときのカーソルです。
move 移動するときのカーソルです。
text テキスト選択用カーソルです。
wait 待機時のカーソルです。
help ヘルプ用カーソルです。
n-resize ウィンドウなどの上部を動かし、サイズを変更する時のカーソルです。
s-resize ウィンドウなどの下部を動かし、サイズを変更する時のカーソルです。
w-resize ウィンドウなどの左部を動かし、サイズを変更する時のカーソルです。
e-resize ウィンドウなどの右部を動かし、サイズを変更する時のカーソルです。
ne-resize ウィンドウなどの右上を動かし、サイズを変更する時のカーソルです。
nw-resize ウィンドウなどの左上を動かし、サイズを変更する時のカーソルです。
se-resize ウィンドウなどの右下を動かし、サイズを変更する時のカーソルです。
sw-resize ウィンドウなどの左下を動かし、サイズを変更する時のカーソルです。
URL 指定したいカーソルのURLを指定します。
inherit 親要素の値を継承します。

▲PageTop

サンプル

ソースコード

<html>
  <head>
    <title>サンプルコード</title>
    <style type="text/css">
      div#sample div {
        float : left;
        margin-right : 70px;
        width : 15%;
        height : 25px;
        text-align : center;
        border : 1px solid #999999;
      }
      #sample1 { cursor : default; }
      #sample2 { cursor : auto; }
      #sample3 { cursor : crosshair; }
      #sample4 { cursor : pointer; }
      #sample5 { cursor : move; }
      #sample6 { cursor : text; }
      #sample7 { cursor : wait; }
      #sample8 { cursor : help; }
      #sample9 { cursor : n-resize; }
      #sample10{ cursor : s-resize; }
      #sample11{ cursor : w-resize; }
      #sample12{ cursor : e-resize; }
      #sample13{ cursor : ne-resize; }
      #sample14{ cursor : nw-resize; }
      #sample15{ cursor : se-resize; }
      #sample16{ cursor : sw-resize; }
    </style>
  </head>
  <body>
    <div id="sample">
      <div id="sample1">default</div>
      <div id="sample2">auto</div>
      <div id="sample3">crosshair</div>
      <div id="sample4">pointer</div>
      <br style="clear:left;">
      <br>
      <div id="sample5">move</div>
      <div id="sample6">text</div>
      <div id="sample7">wait</div>
      <div id="sample8">help</div>
      <br style="clear:left;">
      <br>
      <div id="sample9">n-resize</div>
      <div id="sample10">s-resize</div>
      <div id="sample11">w-resize</div>
      <div id="sample12">e-resize</div>
      <br style="clear:left;">
      <br>
      <div id="sample13">ne-resize</div>
      <div id="sample14">nw-resize</div>
      <div id="sample15">se-resize</div>
      <div id="sample16">sw-resize</div>
      <br style="clear:left;">
    </div>
    <br>
    ※各ボックスにマウスポインターをのせてみてください。
  </body>
</html>

表示結果

default
auto
crosshair
pointer


move
text
wait
help


n-resize
s-resize
w-resize
e-resize


ne-resize
nw-resize
se-resize
sw-resize


※各ボックスにマウスポインターをのせてみてください。

▲PageTop

▲