#ffffff #bc7c43 #beb53f #85a248 #2f6850 #4f8ea4 #89bcc5 #565669 #000000 #b22222 #daa09a

web material *Essence

  1. Home
  2. DesignTips
  3. OtherTips › cursor

Cursor

カーソルを変更する

cursorは、カーソルの形状を指定するプロパティです。
プロパティ値を変更したり、オリジナル画像を指定する事も出来るので、より楽しく見易いページを作る事ができます。

/* 使用方法 */
cursor: キーワード値;

キーワード値にマウスオーバーすると、実際の表示を確認できます。(ブラウザ等、閲覧環境により表示は異なります。)

一般

キーワード
 説明
auto
状況に応じて自動選択 (初期値)
default
デフォルト
none
カーソル無し(見えない)

リンク及び状態

キーワード
 説明
context-menu
コンテキストメニュー
help
ヘルプ
pointer
リンクにマウスが乗った時など
progress
進行中 waitと異なりプログラムがビジー状態でも操作が可能な時
wait
待機中 プログラムがビジー状態でユーザーによる操作が不能な時

選択

キーワード
 説明
cell
セル選択
crosshair
範囲選択 多くの場合ビットマップ画像選択
text
テキスト
vertical-text
縦書きテキスト

ドラッグアンドドロップ

キーワード
 説明
alias
ショートカット(エイリアス)作成
copy
複製 コピー・アンド・ペースト
move
移動 カット・アンド・ペースト
no-drop
ドロップできない領域
not-allowed
操作できない領域

リサイズ及びスクロール

キーワード
 説明
n-resize
上側へのサイズ変更 nはNorthの意味
e-resize
右側へのサイズ変更 eはEastの意味
s-resize
下側へのサイズ変更 sはSouthの意味
w-resize
左側へのサイズ変更 wはWestの意味
nw-resize
左上側へのサイズ変更
ne-resize
右上側へのサイズ変更
se-resize
右下側へのサイズ変更
sw-resize
左下側へのサイズ変更
ew-resize
左右のサイズ変更
ns-resize
上下のサイズ変更
nesw-resize
右上、左下のサイズ変更
nwse-resize
左上、右下のサイズ変更
col-resize
列のサイズ変更
row-resize
行のサイズ変更
all-scroll
上下左右スクロール

ズーム

キーワード
 説明
zoom-in
ズームイン
zoom-out
ズームアウト

独自拡張

キーワード
 説明
grab
ドラッグで掴めるもの
grabbing
ドラッグで掴んだ状態

参考:MDN web docs - css|cursor
CSS3で使える35+α種類のカーソルの一覧表 Ginpen.com

指定文字列にカーソルを付ける

例1:ここにマウスを乗せてみて下さい

<span class="sample1">ここにマウスを乗せてみて下さい</span>
.sample1 {
   cursor: wait;
}

画像のカーソルを付ける

画像をカーソルとして使用する事ができます。

/* 使用方法 */
cursor: url(画像ファイル名), 任意のキーワード;

/* 画像はカンマ(,)で区切って複数の候補を指定可。ユーザー側のブラウザで利用できる形式画像が使用されます。 */
cursor: url(画像ファイル名), url(画像ファイル名), 任意のキーワード;

/* カーソル画像が表示できない場合に備え、カンマ(,)の後にキーワード(default や pointer 等)を指定する必要があります。*/
<span class="sample2,3,4,5,6">ここにマウスを乗せてみて下さい</span>
.sample2{
  cursor: url(ribbon-p.gif), pointer;
}

.sample3{
  cursor: url(daruma-s.png), pointer;
}

.sample4{
  cursor: url(arrow.cur), pointer;
}

.sample5{
  cursor: url(drum.ani), pointer;
}

.sample6{
  cursor: url(down-b.ico), pointer;
}

例2:ここにマウスを乗せてみて下さい(.gif)

対応ブラウザでは→ を表示します。

例3:ここにマウスを乗せてみて下さい(.png)

対応ブラウザでは→ を表示します。

例4:ここにマウスを乗せてみて下さい(.cur)

対応ブラウザでは→ を表示します。

例5:ここにマウスを乗せてみて下さい(.ani)

対応ブラウザでは→を表示します。

例6:ここにマウスを乗せてみて下さい(.ico)

対応ブラウザでは→ を表示します。

対応ブラウザや利用できる画像フォーマットは下記の表を参照して下さい。
また、GoogleChrome, Firefox, Safari, InternetExplorer で(.ico)もカーソルとして表示されるようですが、カーソルのポイント位置が、IE,Edgeの場合左上表示になります。
(上記は .cur,.ani,.ico を .gif,.png画像に作成し直しています。)

各ブラウザの利用できる画像フォーマット

browser formats
Google Chrome .cur .png .gif .jpg .svg -
Firefox .cur .png .gif .jpg .svg -
Safari .cur .png .gif .jpg - -
Opera - - - - - -
Microsoft Edge .cur - - - .ani
Internet Explorer .cur - - - .ani

参考:CSSのcursorプロパティで値にURLを指定する