ウェブランサー

cursor - カーソルの形状を指定する

対応ブラウザ
IE7対応IE8対応Firefox対応Chrome対応Opera対応Safari対応
適用対象 全ての要素
継承 する

cursorプロパティは、マウスカーソルの形状を指定する際に使用します。

カーソルに画像を使用したい場合には、[.cur(カーソルファイル)]や[.ani(アニメーションカーソルファイル)]を指定します。全てのブラウザに対応させたい場合には、両方同時に指定しておきましょう。

cursorに与えられる値

cursor: auto;
状況に応じて自動的にカーソルを選択します。
cursor: crosshair;
十字線のカーソルです。
cursor: default;
標準的なカーソルです。
cursor: pointer;
リンクポインタカーソルです。
cursor: move;
移動カーソルです。
cursor: text;
テキスト編集カーソルです。
cursor: wait;
待機・処理中カーソルです。
cursor: progress;
進行中カーソルです。
cursor: help;
ヘルプカーソルです。
cursor: n-resize;
上(北方向)がリサイズ可能であることを示すカーソル。
cursor: ne-resize;
右上(北東方向)がリサイズ可能であることを示すカーソル。
cursor: e-resize;
右辺(東方向)がリサイズ可能であることを示すカーソル。
cursor: se-resize;
右下(南東方向)がリサイズ可能であることを示すカーソル。
cursor: s-resize;
下(南方向)がリサイズ可能であることを示すカーソル。
cursor: sw-resize;
左下(南西方向)がリサイズ可能であることを示すカーソル。
cursor: w-resize;
左(西方向)がリサイズ可能であることを示すカーソル。
cursor: nw-resize;
左上(北西方向)がリサイズ可能であることを示すカーソル。
cursor: url(値), 値;
[url()]でカーソルとして表示させたい任意の画像を指定できます。画像が表示できなかったときのために、代用カーソルとして、上記の中からいずれかのキーワードを、カンマ[,]区切りで指定することができます。

cursorの使用サンプル

CSS
.sample01 { cursor: auto;}
.sample02 { cursor: crosshair;}
.sample03 { cursor: default;}
.sample04 { cursor: pointer;}
.sample05 { cursor: move;}
.sample06 { cursor: text;}
.sample07 { cursor: wait;}
.sample08 { cursor: progress;}
.sample09 { cursor: help;}
.sample10 { cursor: n-resize;}
.sample11 { cursor: ne-resize;}
.sample12 { cursor: e-resize;}
.sample13 { cursor: se-resize;}
.sample14 { cursor: s-resize;}
.sample15 { cursor: sw-resize;}
.sample16 { cursor: w-resize;}
.sample17 { cursor: nw-resize;}
.sample18 { cursor: url(images/icon_sample_viao.cur), pointer;}
XHTML
<div class="sample01">sample01 [cursor: auto;]</div>
<div class="sample02">sample02 [cursor: crosshair;]</div>
<div class="sample03">sample03 [cursor: default;]</div>
<div class="sample04">sample04 [cursor: pointer;]</div>
<div class="sample05">sample05 [cursor: move;]</div>
<div class="sample06">sample06 [cursor: text;]</div>
<div class="sample07">sample07 [cursor: wait;]</div>
<div class="sample08">sample08 [cursor: progress;]</div>
<div class="sample09">sample09 [cursor: help;]</div>
<div class="sample10">sample10 [cursor: n-resize;]</div>
<div class="sample11">sample11 [cursor: ne-resize;]</div>
<div class="sample12">sample12 [cursor: e-resize;]</div>
<div class="sample13">sample13 [cursor: se-resize;]</div>
<div class="sample14">sample14 [cursor: s-resize;]</div>
<div class="sample15">sample15 [cursor: sw-resize;]</div>
<div class="sample16">sample16 [cursor: w-resize;]</div>
<div class="sample17">sample17 [cursor: nw-resize;]</div>
<div class="sample18">sample18 [cursor: url(images/icon_sample_viao.cur), pointer;]</div>
表示確認
sample01 [cursor: auto;]
sample02 [cursor: crosshair;]
sample03 [cursor: default;]
sample04 [cursor: pointer;]
sample05 [cursor: move;]
sample06 [cursor: text;]
sample07 [cursor: wait;]
sample08 [cursor: progress;]
sample09 [cursor: help;]
sample10 [cursor: n-resize;]
sample11 [cursor: ne-resize;]
sample12 [cursor: e-resize;]
sample13 [cursor: se-resize;]
sample14 [cursor: s-resize;]
sample15 [cursor: sw-resize;]
sample16 [cursor: w-resize;]
sample17 [cursor: nw-resize;]
sample18 [cursor: url(images/icon_sample_viao.cur), pointer;]

cursorに関連するCSSプロパティ