[CSS]マウスカーソルをスタイリングするcursorプロパティ

色んなWEBサイトを見ていると、マウスカーソルをリンクや画像等の上に合わせた時に、マウスカーソルの形が変形することがありますね。

切り替わるマウスカーソルの形は、環境によって決められますが、これをCSSでしっかり指定しておくことでよりユーザビリティを向上させることができます。

マウスカーソルのスタイルを変更するプロパティ

マウスカーソルの形を変えるためには、cursorプロパティを使います。例えば、mouse_pointというIDをつけた要素の上に、マウスカーソルを合わせた際にクリックできることを示す指の形したい時は、以下のように記述します。

#mouse_point{
cursor:pointer;
}

マウスカーソルが変化した方がわかりやすい場面で、適切なcursorを指定してあげることで、ユーザビリティの向上に繋がります。

cursorプロパティに使える値

cursorプロパティに指定できる値は、他にもたくさんあります。シーンに合わせて指定しましょう。

auto：ブラウザが自動的に選択したカーソル
default：矢印型など利用環境の標準カーソル
pointer：リンクカーソル
crosshair：十字カーソル
move：移動カーソル
text：テキスト編集カーソル
wait：待機・処理中カーソル
help：ヘルプカーソル
n-resize：北方向のリサイズカーソル
s-resize：南方向のリサイズカーソル
w-resize：西方向のリサイズカーソル
e-resize：東方向のリサイズカーソル
ne-resize：北東方向のリサイズカーソル
nw-resize：北西方向のリサイズカーソル
se-resize：南東方向のリサイズカーソル
sw-resize：南西方向のリサイズカーソル
progress：進行中カーソル
url(‘ファイルのパス’)：オリジナルのカーソル
※オリジナルカーソルを使用する場合、.cur（カーソルファイル）か.ani（アニメーションカーソルファイル）を指定してください。
hand：指型カーソル
no-drop：ドロップ禁止カーソル
all-scroll：全スクロールカーソル
col-resize：横方向のリサイズカーソル
row-resize：縦方向のリサイズカーソル
not-allowed：禁止カーソル
vertical-text：縦書きカーソル