ホーム＞HTMLリファレンス（アルファベット検索）＞cursorプロパティ
cursor プロパティ …カーソルの形を指定する
使用プロパティ
 |
cursor: 値; |
対象となる
要素 |
すべて |
継承 |
しない
|
値 |
次項「値と働きと表示例」また、
「Internet Explorer 独自のキーワード」を参照してください。 |
 |
      |
 解説
 cursor プロパティを使えば、表示された要素の上にマウスポインタを重ねたときのカーソルの形状を変更することができます。
不用意にカーソルの形状を変更すると、何も効果がない要素上でクリックしてしまうなど、ユーザーの操作がまぎらわしくなる恐れがありますので注意しましょう。
※オリジナルのカーソルで使用可能なファイル形式は、Internet Explorer の場合は「 .cur 」と「 .ani 」で、Firefoxの場合は、GIFやJPEG、PNGなどです。
また、カンマ「, 」で区切って複数のカーソルを設定し、ブラウザが対応していない値を指定した場合に、代わりとなるカーソルを指定することができます。
|
| 値 |
値の効果 |
表示例（カーソルを合わせてください） |
| auto |
ブラウザに依存する |
カーソル表示例 |
| default |
OSの標準のカーソル |
カーソル表示例 |
| pointer |
ポインタ |
カーソル表示例 |
| crosshair |
十字線 |
カーソル表示例 |
| move |
移動 |
カーソル表示例 |
| e-resize |
右辺のリサイズ |
カーソル表示例 |
| w-resize |
左辺のリサイズ |
カーソル表示例 |
| n-resize |
上辺のリサイズ |
カーソル表示例 |
| s-resize |
下辺のリサイズ |
カーソル表示例 |
| ne-resize |
右上のリサイズ |
カーソル表示例 |
| nw-resize |
左上のリサイズ |
カーソル表示例 |
| se-resize |
右下のリサイズ |
カーソル表示例 |
| sw-resize |
左下のリサイズ |
カーソル表示例 |
| text |
テキスト |
カーソル表示例 |
| wait |
処理待ち |
カーソル表示例 |
| help |
ヘルプ |
カーソル表示例 |
| url(URL) |
オリジナルのカーソル |
|
| 値 |
値の効果 |
表示例（カーソルを合わせてください） |
| all-scroll |
上下左右スクロール |
カーソル表示例 |
| col-reaize |
左右リサイズ |
カーソル表示例 |
| row-reaize |
上下リサイズ |
カーソル表示例 |
| vertical-text |
縦書きテキスト |
カーソル表示例 |
| progress |
処理中 |
カーソル表示例 |
| no-drop |
クリック不可 |
カーソル表示例 |
| not-allowed |
禁止 |
カーソル表示例 |
△ページトップへ
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
a.sample {
cursor: help;
}
</style>
</head>
<!--ページの本文-->
<body>
<p>困ったときはこちら→「<a href="help.html" class="sample">ヘルプ</a>」</p>
</body>
|
|
[ブラウザでの表示例]
| HOME PAGE ZERO ガイド |
|
困ったときはこちら→「ヘルプ」
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他
