CSSでカーソルの形を矢印以外のものに変える方法

こんにちは!ライターのナナミです。

皆さん、カーソルといえばどんなものを思い浮かべますか?

cursor1

これですよね。

実はこのカーソル、CSSで変更できるってご存知でしたか?

今回はカーソルを変更するCSS、cursorについてまとめました!

この記事は下記の流れで解説をしていきます。

【基礎】cursorとは何か
【基礎】cursorの使い方
【発展】cursorで使えるカーソルの形
【発展】それぞれのカーソルの意味を考えて使う

カーソルの形は、ユーザーが見やすいWEBサイト作りに一役買ってくれます。
ぜひ覚えて、活用しちゃってください!

cursorとは?

cursor1

こちら、見ての通りマウスカーソルですね。

このマウスカーソルの見た目を指定することができるプロパティが、cursorです。
名前そのまんまですね、覚えやすい!

カーソルには色々な種類がある

マウスカーソルっていろんな種類がありますよね。

cursor2

これらはそれぞれ、文字の上やリンクの上などで変化するようになっています。
cursorはそういうルールは全部無視して、カーソルの見栄えを変えてくれます。

それぞれの要素に指定できる

cursorは画面全体だけでなく、それぞれの要素に指定することができます。

cursor4

四角い枠の中にカーソルが入ったら、形が変わりましたね。

このように、要素ひとつひとつに対してカーソルを指定することが可能なのです。

対応ブラウザ

カレントブラウザもオールドブラウザも、問題なく使用することができます
安心してつかっちゃいましょう。

cursorの使い方

cursorは下記のように指定します。

CSS

カーソルの種類名の部分に、どの見た目のカーソルにするのかを指定します。

pointerやmoveなど、カーソルには名前がついています
その名前をここに入れるだけです。

実際に使ってみるとこんな感じです。

cursor4

HTML

CSS

矢印カーソルが指カーソルに変わりました!

cursorで指定できるカーソル

cursorで指定できるカーソルは、なんと30種類以上もあります。
ここで全てを紹介するとわかりづらくなってしまうので、よく使いそうな5種類に絞って紹介します。

見た目名前解説
cursor1default基本的な矢印のカーソルです。
文字の上でも矢印のままにしておきたい…なんて時に便利ですね。
cursor5pointerリンクにマウスオーバーしている時のカーソルです。
要素がリンクであることを明示的に示すことができます。
cursor6not-allowed動かしたりクリックしたりを禁止するマークのカーソルです。
画像のダウンロードをできないように設定していたりする場合に指定するとわかりやすいですね。
cursor7zoom-inクリックすると拡大画像が表示されたりするときのカーソルです。
jQueryなどで要素を拡大する時などに使えますね。
noneカーソルを非表示にします。
画像とかを綺麗に見せたい時などに使えますね。
ただ、カーソルが見えなくなってしまうのは不便なので、ご利用は計画的に。

もっといろんな種類が知りたい!

そんな方は、下記の記事をご覧ください。
全て分類別にまとめてくれています。
https://ginpen.com/2012/12/08/css-cursors/

カーソルの意味を考えて使おう

色々なカーソルを指定できるんだから、ずっと指カーソルで表示されるサイトにしよう!

と思った方、ちょっと待った!

指カーソルはリンクに使われているカーソルです。
カーソルを乗せた要素がリンクであれば指カーソルになる、という前提知識をみなさん持っていますよね。

それなのにどこもかしこも指カーソルにしてしまうと、どれがボタンなのかがわかりづらくなってしまいます

cursor8

カーソルは、ユーザーがWEBサイトをみる時に使いやすいよう、それぞれ意味を持って設定されています。

あれ?ここ指のカーソルなのにクリックできない…

なんてことにならないように、それぞれのカーソルの意味をきちんと考えて変更するようにしましょう。

まとめ

いかがでしたか?

jQueryなどを使って何か動きをつけている時、出番の多いプロパティです。
カーソルの意味を考えて実装できれば、ユーザーも見やすいWEBサイトを作れます。

困ったときはこの記事を見ながら、レッツトライ!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説