09.cursorプロパティは、カーソルの形状を指定します。適用要素:すべての要素


※★CSS
.sample1 {cursor: auto;width: 300px;height: 20px;border: 2px solid #cccccc;}
.sample2 {cursor: default;width: 300px;height: 20px;border: 2px solid #cccccc;}
.sample3 {cursor: pointer;width: 300px;height: 20px;border: 2px solid #cccccc;}
.sample4 {cursor: crosshair;width: 300px;height: 20px;border: 2px solid #cccccc;}
.sample5 {cursor: move;width: 300px;height: 20px;border: 2px solid #cccccc;}
                ・
                ・
                ・
.sample21 {cursor: no-drop;width: 300px;height: 20px;border: 2px solid #cccccc;}
.sample22 {cursor: progress;width: 300px;height: 20px;border: 2px solid #cccccc;}
.sample23 {cursor: vertical-text;width: 300px;height: 20px;border: 2px solid #cccccc;}


※★HTML
<div class=sample1>01auto:自動選択(初期値)</div>
<div class=sample2>02default:デフォルト</div>
<div class=sample3>03pointer:リンク</div>
<div class=sample4>04crosshair:クロス</div>
<div class=sample5>05move:移動</div>
            ・
            ・
            ・
<div class=sample21>21no-drop:ドロップ不可</div>
<div class=sample22>22progress:処理中</div>
<div class=sample23>23vertical-text:縦書テキスト</div>


解説(カーソル一覧)
01auto 自動選択(初期値)
02default デフォルト
03pointer リンク
04crosshair クロス
05move 移動
06text テキスト
07wait 処理中
08help ヘルプ
09n-resize 上リサイズ
10e-resize 右リサイズ
11s-resize 下リサイズ
12w-resize 左リサイズ
13ne-resize 右上リサイズ
14se-resize 右下リサイズ
15sw-resize 左下リサイズ
16nw-resize 左上リサイズ
24url(uri) オリジナル
解説(独自拡張カーソル一覧)
17col-resize 左右リサイズ
18row-resize 上下リサイズ
19all-scroll 上下左右スクロール
20not-allowed 不可
21no-drop ドロップ不可
22progress 処理中
23vertical-text 縦書テキスト

★カーソルを該当項目に移動するとアイコン表示されます

サンプル画面表示イメージ
カーソル一覧
01auto:自動選択(初期値)
02default:デフォルト
03pointer:リンク
04crosshair:クロス
05move:移動
06text:テキスト
07wait:処理中
08help:ヘルプ
09n-resize:上リサイズ
10e-resize:右リサイズ
11s-resize:下リサイズ
12w-resize:左リサイズ
13ne-resize:右上リサイズ
14se-resize:右下リサイズ
15sw-resize:左下リサイズ
16nw-resize:左上リサイズ
24url(uri):オリジナル
独自拡張カーソル一覧
17col-resize:左右リサイズ
18row-resize:上下リサイズ
19all-scroll:上下左右スクロール
20not-allowed:不可
21no-drop:ドロップ不可
22progress:処理中
23vertical-text:縦書テキスト