|
初級篇★ページ作りの基礎知識２.
スタイルシートを使ってみよう
VOL12. その他の設定 その4
★ カーソルの形状を指定する
cursor:
<値>;
カーソルの形状を指定するプロパティには、以下の２4の値を指定できます。それぞれの実例はこちらでご覧になれますが、実際にCSSを使って動作させているため、IE6.0以外のブラウザでは正しく表示されない場合があります。
|
auto
... |
ブラウザが自動的に指定 （デフォルト） |
 |
crosshair
... |
十字形 |
 |
default
... |
標準的な矢印型 |
 |
pointer
... |
アンカー（リンク）上にあることを示す |
 |
move
... |
対象が移動可能 |
 |
e-resize
... |
右方向にリサイズ可能 |
 |
ne-resize
... |
右上方向にリサイズ可能 |
 |
nw-resize
... |
左上方向にリサイズ可能 |
 |
n-resize
... |
上方向にリサイズ可能 |
|
se-resize
... |
右下方向にリサイズ可能 |
|
sw-resize
... |
左下方向にリサイズ可能 |
|
s-resize
... |
下方向にリサイズ可能 |
|
w-resize
... |
左方向にリサイズ可能 |
 |
text
... |
文字を範囲指定できることを示す |
 |
wait
... |
処理中(ビジー状態) |
 |
help
... |
ヘルプを参照できることを示す |
※以下は、IE6.0から追加されたキーワードです。
※実例サンプルの動作部分は、CSS外部ファイルとHTMLで以下のように書かれています。
.center { text-align: center; }
p { width: 150px;
display: inline;
margin: 20px 15px;
padding: 20px;
background-color: #9b9bff;
border: 2px solid #036;
text-align: center; }
.cursor1 { cursor: crosshair; }
.cursor2 { cursor: default; }
.cursor3 { cursor: pointer; }
.cursor4 { cursor: move; }
.cursor5 { cursor: e-resize; }
.cursor6 { cursor: ne-resize; }
.cursor7 { cursor: nw-resize; }
.cursor8 { cursor: n-resize; }
.cursor9 { cursor: se-resize; }
.cursor10 { cursor: sw-resize; }
.cursor11 { cursor: s-resize; }
.cursor12 { cursor: w-resize; }
.cursor13 { cursor: text; }
.cursor14 { cursor: wait; }
.cursor15 { cursor: help; }
.cursor16 { cursor: all-scroll; }
.cursor17 { cursor: col-resize; }
.cursor18 { cursor: no-drop; }
.cursor19 { cursor: not-allowed; }
.cursor20 { cursor: progress; }
.cursor21 { cursor: row-resize; }
.cursor22 { cursor: vertical-text; }
.cursor23 { cursor: url(dinosau2.ani); }
.cursor24 { cursor: url(banana.ani); }
.cursor25 { cursor: url(barber.ani); }
.cursor26 { cursor: url(metronom.ani); }
.cursor27 { cursor: url(piano.ani); }
|
|
サンプル部分のHTML記述
<div class="center">
<p class="cursor1">crosshair; </p>
<p class="cursor2">default; </p>
<p class="cursor3">pointer; </p>
<p class="cursor4">move; </p>
<p class="cursor5">e-resize; </p>
<p class="cursor6">ne-resize; </p>
<p class="cursor7">nw-resize; </p>
<p class="cursor8">n-resize; </p>
<p class="cursor9">se-resize; </p>
<p class="cursor10">sw-resize; </p>
<p class="cursor11">s-resize; </p>
<p class="cursor12">w-resize; </p>
<p class="cursor13">text; </p>
<p class="cursor14">wait; </p>
<p class="cursor15">help </p>
<p class="cursor16">all-scroll; </p>
<p class="cursor17">col-resize; </p>
<p class="cursor18">no-drop; </p>
<p class="cursor19">not-allowed; </p>
<p class="cursor20">progress; </p>
<p class="cursor21">row-resize; </p>
<p class="cursor22">vertical-text; </p>
</div>
<div class="center">
<p class="cursor23">url(dinosau.ani) </p>
<p class="cursor24">url(banana.ani) </p>
<p class="cursor25">url(barber.ani) </p>
<p class="cursor26"><font size="2">url(metronom.ani)</font> </p>
<p class="cursor27">url(piano.ani) </p>
</div>
|
初級篇2.VOL12.
その他の設定・その3 <<
>> 初級篇2.VOL12.
その他の設定・その5
|
