CSS3 Pre-Reference



cursor

カーソル指定

試す

サンプル

一般用途のカーソル

cursor:auto;

cursor:default;

cursor:none;

リンク、状態のカーソル

cursor:context-menu;

cursor:help;

cursor:pointer;

cursor:progress;

cursor:wait;

選択中のカーソル

cursor:cell;

cursor:crosshair;

cursor:text;

cursor:vertical-text;

ドラッグアンドドロップカーソル

cursor:alias;

cursor:copy;

cursor:move;

cursor:no-drop;

cursor:not-allowed;

リサイズ、スクロールカーソル

cursor:e-resize;

cursor:n-resize;

cursor:ne-resize;

cursor:nw-resize;

cursor:s-resize;

cursor:se-resize;

cursor:sw-resize;

cursor:w-resize;

cursor:ew-resize;

cursor:ns-resize;

cursor:nesw-resize;

cursor:nwse-resize;

cursor:col-resize;

cursor:row-resize;

cursor:all-scroll;

URL

cursor:url('cursor/cursor.ani'), pointer;

cursor:url('cursor/cursor.cur'), pointer;

cursor:url('cursor/cursor.png'), pointer;

cursor:url('cursor/cursor.gif'), pointer;

cursor:url('cursor/cursor_ani.gif'), pointer;

cursor:url('cursor/cursor.jpg'), pointer;

cursor:url('cursor/cursor.bmp'), pointer;

cursor:url('cursor/cursor.cur') 10 10, pointer;

ソースとして利用させていただいたカーソル

コメントする


対応ブラウザ

Firefox
すべて
Chrome/Safari
すべて
Opera
すべて
InternetExplorer
すべて

パラメータ

[ [<URL> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll ]
初期値 auto
適用 すべての要素
継承 しない
レベル 2
%の解釈 -
適用メディア Visual
参考文献 CSS3 Basic User Interface Module#10.1. 'cursor' property

解説

オンマウス時のマウスカーソルを指定します。

URLを指定する場合は、curファイルの他にも、JPEGやGIFなどのビットマップ画像、SVGなどのベクトルデータも利用できます。ただし、対応状況はブラウザによって異なります。プロパティ自体はCSS2からありますが、CSS3でも新しい値が大量に導入されています。

また、URLを指定した場合、参照対象がアイコンライブラリなどの場合に、位置座標を指定できるようになりました。

値は以下の通りです。デフォルトセットで見つかるカーソルは例を載せています:

一般用途のカーソル
auto
ブラウザのデフォルトです。テキストの上ではIマークである、リンクの上では手形であるなど。
default
UAのデフォルトです。通常は矢印です。arrow.png
none
カーソルを表示しません。
context-menu
コンテキストメニューが利用可能であることを示すカーソルです。通常はメニューアイコン付の矢印です。CSS3から。
help
ヘルプが利用可能な時のカーソルです。通常ははてな付矢印。help.png
pointer
リンクを示すカーソルです。link.png
progress
何かを処理中であることを示すカーソルです。通常は砂時計や時計付の矢印。working.png
wait
何かの処理のために表示が一時的に停止していることを示すカーソルです。通常は砂時計や時計。busy.png
選択中のカーソル
cell
セルが選択されていることを示すカーソルです。通常は真ん中に点があるプラス記号。CSS3から。plus.png
crosshair
単純なプラス記号のカーソルです。よく画像を範囲選択する時などに利用するものです。cross.png
text
テキストが選択されていることを示すカーソルです。通常は大文字の「I」。縦書きの場合は適宜90度回転させたカーソルを用います。I.png
vertical-text
縦書きのテキストが選択されていることを示すカーソルです。通常は横に寝かせた大文字の「I」。v_text.png
ドラッグアンドドロップカーソル
alias
ショートカット(エイリアス、シンボリックリンク)が作成されることを示すカーソルです。通常は小さなカーブした矢印が付いた矢印。CSS3から。
copy
コピーされることを示すカーソルです。通常は小さなプラスサイン付の矢印。CSS3から。copy.png
move
動かされることを示すカーソルです。通常は握られたハンド。CSS3から。
no-drop
ドラッグされたアイテムをその場所にドロップできないことを示すカーソルです。通常は禁止マーク付のハンドかポインター。
not-allowed
要求された操作が実行できないことを示すカーソルです。通常は禁止マークです。disable.png
リサイズ、スクロールカーソル
e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize
ボックスのどこかの辺を動かしている最中であることを示すカーソルです。例えば左方向の矢印など。up.png
ew-resize, ns-resize, nesw-resize, nwse-resize
双方向にリサイズ可能であることを示すカーソルです。CSS3から。ew-resize.png
col-resize
項目、列が水平方向にリサイズ可能であることを示すカーソルです。通常は左右の矢印の間を縦棒2本で割ったものです。col-resize.png
row-resize
項目、行が垂直方向にリサイズ可能であることを示すカーソルです。通常は上下の矢印の間を横棒2本で割ったものです。row-resize.png
all-scroll
どの方向にもスクロール可能な状態であることを示すカーソルです。通常は上下左右に向いた矢印を繋げて中央にドットを置いたものです。move.png

トラックバック

投稿されたコメント