cursor

この情報はお役に立ちましたか？よろしければ皆様にもお知らせください。

cursorプロパティの役割

cursorプロパティは、マウスカーソル（ポインタ）の画像を指定します。

auto		ブラウザが自動的に選択。
crosshair		十字線。
default		初期値。Windowsならば矢印、Macintoshならポインターの形状。
e-resize		右辺リサイズ。
help		ヘルプ。
move		移動可能。
n-resize		上辺リサイズ。
ne-resize		右上隅リサイズ。
nw-resize		左上隅リサイズ。
pointer		リンクボタン用。
progress		砂時計。
s-resize		下辺リサイズ。
se-resize		右下隅リサイズ。
sw-resize		左下隅リサイズ。
text		テキスト選択。
w-resize		左辺リサイズ。
wait		待機中。
URLを指定		指定したURLにある画像をカーソルとして表示。

なお、URLを指定する場合には、

cursor: url(xxx.cur), default;

のように、カーソル画像ファイルへのパスと、それが表示できなかった場合のパラメータを上記リストから一つ選んでおきます。

cursor:url(../../../data/img/css/property/cursor-17.cur),default

この枠線内ではカーソルの画像が変わります。

上記のサンプルでは、[sample]の枠線内にマウスポインタがある間は、指定した画像（cursor-17.cur）に変わります。

なお、カーソルに指定できる画像を作る場合には、.curというファイル形式で画像を作らなければ認識されません。

.cur形式の画像をつくるには、ANIメーカーというソフトが適しています。

UpDate:2010-8-3

〔Amazonの書籍紹介ページを開きます〕

実践的内容のCSS＋XHTMLの解説書。よくわからずにCSSを使っていた、というような初心者にとくにお奨めです。若干雑なつくりが気になりますが、ウェブ制作者のノウハウも知ることができます。

内容が正確で説明が丁寧なXHTMLとCSSの解説書。異なるブラウザ間での互換性の保持やアクセシビリティを考慮したつくりにも触れています。ボリュームがあり辞典的な使い方ができます。

HTML文書をつくる上で辞典の存在は欠かせません。ウェブ上で調べればいいと思う人もいるかもしれませんが、やはり傍らにおいてすぐに調べられるようにしておくと作業は早くなります。中級者向け。

ウェブデザイン、ウェブサイト作成の初心者～中級者向けの本。丁寧なつくりでHTMLの要素、CSSのプロパティ解説ページにおいても関連ページの表記を細かく行っています。

CSS、Flash、XHTML、Ajax等、ウェブデザインの全容を確認・勉強できる、ウェブデザイン初心者のための本。実際のコーディングに関しての説明は少なく、HTMLなどの知識は別途勉強する必要があります。

実際に一つのウェブサイトをつくる過程を経験しながらHTMLやCSSを理解していくスタイルをとっている本。初心者向けで非常にわかりやすい構成です。

中級者以降向け。独学でDreamweaver を使ってきた人など、実は便利な機能があることや正しい使い方を知らない、という人に向いています。本書はCS3を想定してかかれていますが、それ以外のバージョンであっても読むことはできます。

ウェブサイトの制作に沿った形で参照できるDreamweaver の解説本。逆引きリファレンスのような感覚で、知りたい箇所から読んで理解することができる、非常に分かりやすい本。初心者～中級者向け。

ウェブ制作の必携ツール・・・といったら大袈裟かもしれませんが、HTMLとCSSを一通り覚えたら、Dreamweaver を使って制作した方が圧倒的に楽になります。バージョンアップするごとに確実に使い勝手は向上しています。