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>
  • none
  • zoom-in, zoom-out

画像は<uri>の形なら使えます。noneはIE 9で対応しました。

zoom-in, zoon-outは、手元のGoogle Chrome for Mac 23でも対応していませんでした。(それ以外は全て対応していました。) なおこの二つは、Firefoxもですが、ベンダープレフィックスを付けると利用可能なようです。

参考

(あー、MDNを見れば、今回の記事はいらなかったのでは……。)