cursor

解説

マウスカーソルの形状を指定します。URLは最優先順に複数指定することができますが、キーワードは最後に1回のみ指定できます。オリジナルカーソルに使用できるファイル形式は、.CUR と.ANI のみのUAが多いようです。

プロパティ情報

値：URIは複数指定することができ（指定せずとも良い）、auto,crosshair,default,pointer,move,e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize| text,wait,helpの中からいずれか1つ（URIを指定した際は指定せずとも良い）
初期値：auto
適用対象：全ての要素
継承：する
パーセンテージ：不可
適用メディア：視覚
レベル：2

参照

使用例

ソース

CSSの記述方法はスタイルシートってなに？も参照下さい。

<p style="cursor: auto">ブラウザが自動的に選択</p>
<p style="cursor: default">利用環境の標準</p>
<p style="cursor: pointer">リンク</p>
<p style="cursor: crosshair">十字</p>
<p style="cursor: move">移動</p>
<p style="cursor: text">テキスト編集</p>
<p style="cursor: wait">待機・処理中</p>
<p style="cursor: help">ヘルプ</p>
<p style="cursor: n-resize">北方向のリサイズ</p>
<p style="cursor: s-resize">南方向のリサイズ</p>
<p style="cursor: w-resize">西方向のリサイズ</p>
<p style="cursor: e-resize">東方向のリサイズ</p>
<p style="cursor: ne-resize;">北東方向のリサイズ</p>
<p style="cursor: nw-resize;">北西方向のリサイズ</p>
<p style="cursor: se-resize">南東方向のリサイズ</p>
<p style="cursor: sw-resize;">南西方向のリサイズ</p> 
<p style="cursor: hand">指型</p> 
<p style="cursor: no-drop">ドロップ禁止（IE6以上）</p>
<p style="cursor: all-scroll">全スクロール（IE6以上）</p>
<p style="cursor: col-resize">横方向のリサイズ（IE6以上）</p>
<p style="cursor: row-resize">縦方向のリサイズ</p>
<p style="cursor: progress">進行中（IE6以上）</p>
<p style="cursor: not-allowed">禁止（IE6以上）</p>
<p style="cursor: vertical-text">縦書き（IE6以上）</p>
<p style="cursor: url('./samp.ani')">オリジナルカーソル（IE6以上）</p>

表示結果

ブラウザが自動的に選択

利用環境の標準

リンク

十字

移動

テキスト編集

待機・処理中

ヘルプ

北方向のリサイズ

南方向のリサイズ

西方向のリサイズ

東方向のリサイズ

北東方向のリサイズ

北西方向のリサイズ

南東方向のリサイズ

南西方向のリサイズ

指型

ドロップ禁止（IE6以上）

全スクロール（IE6以上）

横方向のリサイズ（IE6以上）

縦方向のリサイズ

進行中（IE6以上）

禁止（IE6以上）

縦書き（IE6以上）

オリジナルカーソル（IE6以上）