cursor 【カーソル】

[IE5] [IE6] [IE7] [Fx1] [Fx2] [Op7] [Ns6] [Ns7]

cursorプロパティは、マウスカーソルの形状を指定する際に使用します。
.cur(カーソルファイル)と.ani(アニメーションカーソルファイル)を指定して、オリジナルカーソルを表示する事も出来ます。

cursorの使用例

CSSファイル

.sample001 {
 color: #000000;
 border: 1px solid #0066ff;
 background-color: #ccccff;
 margin: 10px;
}
※今回は見た目の指定のみです。カーソル指定は下記参照↓

HTMLソース

<p class="sample001" style="cursor: auto">
 auto:ブラウザが自動選択</p>
<p class="sample001" style="cursor: default">
 default:標準的なカーソル</p>
<p class="sample001" style="cursor: pointer">
 pointer:リンクカーソル</p>
<p class="sample001" style="cursor: crosshair">
 crosshair:十字カーソル</p>
<p class="sample001" style="cursor: move">
 move:移動カーソル</p>
<p class="sample001" style="cursor: text">
 text:テキスト編集カーソル</p>
<p class="sample001" style="cursor: vertical-text">
 vertical-text:縦書きカーソル</p>
<p class="sample001" style="cursor: wait">
 wait:待機・処理中カーソル</p>
<p class="sample001" style="cursor: progress">
 progress:進行中カーソル</p>
<p class="sample001" style="cursor: help">
 help:ヘルプカーソル</p>
<p class="sample001" style="cursor: hand">
 hand:手型カーソル</p>
<p class="sample001" style="cursor: not-allowed">
 not-allowed:禁止カーソル</p>
<p class="sample001" style="cursor: no-drop">
 no-drop:ドロップ禁止カーソル</p>
<p class="sample001" style="cursor: n-resize">
 n-resize:北方向のリサイズカーソル</p>
<p class="sample001" style="cursor: s-resize">
 s-resize:南方向のリサイズカーソル</p>
<p class="sample001" style="cursor: w-resize">
 w-resize:西方向のリサイズカーソル</p>
<p class="sample001" style="cursor: e-resize">
 e-resize:東方向のリサイズカーソル</p>
<p class="sample001" style="cursor: ne-resize">
 ne-resize:北東方向のリサイズカーソル</p>
<p class="sample001" style="cursor: nw-resize">
 nw-resize:北西方向のリサイズカーソル</p>
<p class="sample001" style="cursor: se-resize">
 se-resize:南東方向のリサイズカーソル</p>
<p class="sample001" style="cursor: sw-resize">
 sw-resize:南西方向のリサイズカーソル</p>
<p class="sample001" style="cursor: col-resize">
 col-resize:横方向のリサイズカーソル</p>
<p class="sample001" style="cursor: row-resize">
 row-resize:縦方向のリサイズカーソル</p>
<p class="sample001" style="cursor: all-scroll">
 all-scroll:全方向スクロールカーソル</p>

表示すると

 auto:ブラウザが自動選択

 default:標準的なカーソル

 pointer:リンクカーソル

 crosshair:十字カーソル

 move:移動カーソル

 text:テキスト編集カーソル

 vertical-text:縦書きカーソル

 wait:待機・処理中カーソル

 progress:進行中カーソル

 help:ヘルプカーソル

 hand:手型カーソル

 not-allowed:禁止カーソル

 no-drop:ドロップ禁止カーソル

 n-resize:北方向のリサイズカーソル

 s-resize:南方向のリサイズカーソル

 w-resize:西方向のリサイズカーソル

 e-resize:東方向のリサイズカーソル

 ne-resize:北東方向のリサイズカーソル

 nw-resize:北西方向のリサイズカーソル

 se-resize:南東方向のリサイズカーソル

 sw-resize:南西方向のリサイズカーソル

 col-resize:横方向のリサイズカーソル

 row-resize:縦方向のリサイズカーソル

 all-scroll:全方向スクロールカーソル

カーソル関連項目

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

戻る

TOP

WEB SEARCH
MENU
CONTENTS
digilog.TOP
digilog.HTML
digilog.CSS
digilog.SEO
digilog.img