サイト内検索
...スタイルシート(css)...
スタイルシート・カーソル
カーソル
- カーソルの形を変更するには、cursorプロパティを指定します。
- [使い方]
- .sample{cursor: help;}
プロパティ名 | 値 | 説明 |
---|---|---|
cursor: | auto; | ブラウザが自動的に選択したカーソル
|
cursor: | default; | 矢印型など利用環境の標準カーソル
|
cursor: | pointer; | リンクカーソル
|
cursor: | crosshair; | 十字カーソル
|
cursor: | move; | 移動カーソル
|
cursor: | text; | テキスト編集カーソル
|
cursor: | wait; | 待機・処理中カーソル
|
cursor: | help; | ヘルプカーソル
|
cursor: | n-resize; | 北方向のリサイズカーソル
|
cursor: | s-resize; | 南方向のリサイズカーソル
|
cursor: | w-resize; | 西方向のリサイズカーソル
|
cursor: | e-resize; | 東方向のリサイズカーソル
|
cursor: | ne-resize; | 北東方向のリサイズカーソル
|
cursor: | nw-resize; | 北西方向のリサイズカーソル
|
cursor: | se-resize | 南東方向のリサイズカーソル
|
cursor: | sw-resize; | 南西方向のリサイズカーソル
|
cursor: | progress; | 進行中・砂時計カーソル
|
cursor: | help; | ヘルプ(疑問符など)カーソル(IE6以上)
|
cursor: | url('../img/sample.cur'), text | オリジナルのカーソル(IE6以上)
|
サンプル
[headの中]
<style type="text/css"><!--
.sample1{cursor: move;}
.sample2{cursor: e-resize;}
.sample3{cursor: url(../img/sample.cur), default;}
[bodyの中]
<div class="sample1">移動する</div><div class="sample2">左右方向へのリサイズ</div>
[ブラウザ上]
移動する
東方向へのリサイズ