【CSS】マウスカーソルの形状を変える。

Ads by Google

CSS の[cursor]プロパティで、マウスカーソルの形状を変更する方法を紹介します。

通常「cursor」プロパティには以下の値を指定できます。

  • auto
  • default
  • pointer
  • crosshair
  • move
  • text
  • wait
  • help
  • n-resize
  • e-resize
  • s-resize
  • w-resize
  • ne-resize
  • se-resize
  • nw-resize
  • sw-resize
  • url

また、独自拡張となりますが以下の値を指定することもできます。
この場合、古いブラウザでは対応していないことが多いです。

  • col-resize
  • row-resize
  • all-scroll
  • not-allowed
  • no-drop
  • progress
  • vertical-text

cursor:url; を指定する場合は、任意の画像をカーソルとして使用することができます。

.sample {cursor:url(cursor.cur);}

カーソルに使用できる画像ファイルの形式は、IEの場合はカーソル(.cur)とアニメーションカーソル(.ani)のみ。Firefoxの場合はGIFやJPEG、PNGなども使用できるようです。
こちらは対応するブラウザが少ないので使用する際は注意が必要ですね。

下記ページにデモを用意したので合わせてご確認ください。

CSS[cursor]:サンプル

参考サイト

こちらは参考サイト。
その名のとおりのウェブサイト「CSS Cursor」では、各ブラウザ毎にどのように「Cursor」が適用されるのかを一目で確認できるので大変便利です。

CSS Cursor : http://css-cursor.techstream.org

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

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