CSSでカーソルを変える
= マウスカーソルの種類とCSSの設定 =

  • ウェブページでは、マウスカーソル・マウスポインターの形状を CSS プロパティ「 cursor 」を使用して設定することができます。
  • ここでは、各形状の CSS 値と設定の仕方を見てみます。
  • プロパティなどをクリックしてコピーすることができます。このページではコピーが可能な部分に「cursor:copy」のプロパティを設置しています。
  • 各プロパティのサンプルを画像で示しました。ただし、お使いのパソコンの OS のバージョン、ブラウザなどによって形状が異なることがあります。
  • 《オンマウス》とした部分にマウスカーソルを当てると、お使いの環境でのカーソルを見ることができます。
《設定方法》
  1. ページ内に適用する箇所が複数ある場合は、<head>内や、外部 CSS ファイルに下記のように書き、適用させるのが一般的。
    「.cursorstyle」は、任意の名称で。
    <style>
    .cursorstyle {
    cursor : pointer;
    }
    </style>
     コピー 
  2. 上記で設定した CSS を適用する例。当該箇所に「 class 」で設定する。
    <span class="cursorstyle">テキスト</span>  コピー 
    <div class="cursorstyle">テキスト</div>  コピー 
    <a class="cursorstyle">テキスト</a>  コピー 
  3. 適用する部分が一箇所、もしくは少ない場合の例。
    当該箇所に「 style 」を設定し、プロパティを直接書き込む。
    <span style="cursor : pointer;">テキスト</span>  コピー 
    <div style="cursor : pointer;">テキスト</div>  コピー 
《カーソルの種類と CSS 値など》
CSS 値
[クリックコピー]
OSでのサンプル
[ブラウザによっても異なる場合がある]
オンマウス
形状確認
説明
Windows Mac
auto
cursor: auto;
《オンマウス》
ブラウザがコンテキストに基づき自動的にカーソルを決定
default
cursor: default;
《オンマウス》
通常の矢印を表示
none
cursor: none
   
《オンマウス》
カーソルを表示しない
context-menu
cursor: context-menu
《オンマウス》
コンテキストメニューの利用が可能
help
cursor: help
《オンマウス》
ヘルプ項目
pointer
cursor: pointer
《オンマウス》
リンクにマウスが乗った時など
progress
cursor: progress
《オンマウス》
タスクの処理中。ユーザーの操作は可能
wait
cursor: wait
《オンマウス》
タスクの処理中。ユーザーの操作は不可能
cell
cursor: cell
《オンマウス》
選択可能な表のセル
crosshair
cursor: crosshair
《オンマウス》
十字カーソル。多くの場合ビットマップ上の選択を示す
text
cursor: text
《オンマウス》
選択可能なテキスト
vertical-text
cursor: vertical-text
《オンマウス》
選択可能な縦書きのテキスト
alias
cursor: alias
《オンマウス》
エイリアスやショートカットを作成可能
copy
cursor: copy
《オンマウス》
コピーができる
move
cursor: move
《オンマウス》
移動ができる
no-drop
cursor: no-drop
《オンマウス》
その位置にドロップできない
not-allowed
cursor: not-allowed
《オンマウス》
要求された内容は実行できない
grab
cursor: grab
《オンマウス》
ドラッグができる。基本的にgrabbingとセットで
grabbing
cursor: grabbing
《オンマウス》
ドラッグ中。grabとセットで
all-scroll
cursor: all-scroll
《オンマウス》
任意の方向へスクロールが可能
col-resize
cursor: col-resize
《オンマウス》
可変式ボックスで辺を水平方向に移動できる
row-resize
cursor: row-resize
《オンマウス》
可変式ボックスで辺を垂直方向に移動できる
n-resize
cursor: n-resize
《オンマウス》
可変式ボックスで辺を北の方角(上)に移動できる
w-resize
cursor: w-resize
《オンマウス》
可変式ボックスで辺を西の方角(左)に移動できる
s-resize
cursor: s-resize
《オンマウス》
可変式ボックスで辺を南の方角(下)に移動できる
e-resize
cursor: e-resize
《オンマウス》
可変式ボックスで辺を東の方角(右)に移動できる
nw-resize
cursor: nw-resize
《オンマウス》
可変式ボックスで辺を北西の方角(左上)に移動できる
ne-resize
cursor: ne-resize
《オンマウス》
可変式ボックスで辺を北東の方角(右上)に移動できる
sw-resize
cursor: sw-resize
《オンマウス》
可変式ボックスで辺を南西の方角(左下)に移動できる
se-resize
cursor: se-resize
《オンマウス》
可変式ボックスで辺を南東の方角(右下)に移動できる
ew-resize
cursor: ew-resize
《オンマウス》
可変式ボックスで辺を水平の双方向に移動可能
ns-resize
cursor: ns-resize
《オンマウス》
可変式ボックスで辺を垂直の双方向に移動可能
nesw-resize
cursor: nesw-resize
《オンマウス》
可変式ボックスで辺を北東および南西の双方向(右上・左下)に移動可能
nwse-resize
cursor: nwse-resize
《オンマウス》
可変式ボックスで辺を北西および南東の双方向(左上・右下)に移動可能
zoom-in
cursor: zoom-in
《オンマウス》
拡大表示が可能
zoom-out
cursor: zoom-out
《オンマウス》
縮小表示が可能
URL
任意の画像をカーソルに設定することができる。
画像サイズは 128 × 128px までとされる。サンプルの画像サイズは 70 × 70px 。
《オンマウス》
.cursorimg {cursor: url(画像のパス),auto;}
「.cursorimg」は、任意の名称で。
<div {cursor: url(画像のパス),auto;}>テキスト</div>
《Retinaディスプレイ対応》
.cursorimg {cursor: -webkit-image-set(url(@1xの画像) 1x, url(@2xの画像) 2x),auto;}

おすすめサイト・関連サイト…

Last updated : 2024/06/29