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> | カーソル形状を指定します。下記を参照してください。 |
カーソル形状の意味と、各ブラウザでの対応状況を下記に示します。
| カーソル形状 | 説明 | IE | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|---|
| 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
リンク
- https://developer.mozilla.org/ja/docs/Web/CSS/cursor
- https://w3c.github.io/csswg-drafts/css-ui/#cursor
Copyright (C) 1997-2023 杜甫々
初版:1997年7月27日、最終更新:2023年3月19日
https://www.tohoho-web.com/css/prop/cursor.htm