CSSでカーソルの形状を指定する方法

マウスカーソルの形状を変更することでユーザーにとっても動作がわかりやすくなる場合があります。今回はCSSにおける「cursor」プロパティの使い方をご紹介します。

cursorプロパティとは

通常のカーソルは矢印で表示され、リンクや文章のところにマウスオーバーすると自動的に切り替わるようになっています。「cursor」プロパティを使うとページ上で表示されるカーソルの種類を任意で変えることができます。

記述形式は下記のようになります。

よく使われるカーソル形状の一覧

auto…指定しなかったとき同様、自動で切り替わる。

default…デフォルトの矢印。

none…カーソルなし。

pointer…リンクカーソル

crosshair…十字カーソル

move…移動カーソル

text…テキスト編集カーソル

wait…待機中カーソル（砂時計）

help…ヘルプカーソル（矢印の横にはてなマーク）

progress…進行中カーソル（矢印の横に砂時計）

no-drop…ドロップ禁止カーソル（独自拡張のため、古いブラウザでは対応していない場合があります）

url(example.cur),値…url()内の画像ファイルを指定することができる。オリジナルカーソルが表示されない場合もあるため、カンマ（,）で区切って任意のカーソル形状の値も一緒に指定しておきましょう。

カーソルに使用できるファイル形式は、IEでは「.cur」と「.ani」のみです。このファイル形式で画像を作成するためには、アイコン作成ソフトが必要になります。Firefoxなどの場合は「.gif」や「.jpeg」、「.png」にも対応しています。