CSS - Tips1

1. マウスカーソルを変えてみる

CSS2の機能を使って、システム(OS)が使用するマウスカーソルをブラウザ上で強引に変えてしまいます。各文字の上でマウスカーソルが変わります。

ただし、システムのマウスカーソルを用いるため、各カーソルの説明はあくまで標準に対してです。また、CSS2対応ブラウザのみご使用になれます。（IE4,IE5確認済み）

手引きに従って、実際に使ってみましょう！

▼実例▼

auto	ブラウザ任せのカーソル
crosshair	十字カーソル
default	システム標準のカーソル
pointer	アンカーなどで用いるカーソル
hand	アンカーなどで用いるカーソル
move	移動可能な状態（矢印付き十字）を示すカーソル
n-resize	上（北=north）向きのカーソル
ne-resize	右上（北東=northeast）向きのカーソル
e-resize	右（東=east）向きのカーソル
se-resize	右下（南東=southeast）向きのカーソル
s-resize	下（南=south）向きのカーソル
sw-resize	左下（南西=southwest）向きのカーソル
w-resize	左（西=west）向きのカーソル
nw-resize	左上（北西=northwest）向きのカーソル
text	選択可能なテキストを示す（縦棒）カーソル
wait	処理中（砂時計）カーソル
help	ヘルプ（？マーク）カーソル

▼手引き▼

テンプレート（ cursor.css ）をダウンロード
HTMLファイルに組み込む
<LINK Type="text/css" Rel="stylesheet" Href="cursor.css"> をHEAD部分に記述。ただし、「cursor.css」のパスは合わせること。
使いたい要素（開始タグ）のId属性に「実例」のキーワードを指定する（サンプル参照）
実際にブラウザで見てみる

<HTML>
  <HEAD>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
    <META Http-Equiv="Content-Style-Type" Content="text/css">
    <LINK Type="text/css" Rel="stylesheet" Href="cursor.css">
  </HEAD>
  <BODY>
    <H1>カーソルの変更</H1>
    <P>
      マウスカーソルが
      <SPAN Id="wait">砂時計</SPAN>
      に変わります。
    </P>
  </BODY>
</HTML>

上のサンプルを実際に表示

CSS Tips

Samples

1. マウスカーソルを変えてみる

▼実例▼

▼手引き▼