■cursor(カーソル）
あ、さて今回は、カーソルの形状を変えてみましょう。
皆様も見たことがあるのでは？凝ったデザインのサイトでカーソルがいつも見なれた矢印から＋になったりするのを。
通常ページ上では、リンクが設定されたテキストや画像の上にカーソルを乗せるとカーソルが変化します。 今回説明するcursor属性を用いるとリンクとは無関係でカーソルの形状を変化させることが出来ます。
今回のこのスタイルは、IE4と5だけしか反映されません。NNは駄目々です。NNは新バージョンに期待しましょう！
| cursor:☆; | ☆⇒（１）キーワードによる指定 |
| cursor:url(★),url(★),☆; | ★⇒（２）ＵＲＬ |
（１）キーワードによる指定
キーワードによって、カーソルの形状を指定することが出来ます。
キーワードの一覧と説明は以下の通りです。 それぞれのキーワードにマウスを置くとカーソルが変化します。（IEのみ）
| キーワード | カーソルの形状 |
|---|---|
auto | ブラウザが自動的に指定 |
| crosshair | 十字カーソル |
default | 標準的なカーソル。矢印が多い |
pointer | アンカー上にある時のカーソル |
move | 対象が移動可能である時のカーソル |
e-resize | ウィンドウの大きさを変更（右方向） |
ne-resize | ウィンドウの大きさを変更（右上方向） |
nw-resize | ウィンドウの大きさを変更（左上方向） |
n-resize | ウィンドウの大きさを変更（上方向） |
se-resize | ウィンドウの大きさを変更（右下方向） |
sw-resize | ウィンドウの大きさを変更（左下方向） |
s-resize | ウィンドウの大きさを変更（下方向） |
w-resize | ウィンドウの大きさを変更（左方向） |
text | 文字を範囲指定するカーソル |
wait | 時間のかかる作業を行なっている時のカーソル |
help | ヘルプを利用できる時に表示されるカーソル |
（２）ＵＲＬ
オリジナルで作成した画像をカーソルにする事も出来ます。
その場合はカーソルのファイルをＵＲＬ（ファイルまでのパス）で指定します。ブラウザによっては指定されたファイルをカーソルとして表示できない場合もあるので、ＵＲＬを複数指定するようにします。（左側から順番に表示を試みていきます）。
その際、末尾にキーワードを入れておくとすべてのＵＲＬが失敗した場合、そのキーワードの示すカーソルが表示されます。
下のここからコピーという部分をコピーして貴方のホームページの書類の<HEAD>〜</HEAD>の間にペーストしてください。
そうすれば、そのページのカーソルが対象が移動可能である時のカーソルに変更になります。
他のカーソルに変更する場合は、最初のbody{cursor:move;}の部分を好みのキーワードに変えてください。
−−−ここからコピー−−−
<style type="text/css">
<!--
body{cursor:move;}
p{width:600;background-color: #CCFFCC;
border-style:double double double;
border-width:5pt 3pt 3pt;
border-color: #336633;
padding:4px;}
a:link { color: #009900; text-decoration: none;}
a:visited { color: #336633; text-decoration: none;}
a:active { color: #00FF00; text-decoration: none;}
a:hover { color: #003333; text-decoration: underline overline;
font-size: 12px;
line-height: 14pt;
font-weight: bold;
background-color: #CCFFCC;}
- -> </style>
- 作品名
- 第3回「カーソルを変えてみよう」
- 登録日時
- 2007/02/11(日) 17:55
- 分類
- コピーして使えるスタイルシート
−−−ここまでコピー−−−
参考：cursor