マウスカーソルの形状を変更する

CSS - cursor

cursor の概要

マウスカーソルの見た目を変更する cursor プロパティ

CSSプロパティ｢cursor｣は、マウスカーソルの形状を変更する際に使用します。例えば｢link｣要素にカーソルを当てると、マウスの形状が｢pointer｣に変化します。これはブラウザの初期設定によるものですが、こういった挙動を変化させることができます。

<div class="target">ここの領域にカーソルを当てると、指先になります。</div>
<style>
.target {
  padding: 10px;
  height:200px;
  background-color:#fde;
  cursor: pointer;
}
</style>

cursor の取りうる値

用意されているキーワードや、オリジナルの画像を使用する場合はurlを指定します。urlの場合は、もし表示できなかった場合の為に代替表示をカンマ区切りで指定します。

{ cursor: キーワード; }
{ cursor: url(画像url, 表示されなかった場合のキーワード); }

それぞれのキーワードの説明です。実際の表示については後述の例を確認してみてください。

種類値説明
一般auto初期値です。ブラウザが自動的に選択します
default矢印の様な形状の標準的な表示
noneカーソルを表示しない。
リンク及び状態context-menuカーソル下でコンテキストメニューが使用できる表示
helpヘルプが使用できる表示
pointer指差しマークの表示
progressプログラムがビジー状態であるが、まだユーザによる操作が可能な時の表示
waitプログラムがビジー状態で、ユーザによる操作が不可能な時の表示
選択cellセルを選択できる表示
crosshair十字カーソルの表示
texテキストを選択可能である表示
vertical-text縦書きのテキストを選択可能である表示
ドラッグアンドドロップaliasエイリアスやショートカットが作成できる表示
copyコピー操作が可能である表示
moveオブジェクトが移動できる可能性がある表示
no-dropドロップが許可されていない表示
not-allowed操作を行う事が出来ない表示
リサイズ及びスクロールall-scroll任意の方向にスクロール可能な表示
col-resize水平方向にリサイズ可能である表示
row-resize垂直方向にリサイズ可能である表示
n-resize北方向の矢印表示
e-resize東方向の矢印表示
s-resize南方向の矢印表示
w-resize西方向の矢印表示
ne-resize北東方向の矢印表示
nw-resize北西方向の矢印表示
se-resize南東方向の矢印表示
sw-resize南西方向の矢印表示
ew-resize東西双方向へのサイズ変更が可能な矢印表示
ns-resize北南双方向へのサイズ変更が可能な矢印表示
nesw-resize北東、南西双方向へのサイズ変更が可能な矢印表示
nwse-resize北西、南東双方向へのサイズ変更が可能な矢印表示
ズームzoom-inズームインが可能な表示
zoom-outズームアウトが可能な表示
その他url表示させたい画像のurlを指定

各値の表示

カーソルを当てると、それぞれの表示を確認することができます。サンプルをみるとわかりますがこれらカーソルの形状は様々なシーンで使われています。ですので、開発者が意図的に操作（クリックできない所なのに、あたかもクリックできるようなカーソルに変化させるなど）することで、ユーザーを混乱させてしまう可能性があります。また、ブラウザによって対応しているキーワードが異なりますので、使用する際には十分注意しましょう。

<div class="auto">cursor: auto</div>
<div class="default">cursor: default</div>
<div class="none">cursor: none</div>
<div class="context-menu">cursor: context-menu</div>
<div class="help">cursor: help</div>
<div class="pointer">cursor: pointer</div>
<div class="progress">cursor: progress</div>
<div class="wait">cursor: wait</div>
<div class="cell">cursor: cell</div>
<div class="crosshair">cursor: crosshair</div>
<div class="text">cursor: text</div>
<div class="vertical-text">cursor: vertical-text</div>
<div class="alias">cursor: alias</div>
<div class="copy">cursor: copy</div>
<div class="move">cursor: move</div>
<div class="no-drop">cursor: no-drop</div>
<div class="not-allowed">cursor: not-allowed</div>
<div class="all-scroll">cursor: all-scroll</div>
<div class="col-resize">cursor: col-resize</div>
<div class="row-resize">cursor: row-resize</div>
<div class="n-resize">cursor: n-resize</div>
<div class="e-resize">cursor: e-resize</div>
<div class="s-resize">cursor: s-resize</div>
<div class="w-resize">cursor: w-resize</div>
<div class="ne-resize">cursor: ne-resize</div>
<div class="nw-resize">cursor: nw-resize</div>
<div class="se-resize">cursor: se-resize</div>
<div class="sw-resize">cursor: sw-resize</div>
<div class="ew-resize">cursor: ew-resize</div>
<div class="ns-resize">cursor: ns-resize</div>
<div class="nesw-resize">cursor: nesw-resize</div>
<div class="nwse-resize">cursor: nwse-resize</div>
<div class="zoom-in">cursor: zoom-in</div>
<div class="zoom-out">cursor: zoom-out</div>
<div class="url">cursor: url</div>

<style>
div {
  list-style: none;
  line-height:25px;
  margin-bottom:1px
  margin:0;
  background: #fdd;
}
div:hover {
  background: #cbb;
}
.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; }
.all-scroll { cursor: all-scroll; }
.col-resize { cursor: col-resize; }
.row-resize { cursor: row-resize; }
.n-resize { cursor: n-resize; }
.e-resize { cursor: e-resize; }
.s-resize { cursor: s-resize; }
.w-resize { cursor: w-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-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 { cursor: url(https://www-creators.com/wp-content/uploads/2017/12/css_list_icon3.png), pointer }

</style>

使用例

｢button｣要素などのユーザインターフェイスのカーソルを変更します。デフォールト状態では、button 要素はカーソルをそのまま当てても形状に変化はありませんが、ユーザーにクリックができるものと認識させるために値を指定することがあります。

<button class="pointer">OK</button>
<button class="pointer">Cancel</button>
<style>
button {
  width:150px;
  line-height:50px;
  background-color:#fce;
  text-align:center;
  cursor: pointer; 
}
</style>

仕様書

関連CSSプロパティ