未分類CSSでカーソルの形を矢印以外のものに変える方法ナナミ2018/5/292018/11/27こんにちは!ライターのナナミです。皆さん、カーソルといえばどんなものを思い浮かべますか?これですよね。実はこのカーソル、CSSで変更できるってご存知でしたか?今回はカーソルを変更するCSS、cursorについてまとめました!この記事は下記の流れで解説をしていきます。【発展】それぞれのカーソルの意味を考えて使うカーソルの形は、ユーザーが見やすいWEBサイト作りに一役買ってくれます。まとめcursorとは?こちら、見ての通りマウスカーソルですね。このマウスカーソルの見た目を指定することができるプロパティが、cursorです。名前そのまんまですね、覚えやすい!カーソルには色々な種類があるマウスカーソルっていろんな種類がありますよね。これらはそれぞれ、文字の上やリンクの上などで変化するようになっています。cursorはそういうルールは全部無視して、カーソルの見栄えを変えてくれます。それぞれの要素に指定できるcursorは画面全体だけでなく、それぞれの要素に指定することができます。四角い枠の中にカーソルが入ったら、形が変わりましたね。このように、要素ひとつひとつに対してカーソルを指定することが可能なのです。対応ブラウザカレントブラウザもオールドブラウザも、問題なく使用することができます。安心してつかっちゃいましょう。cursorの使い方cursorは下記のように指定します。cursor:カーソルの種類名;}カーソルの種類名の部分に、どの見た目のカーソルにするのかを指定します。pointerやmoveなど、カーソルには名前がついています。その名前をここに入れるだけです。実際に使ってみるとこんな感じです。*/}矢印カーソルが指カーソルに変わりました!cursorで指定できるカーソルcursorで指定できるカーソルは、なんと30種類以上もあります。ここで全てを紹介するとわかりづらくなってしまうので、よく使いそうな5種類に絞って紹介します。基本的な矢印のカーソルです。文字の上でも矢印のままにしておきたい...なんて時に便利ですね。リンクにマウスオーバーしている時のカーソルです。要素がリンクであることを明示的に示すことができます。動かしたりクリックしたりを禁止するマークのカーソルです。画像のダウンロードをできないように設定していたりする場合に指定するとわかりやすいですね。クリックすると拡大画像が表示されたりするときのカーソルです。jQueryなどで要素を拡大する時などに使えますね。カーソルを非表示にします。画像とかを綺麗に見せたい時などに使えますね。カーソルが見えなくなってしまうのは不便なので、ご利用は計画的に。いろんな種類が知りたい!そんな方は、下記の記事をご覧ください。全て分類別にまとめてくれています。https://ginpen.com/2012/12/08/css-cursors/カーソルの意味を考えて使おう色々なカーソルを指定できるんだから、ずっと指カーソルで表示されるサイトにしよう!と思った方、ちょっと待った!指カーソルはリンクに使われているカーソルです。カーソルを乗せた要素がリンクであれば指カーソルになる、という前提知識をみなさん持っていますよね。それなのにどこもかしこも指カーソルにしてしまうと、どれがボタンなのかがわかりづらくなってしまいます。カーソルは、ユーザーがWEBサイトをみる時に使いやすいよう、それぞれ意味を持って設定されています。あれ?ここ指のカーソルなのにクリックできない...なんてことにならないように、それぞれのカーソルの意味をきちんと考えて変更するようにしましょう。まとめいかがでしたか?jQueryなどを使って何か動きをつけている時、出番の多いプロパティです。カーソルの意味を考えて実装できれば、ユーザーも見やすいWEBサイトを作れます。困ったときはこの記事を見ながら、レッツトライ!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。フリーターを経てフロントエンジニアになる。jQueryなどのコーディングやCMS設計に従事。文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。体は日本酒でできている。