CSS おれおれ Advent Calendar 2012 – 07日目
寝るまでが今日です。（ｷﾘｯ
JavaScriptで拾うボタン風の要素にcursor:pointerのように指定した事もあるんじゃないかと思うんですが、それです。
結構色々と種類があるので、一覧を眺めておくと良いんじゃないでしょうか。特にアプリを作る方。
追記 2012-12-08: タイトルを「36+α種類」から「35+α種類」に変更。数え間違えてました……。
cursorプロパティの値一覧
各行ではそのcursorを設定しています。カーソルを乗っけてみてください。変化ない場合、ブラウザーがそのカーソルに対応してないです。
あとCSS 2.1の時点で仕様として定められてあったものは明記してあります。（18個） 記載ないものは全てCSS3ですね。
画像
| 値 | 説明 | 例 |
|---|---|---|
| <uri> | アイコンとして使う画像のURI。url("xxx.png")みたいな。実際の指す箇所は左上。意外とCSS 2.1から。 |
（任意任意の画像） |
| <uri> <x> <y> | 左上以外を指す場合、その座標を設定できる。 | （任意任意の画像） |
画像はカンマ,で区切って複数指定できます。先頭のものから確認して、最初に利用可能なものが採用されます。
ただしIEは*.curないし*.aniという専用の種類のファイルである必要があるとのこと。
またどれも駄目だったとき用に、キーワードをいずれかひとつ指定する必要があります。
.foo {
cursor: url("cursor.svg"), url("cursor.gif"), pointer;
}
キーワード
| 値 | 説明 | 例 |
|---|---|---|
auto |
自動で切り替わる。例えば文章だったらtextに、リンクだったらpointerに、それ以外ならdefaultに。CSS 2.1から。 |
（いろいろ） |
default |
デフォルトのもの。たとえカーソルが文章の上でもリンクの上でも、デフォルトの矢印にする。CSS 2.1から。 | 矢印 |
none |
カーソルなし。 | （見えない） |
| 値 | 説明 | 例 |
|---|---|---|
context-menu |
コンテキストメニュー用。CSS 2.1から。 | 小さなメニューっぽいの |
help |
ヘルプ用。CSS 2.1から。 | はてな |
pointer |
リンク用。CSS 2.1から。 | 人差し指 |
progress |
進行中用。`wait`と異なり、操作は可能な状態のときに。CSS 2.1から。 | くるくる |
wait |
待機中用。ビジー状態になり、ユーザーは操作できないときに。CSS 2.1から。 | 砂時計、腕時計 |
| 値 | 説明 | 例 |
|---|---|---|
cell |
セル選択用。 | Excelの十字カーソル |
crosshair |
範囲選択用。特にビットマップ画像。CSS 2.1から。 | 十字 |
text |
テキスト用。テキストの方向に自動的に合わせる。 | Iビーム |
vertical-text |
垂直テキスト用。日本語の文章とか。 | Iビーム（横） |
| 値 | 説明 | 例 |
|---|---|---|
alias |
ショートカット（エイリアス、別名）作成用。 | くるっとした矢印 |
copy |
複製用。コピー・アンド・ペースト。 | [+]とか(+)とか |
move |
移動用。カット・アンド・ペースト。CSS 2.1から。 | 十字の矢印 |
no-drop |
ドロップできない領域用。 | 禁止 |
not-allowed |
操作できない領域用。 | 禁止 |
| 値 | 説明 | 例 |
|---|---|---|
n-resize |
上側へのサイズ変更用。nはNorth（北）の意味。CSS 2.1から。 | 上向きの矢印 |
e-resize |
右側へのサイズ変更用。eはEast（東）の意味。CSS 2.1から。 | 右向きの矢印 |
s-resize |
下側へのサイズ変更用。sはSouth（南）の意味。CSS 2.1から。 | 下向きの矢印 |
w-resize |
左側へのサイズ変更用。wはWest（西）の意味。CSS 2.1から。 | 左向きの矢印 |
nw-resize |
左上側へのサイズ変更用。CSS 2.1から。 | 左上向きの矢印 |
ne-resize |
右上側へのサイズ変更用。CSS 2.1から。 | 右上向きの矢印 |
se-resize |
右下側へのサイズ変更用。CSS 2.1から。 | 右下向きの矢印 |
sw-resize |
左下側へのサイズ変更用。CSS 2.1から。 | 左下向きの矢印 |
ew-resize |
左右のサイズ変更用。 | 左右の矢印 |
ns-resize |
上下のサイズ変更用。 | 上下の矢印 |
nesw-resize |
右上、左下のサイズ変更用。 | 右上、左下の矢印 |
nwse-resize |
左上、右下のサイズ変更用。 | 左上、右下の矢印 |
col-resize |
列のサイズ変更用。 | 左右の矢印と縦棒 |
row-resize |
行のサイズ変更用。 | 上下の矢印と横棒 |
all-scroll |
前方向スクロール用。ドラッグしてスクロールとか。 | 十字の矢印 |
| 値 | 説明 | 例 |
|---|---|---|
zoom-in |
ズームイン用。 | 虫眼鏡(+) |
zoom-out |
ズームアウト用。 | 虫眼鏡(-) |
独自拡張
| 値 | 説明 | 例 |
|---|---|---|
grab |
ドラッグで掴めるもの用。CSS3で未定義。 | 開いた手 |
zoom-out |
ドラッグで掴んだ状態用。CSS3で未定義。 | 握った手 |
対応状況とか
IEでもわりと多くを対応していて、IE 6で使えないのは以下です。
alias,cell,copy,ew-resize,ns-resize,nesw-resize,nwse-resize,context-menu<uri> <x> <y>nonezoom-in,zoom-out
画像は<uri>の形なら使えます。noneはIE 9で対応しました。
zoom-in, zoon-outは、手元のGoogle Chrome for Mac 23でも対応していませんでした。（それ以外は全て対応していました。） なおこの二つは、Firefoxもですが、ベンダープレフィックスを付けると利用可能なようです。
参考
- Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
- 18.1 Cursors: the ‘cursor’ property … CSS 2.1の仕様
- CSS Basic User Interface Module Level 3 (CSS3 UI)
- cursor – CSS | MDN … Mozillaの。日本語。各値のブラウザーの対応状況なども。
（あー、MDNを見れば、今回の記事はいらなかったのでは……。）