サイト内検索

...スタイルシート(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>

[ブラウザ上]

移動する
東方向へのリサイズ

Copyright c 2007.10.01 luc All rights reserved.