【みんなの知識ちょっと便利帳】マウスカーソルの種類・CSSでカーソルを変える

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

ウェブページでは、マウスカーソル・マウスポインターの形状を CSS プロパティ｢ cursor ｣を使用して設定することができます。
ここでは、各形状の CSS 値と設定の仕方を見てみます。
プロパティなどをクリックしてコピーすることができます。このページではコピーが可能な部分に「cursor:copy」のプロパティを設置しています。
各プロパティのサンプルを画像で示しました。ただし、お使いのパソコンの OS のバージョン、ブラウザなどによって形状が異なることがあります。
《オンマウス》とした部分にマウスカーソルを当てると、お使いの環境でのカーソルを見ることができます。

《設定方法》

ページ内に適用する箇所が複数ある場合は、<head>内や、外部 CSS ファイルに下記のように書き、適用させるのが一般的。
「.cursorstyle」は、任意の名称で。

<style>
.cursorstyle {
cursor : pointer;
}
</style> コピー
上記で設定した CSS を適用する例。当該箇所に「 class 」で設定する。
<span class="cursorstyle">テキスト</span> コピー

<div class="cursorstyle">テキスト</div> コピー

<a class="cursorstyle">テキスト</a> コピー
適用する部分が一箇所、もしくは少ない場合の例。
当該箇所に「 style 」を設定し、プロパティを直接書き込む。
<span style="cursor : pointer;">テキスト</span> コピー

<div style="cursor : pointer;">テキスト</div> コピー

《カーソルの種類と CSS 値など》

CSS 値 [クリックコピー]	OSでのサンプル [ブラウザによっても異なる場合がある]		オンマウス形状確認	説明
CSS 値 [クリックコピー]	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;} コピー

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

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

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

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

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

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