ポインティングデバイス(マウスとか)の位置を示すカーソルの形状を指定するプロパティです
値 | [ [<uri> ,]* [ auto|crosshair|default|pointer|move|e-resize|ne-resize|nw-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|help|progress ] ]|inherit |
---|---|
初期値 | auto |
適用される要素 | ブロックレベル要素 |
継承 | しません |
パーセント値 | N/A |
メディア | visual, interactive |
auto | UA(ブラウザなど)が状況に応じて自動でカーソルを選択します |
---|---|
none | ポインターを表示しません |
crosshair | 十字線のカーソル |
default | プラットフォーム依存の標準のカーソル |
pointer | リンクである事を示すポインタカーソル。通常は指の形 |
move | 対象が移動可能であることを示すカーソル。通常は十字に矢印が付いた形 |
e-resize | ウィンドウなどの辺の右がリサイズ可能であることを示すカーソル |
ne-resize | ウィンドウなどの辺の右上がリサイズ可能であることを示すカーソル |
nw-resize | ウィンドウなどの辺の左上がリサイズ可能であることを示すカーソル |
n-resize | ウィンドウなどの辺の上がリサイズ可能であることを示すカーソル |
se-resize | ウィンドウなどの辺の右下がリサイズ可能であることを示すカーソル |
sw-resize | ウィンドウなどの辺の左下がリサイズ可能であることを示すカーソル |
s-resize | ウィンドウなどの辺の下がリサイズ可能であることを示すカーソル |
w-resize | ウィンドウなどの辺の左がリサイズ可能であることを示すカーソル |
text | テキストとして選択可能を示すカーソル。通常は「 I 」みたいな形 |
wait | プログラムが動作中で、ユーザーが待機すべきことを示すカーソル。通常は砂時計の形。Vistaだとぐるぐる回る輪っか |
progress | プログラムが進行中ということを示すカーソル。waitと似ているが、ユーザーがプログラムを操作できる点が違います。通常は矢印付きの時計や砂時計の形が多いです |
help | ヘルプが利用できる事を示すカーソル。通常は「?」の形 |
cell | セルまたはセルグループを選択できることを表すポインターが表示されます |
virtical-text | 縦書きのテキストの選択・入力可能を表す横バーのポインターが表示されます |
zoom-in | 拡大できることを表すポインターが表示されます(Internet Explorerは非対応) |
zoom-out | 縮小できることを表すポインターが表示されます(Internet Explorerは非対応) |
copy | コピーできることを表すプラス(+)マークが付いたポインターが表示されます |
not-allowed | 処理を実行できないことを表すマークが付いたポインターが表示されます |
<uri> | ユーザーが用意した任意のカーソル画像をurl()関数で指定できます。この画像はカンマ(,)区切りで複数指定する事もできます。複数指定することで優先順を決められ先に指定したものが優先されます。また、上記のキーワードによる指定も一回だけする事ができます |
オリジナルカーソルを指定する場合は、画像が表示できない場合に備え、カンマ( , )に続けて任意のキーワードを指定しておきます
cursor:url(../img/cursor01.png), pointer;
また、カンマ( , )で区切って複数のカーソル候補を設定しておくこともできます。この場合、ユーザーの環境で利用できる形式の画像が使用されます。(先に指定したものが優先されます)
cursor:url(../img/cursor01.png), url(../img/cursor01.cur), pointer;
IEでは .cur または .ani しかサポートしていませんが、GeckoやWebkitが .ani には対応していないようです
Chrome、Firefoxの場合は、GIFやJPEG、PNGなども使用できるようです
Operaは、url()関数自体対応していません
カーソルの画像サイズに関しては仕様上の制限はありませんが、OSやプラットフォームでの互換を考慮し、最大で32 × 32pxにします
cursor:url(../img/cursor01.png), pointer;
ここにカーソルを持ってきてください