Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

cursor

対象となる要素の上にマウスカーソル(マウスポインタ)があるときのマウスカーソルのデザインを変更します。

このプロパティはOSや閲覧しているブラウザによってデザインの差が大きい場合が多々あります。尚、閲覧しているブラウザによっては実行できない値もございますのでご注意ください。

サンプルコード

div.test { cursor: auto;}
div.test1 { cursor: default;}
div.test2 { cursor: help;}

指定可能な値一覧

値	概要
auto	要素や内容によってカーソルデザインをブラウザが自動決定します。この『auto』が初期値です。
default	規定の矢印カーソルへと変更します。
none	マウスカーソルを表示しません。
context-menu	カーソル下にコンテキストメニューを表示します。
help	カーソルをはてなマークに変更します。
pointer	カーソルを指さしマークに変更します。
progress	プログラムがビジー状態であるかのようなカーソルに変更します。
wait	プログラムがビジー状態であるかのようなカーソルに変更します。
cell	エクセルのようなセルが選択可能であるかのようなカーソルへ変更します。
crosshair	十字のカーソルへ変更します。
text	横書きのテキストが選択可能であるかのようなカーソルへ変更します。
vertical-text	縦書きのテキストが選択可能であるかのようなカーソルへ変更します。
alias	エイリアス(ショートカット)を示すようなカーソルへ変更します。
copy	何らかのコピー動作が可能であるかのようなカーソルへ変更します。
move	上下左右に動かせるようなカーソルへと変更します。
no-drop	ドロップ動作が禁止であるかのようなカーソルへ変更します。
not-allowed	何らかの操作が禁止であるかのようなカーソルへ変更します。
all-scroll	任意の方向にスクロールできるかのようなカーソルへと変更します。
col-resize	水平方向にリサイズできるかのようなカーソルへと変更します。
row-resize	垂直方向にリサイズできるかのようなカーソルへと変更します。
n-resize	カーソルを上方向の矢印へと変更します。
e-resize	カーソルを右方向の矢印へと変更します。
s-resize	カーソルを下方向の矢印へと変更します。
w-resize	カーソルを左方向の矢印へと変更します。
ne-resize	カーソルを右上方向の矢印へと変更します。
nw-resize	カーソルを左上方向の矢印へと変更します。
se-resize	カーソルを右下方向の矢印へと変更します。
sw-resize	カーソルを左下方向の矢印へと変更します。
ew-resize	カーソルを左右方向の矢印へと変更します。
ns-resize	カーソルを上下方向の矢印へと変更します。
nesw-resize	カーソルを右上、左下方向の矢印へと変更します。
nwse-resize	カーソルを左上、右下方向の矢印へと変更します。
zoom-in	ズームインできるかのようなカーソルへと変更します。
zoom-out	ズームアウトできるかのようなカーソルへと変更します。

対応ブラウザ

IE6	IE7	IE8	IE9	IE10	IE11	Safari	Chrome	Firefox	Opera

iPhone Safari	Android2系標準ブラウザ	Android4系標準ブラウザ

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ