CSS - cursor

トップ > CSSリファレンス > cursor

概要

属性名 cursor
[<uri> [ <x> <y> ]? , ]* <cursor-type>
値の詳細 <cursor-type> = auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out
初期値auto
適用可能要素すべての要素
継承継承する
メディアvisual
サポートhttps://caniuse.com/css3-cursors

説明

要素にマウスを乗せたときに表示されるマウスカーソルの形状を指定します。

説明
<uri>カーソルの画像ファイルをURLを指定します。
<x> <y>画像を表示する際の横方向、縦方向のオフセット値を指定します。サポートしているブラウザはまだ少ないようです。
<cursor-type>カーソル形状を指定します。下記を参照してください。

カーソル形状の意味と、各ブラウザでの対応状況を下記に示します。

カーソル形状説明 IEFirefoxChromeOperaSafari
autoコンテキストに基づいて自動決定される
defaultそのプラットフォームにおけるデフォルトのカーソル
noneカーソルを表示しない
context-menuコンテキストメニュー
helpヘルプメカーソル
pointerリンクポインタ
progress実行中カーソル
wait待機状態カーソル
cellセル選択カーソル
crosshair十字線カーソル
textテキスト選択カーソル
vertical-text縦書きテキスト選択カーソル
aliasエイリアス作成カーソル
copyコピーカーソル
move移動カーソル
no-dropドロップ禁止カーソル
not-allowed禁止カーソル
grabグラブ(ドラッグ)可能
grabbingグラブ(ドラッグ)中
e-resize東(右)方向リサイズカーソル
n-resize北(上)方向リサイズカーソル
ne-resize北東(右上)方向リサイズカーソル
nw-resize北西(左上)方向リサイズカーソル
s-resize南(下)方向リサイズカーソル
se-resize南東(右下)方向リサイズカーソル
sw-resize南西(左下)方向リサイズカーソル
w-resize西(左)方向リサイズカーソル
ew-resize東西(左右)方向リサイズカーソル
ns-resize南北(上下)方向リサイズカーソル
nesw-resize北東(右上)-南西(左下)方向リサイズカーソル
nwse-resize北西(左上)-南東(右下)方向リサイズカーソル
col-resizeカラムを左右にリサイズする際のカーソル
row-resizeカラムを上下にリサイズする際のカーソル
all-scroll任意の方向にスクロールする際のカーソル
zoom-inズームインカーソル
zoom-outズームアウトカーソル

カーソル画像をURLで指定する際は、カンマでいくつかの画像ファイルを指定します。下記の例では、myhelp.cur を探し、サポートされていない、または見つからなかった場合は myhelp.gif を探し、これも表示できない場合は help カーソルを表示します。IE9 は .ani, .cur、Firefox 12, Chrome 12, Safari 5.1 は .cur, .gif, .png, .jpg, .bmp、Opera 11.6 は未対応のようです。

.sample { cursor: url(myhelp.cur), url(myhelp.gif), help; }

使用例

HTML
<div style="cursor:url(../image/sample.cur), auto">url</div>
<div style="cursor:auto">auto</div>
<div style="cursor:default">default</div>
<div style="cursor:none">none</div>
<div style="cursor:context-menu">context-menu</div>
<div style="cursor:help">help</div>
<div style="cursor:pointer">pointer</div>
<div style="cursor:progress">progress</div>
<div style="cursor:wait">wait</div>
<div style="cursor:cell">cell</div>
<div style="cursor:crosshair">crosshair</div>
<div style="cursor:text">text</div>
<div style="cursor:vertical-text">vertical-text</div>
<div style="cursor:alias">alias</div>
<div style="cursor:copy">copy</div>
<div style="cursor:move">move</div>
<div style="cursor:no-drop">no-drop</div>
<div style="cursor:not-allowed">not-allowed</div>
<div style="cursor:grab">grab</div>
<div style="cursor:grabbing">grabbing</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:w-resize">w-resize</div>
<div style="cursor:ew-resize">ew-resize</div>
<div style="cursor:ns-resize">ns-resize</div>
<div style="cursor:nesw-resize">nesw-resize</div>
<div style="cursor:nwse-resize">nwse-resize</div>
<div style="cursor:col-resize">col-resize</div>
<div style="cursor:row-resize">row-resize</div>
<div style="cursor:all-scroll">all-scroll</div>
<div style="cursor:zoom-in">zoom-in</div>
<div style="cursor:zoom-out">zoom-out</div>
表示
url
auto
default
none
context-menu
help
pointer
progress
wait
cell
crosshair
text
vertical-text
alias
copy
move
no-drop
not-allowed
grab
grabbing
e-resize
n-resize
ne-resize
nw-resize
s-resize
se-resize
sw-resize
w-resize
ew-resize
ns-resize
nesw-resize
nwse-resize
col-resize
row-resize
all-scroll
zoom-in
zoom-out

リンク


Copyright (C) 1997-2023 杜甫々
初版:1997年7月27日、最終更新:2023年3月19日
http://www.tohoho-web.com/css/prop/cursor.htm