スキルアップを始める!

【CSS】マウスカーソルの形状を変える方法「cursor」プロパティ

CSS(シー・エス・エス)
CSS(シー・エス・エス)
この記事は約3分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

例えばdivでボタンっぽい形状を作った時にリンクが貼られていないと(例えばクリックイベントなどで)ボタンが通常の三角形のマウス形状のままになってクリックできるのだろうか?と一瞬違和感を感じてしまう可能性があります。

ボタンをクリックであれば、やはり「指アイコン」にしておいた方が直感的に分かりやすいかと思いますので、その方法です。

マウスカーソルをポインターに変えるには?

CSSでマウスカーソルの形状を変えるにはcursorプロパティを使います。

cursor - CSS: カスケーディングスタイルシート | MDN
cursor は CSS のプロパティで、マウスポインターが要素の上にいるときに表示されるマウスカーソルを設定します。

使い方は簡単で、cursor: 値;を設定するだけです。

[rml_read_more]

cursor: 値;

これで、マウスカーソルを様々な形状に変更できます。

「指のアイコン」はcursor: pointer;

一般的なクリックを促す指のアイコンは「cursor: pointer;」で表示できます。

cursor: pointer;

カーソルがポインターに変わりました!

これで話は終わりですが、ついでに他の形状も試してみます。

cursor: help;

ヘルプマークに変わります。マウスの下に「?」マークが付きます。ヘルプページなどに使えそうなカーソルです。

cursor: help;

cursor: wait;

マウスを合わせると、ポインターがグルグル回り続けます。何かを待ってもらうときなどに使えそうです。目的を持って使わないとユーザーさんがすこぶる待った結果、永遠に待ち続けてしまうことになってしまうので、使いどころには注意が必要です。

cursor: wait;

cursor: crosshair;

カーソルが十字架のアイコンになります。カーソルが範囲を選択できそうな感じになります。なにか範囲を選択できるのかな?と思われてしまうのでボタンには使わないほうがよいですね。

cursor: crosshair;

cursor: not-allowed;

許可しない(進入禁止)のアイコンになります。押せないのに押せるという不思議な状態になるので、クリックできるところには使わないほうが良さそうです。

cursor: not-allowed;

cursor: zoom-in;

「zoom-in」にすると、虫眼鏡のアイコンに変わります。拡大できそうなイメージになります。

cursor: zoom-in;

cursor: grab;

「grab」にすると、マウスカーソルがつかめる形状に変わります。ボタンがつかめそうですね。

cursor: grab;

まとめ

マウスカーソルをポインターの形状に変えたいときは「cursor: pointer;」で可能です。ほかにも様々な形状に変更することが可能です。

御参考ください😃

URLをコピーしました!