cursor プロパティでの URL 値の使用

基本 (CSS 2.1) の基本的な記述は次の通りです。

cursor: [ <url()> , ]* <keyword>

つまり、0 個以上の URL を (カンマ区切りで) 指定することがありますが、 auto や pointer などの CSS 仕様書で定義されているキーワードうちの一つを指定する必要があります。

例えば次のような値が有効です。

cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;

始めに foo.cur を読み込もうとします。ファイルが存在しないか、何らかの理由で有効でない場合は、bar.gif を読み込もうとし、どちらも利用できない場合は auto が使用されます。

Gecko 1.8 (Firefox 1.5) では、 cursor の値に対して CSS 3 の構文が加えられました。

cursor: [ <url()> [ <x> <y> ]? , ]* <keyword>

これにより、カーソル画像の境界を設定するためのカーソル有効範囲を指定できます。指定がない場合、有効範囲はファイル (CUR か XBM ファイルの場合) の持つ設定が読み込まれるか、画像の左上端が設定されます。 CSS3 の構文の例は次の通りです。

.foo  {
  cursor: auto;
  cursor: url(cursor1.png) 4 12, auto;
}

.bar  {
  cursor: pointer;
  cursor: url(cursor2.png) 2 2, pointer;
}

/* IE では 'auto' や 'pointer' で代替されますが、個別に設定する必要があります */

初めの値は X 軸範囲で、2つ目の値は Y 軸範囲です。この例では、左上の (0, 0) の座標から (4, 12) までのピクセル座標が有効範囲になります。

Gecko で使用できる、すべての画像形式が対応されています。つまり PNG, GIF, JPG, BMP, CUR などの画像形式が使用できるということです。 ANI には対応していません。アニメーション PNG や GIF は動くカーソルとしては使用できません。

Gecko (Firefox) ではカーソルの寸法が 128×128px に制限されています。それより大きいカーソル画像は無視されます。ただし、オペレーティングシステムやプラットフォームとの互換性を最大化するために、 32×32px の大きさに制限してください。

(Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 ではバグにより、 Windows では 32x32px に制限されます。のちのバージョンでは修正されています。)

Windos XP より前の Windows は、半透明のカーソルには対応していません。これはオペレーティングシステムの制限です。透過はすべてのプラットフォームで動作します。

カーソルでの URL 値の使用は Windows、 OS/2、 Linux (GTK+ 2.4かそれ以上のバージョン) で対応しています。 Mac OS X での対応は Gecko 2 (Firefox 4) で追加されました。

Microsoft Internet Explorer 6.0 も cursor プロパティに対応しています。しかし、次の制限があります。

• IE は CUR と ANI 形式のみに対応。
• IE は CSS3 構文での X および Y 座標に対応していません。カーソルの画像、およびプロパティの残りの部分と一緒に無視されます。