カーソルに画像をつけたい

[新着] Webテンプレートを仮オープンしました



0   名前: るり : 2006/07/02(日) 12:18
はじめまして、るりといいます。
カーソルに画像をつけるタグはないんでしょうか?

私もあると思ったんですが、なかなか見つかりません・・・

誰か教えてくれませんか?

1   名前: Newのり太 : 2006/07/02(日) 12:18
そんなタグありません。
スタイルシートで出来ます。
このサイトにのってます。
http://www.google.co.jp/search?ie=Shift_JIS&oe=Shift_JIS&hl=ja&as_sitesearch=tagindex.com&q=%83J%81%5B%83%5C%83%8B

2   名前: るり : 2006/07/02(日) 12:18
ありがとうございます。
タグではなくて、スタイルシートなんですね。

また質問なんですが、
基本のカーソル(「+」などのマーク)
は、場所を指定しないと表示できませんが、

全体でカーソルをかえるにはどうしたらいいのでしょうか?

cursor: url(画像URL)

これだと、cur かani形式の画像ではないとできないんですよね?
ソフトがないと、curかani形式にできないのでしょうか?

すいません・・・。よくわからないかもしれません・・。

3   名前: S : 2006/07/02(日) 12:18
 たとえばGoogleで検索してみるなど。

http://www.google.co.jp/search?hl=ja&q=%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB+%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB+%E4%BD%9C%E6%88%90&lr=lang_ja

HTMLの基礎)
http://www.kanzaki.com/docs/htminfo.html

質問の仕方)
http://www.linux.or.jp/beginners/question.html

4   名前: Newのり太 : 2006/07/02(日) 12:18
> 全体でカーソルをかえるにはどうしたらいいのでしょうか?

ページ上のどこでも同じカーソルにしたいということでしたら、
全称セレクタを使うなどすればよいと思います。
*{cursor : crosshair;}

ただ、多くの人は、だいたいブラウザ既定のカーソルに慣れているので
リンクでもないのに手の形になったり、処理中でもないのに砂時計になったりすると
びっくりしたり、戸惑ったりするかもしれません。
使いどころには気をつけましょう。


> cursor: url(画像URL)
> これだと、cur かani形式の画像ではないとできないんですよね?

そう書いてありますね。
http://www.tagindex.com/stylesheet/page/cursor.html

> ソフトがないと、curかani形式にできないのでしょうか?

自分でつくるのが嫌だということでしたら、素材配布サイトなどで
気に入ったものを探すという手もあります。

5   名前: Pid : 2006/07/02(日) 12:18
>>3
> これだと、cur かani形式の画像ではないとできないんですよね?

CSS 2.0 の仕様に制限は記載されていません。WinIE だけの制限でしょう(Firefox 1.5 では ICO,PNG,JPEG,GIF 等も使えます)。

それから,

p { cursor: url("paragraph.cur"), text; }

のように,末尾に必ず一つだけキーワードを指定して下さい(これは文法的に必須です)。そうすれば,カーソル画像が表示できない場合でも,カーソルの意味を伝えることができます。

※ただし,http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/ui.html を参照。

6   名前: Newのり太 : 2006/07/02(日) 12:18
>>5
Pidさん、こんばんは。

> CSS 2.0 の仕様に制限は記載されていません。WinIE だけの制限でしょう(Firefox 1.5 では ICO,PNG,JPEG,GIF 等も使えます)。

あ、そうでしたか、知りませんでした。
いつもながら勉強になります。m(__)m

確かに画像形式に関する制限は書かれていませんね。
http://hp.vector.co.jp/authors/VA022006/css/ui.html#cursor

しかしながら、当方にて検証してみたのですが、
FF1.5.0.1、NN7.1、OPERA8.53 にて、ICO,PNG,JPEG,GIF は表示されませんでした。
ページ内のstyle要素内で相対指定しました。
画像は適当に用意したものだったのですが、サイズ的な制約などがあるのでしょうか?

便乗気味で恐縮ですが、よろしければ後学のためにご教示いただければ幸いです。

なお、WinIE で、ICO は普通に(カーソルとして)表示されました。^_^;

7   名前: Pid : 2006/07/02(日) 12:18
あ,どもです (^^)。

とりあえず,当方では Win 版 Firefox 1.5.0.1 で PNG,JPEG,GIF が指定できることを確認しました(要するに,Firefox がサポートしている画像形式であれば何でも良いそうです)。ただし,アニメ GIF は動きません。

※ 1920x960 の JPEG 画像も OK でした……すさまじく重くてちらつきますが。
※なお,MacOS 版 Firefox 1.5,Opera 8.5,および Safari 2.0 では今のところ画像指定できません。

以下の点にご注意下さい。

・Firefox は厳密な文法を求めてきますので,>>5 で指摘したように,キーワードが必ず 1 つだけ無いと指定そのものが無視されます。「ツール」→「JavaScript コンソール」に CSS のエラーも表示されますので,ご確認下さい。

・もしセレクタに html,body 要素を指定しているのなら,html, body { height: 100%; } の指定をお忘れなく。

8   名前: Newのり太 : 2006/07/02(日) 12:18
>>7
> キーワードが必ず 1 つだけ無いと指定そのものが無視されます。

キーワードを指定することにより、表示を確認できました。

> もしセレクタに html,body 要素を指定しているのなら,html, body { height: 100%; } の指定をお忘れなく。

なるほど、ウィンドウ領域よりも内容が少ない場合でもウィンドウ全体に効果を反映させるというわけですね。

ただ、IEのシェアを考えると、cur 形式が無難ということになりますでしょうか。
まあ、自分はカーソルで遊んだりするつもりはないのですが。^_^;
しかしまたまた勉強になりました。ありがとうございました。m(__)m

# 脱線してしまってすいません。

9   名前: るり : 2006/07/02(日) 12:18
ありがとうございます。
いい勉強になりました^^

*{cursor : crosshair;}

などは、そのままでつかうんでしょうか?
これはスタイルシートなんですよね?

本当にすみません、また質問してしまい・・・。
あまり知らないもので(汗

10   名前: S : 2006/07/02(日) 12:18
>>*{cursor : crosshair;}
>>
>>などは、そのままでつかうんでしょうか?
>>これはスタイルシートなんですよね?
 正確にはCSSのプロパティ指定(のはず。違ってたらごめん)。

 CSSについては下記資料など参照。

http://members.jcom.home.ne.jp/pctips/www/cssintro.html
http://members.jcom.home.ne.jp/jintrick/Personal/CSS.html#reference
http://www.scollabo.com/banban/term/css.html
http://deztec.jp/lecture/css/

 なお、CSSは別ファイルにして、HTMLのほうからはlink要素で参照させる方が使いやすいと思う(複数の文書のスタイルを変えたくなったとき、CSSファイルのみ修正するだけですむから)。

http://members.jcom.home.ne.jp/pctips/www/csslink.html
http://www.scollabo.com/banban/lectur/style.html
http://deztec.jp/lecture/css/css_style.html

#もっとも、下は上の資料と同一サイト内だが。

余談)
http://members.jcom.home.ne.jp/jintrick/Personal/usrstyle.html

11   名前: 匿名希望 : 2006/07/02(日) 12:18
 インターフェースの見栄えなどを変える場合には慎重に。

http://nekoshiki.poke1.jp/guidline/window.html#scrollbar-color-clear
http://nekoshiki.poke1.jp/guidline/style.html
http://www.zspc.com/documents/wcag10/#gl-use-w3c

12   名前: みゅ : 2006/07/02(日) 12:18  ID:SRhetZEP
HPでなら画像つけるのしってますよんw

一覧へ戻る