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:縦書テキスト