SITEMAP [初めてのホームページ講座] [CSS] [CSS Tips] [マウスカーソルを変えてみる]

CSS Tips

Samples

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 ヘルプ(?マーク)カーソル

▼手引き▼

  1. テンプレート( cursor.css )をダウンロード
  2. HTMLファイルに組み込む

    <LINK Type="text/css" Rel="stylesheet" Href="cursor.css"> をHEAD部分に記述。ただし、「cursor.css」のパスは合わせること。

  3. 使いたい要素(開始タグ)のId属性に「実例」のキーワードを指定する(サンプル参照)
  4. 実際にブラウザで見てみる
<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>

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

[Go To Top]

Copyright(C)1999 Miyazaki , All Rights Reserved.