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

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

[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:縦書きカーソル

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です