概要へ移動

簡単な例。

CSS : cursor
.sample {



  cursor:           pointer;    



  border:           solid blue;   /* 境界線 */

  background-color: white;        /* 背景色 */

  margin:           5px;          /* 外側の余白 */

  padding:          3px 3px 2em;  /* 内側の余白 */

  font-size:        1.5em;        /* 文字の大きさ */

  display:          inline-block; /* 横並び */

}
HTML : 適用するHTML
<div class="sample">

    ここにカーソルを移動してください。

    カーソルの形がポインターに変わります。

</div>
実行結果
ここにカーソルを移動してください。 カーソルの形がポインターに変わります。

cursorの概要

カーソルの形を変える。設定可能な値は下表。

（表） cursorの設定値
設定値機能デフォルト
auto自動で変わる。○
none非表示。（カーソルは消える）
default 普通の形。
context-menu コンテキスト・メニューの利用可能。
help ヘルプを表示できる。
copy コピーされる。
alias エリアスやショートカットが作られる。
cell 表のセルを選択する。
crosshair 細かい選択のため、見やすくする。
pointer ポインター。ハイパーリング（<a>）やボタンに使う。
grab ドラッグできる。
grabbing ドラッグ中。
no-drop ここにはドロップできない。
not-allowed 許可されていない。
text （横書きの）文字列。
vertical-text （縦書きの）文字列。
wait 待ち状態。ユーザは何もできない。
progress （バックグラウンドの）待ち状態。ユーザは操作可能。
zoom-in ズーム・イン。
zoom-out ズーム・アウト。
col-resize 左右にサイズ変更可能。
row-resize 上下にサイズ変更可能。
all-scroll 上下左右にスクロールできる。
move 上下左右に移動できる。
ew-resize 左右のサイズ変更。
w-resize 左からのサイズ変更。
e-resize 右からのサイズ変更。
ns-resize 上下のサイズ変更。
n-resize 上からのサイズ変更。
s-resize 下からのサイズ変更。
nesw-resize 斜めのサイズ変更。
ne-resize 斜めのサイズ変更。
sw-resize 斜めのサイズ変更。
nwse-resize 斜めのサイズ変更。
nw-resize 斜めのサイズ変更。
se-resize 斜めのサイズ変更。

※ ここで表示してあるカーソルの形はGoogle Chromeブラウザのもの。

確認してみる

実行結果の青枠の中にカーソルを移動すると、カーソルの形が変わる。

CSS : cursor
.auto             { cursor:   auto            ; } 

.alias             { cursor:   alias           ; }

.all-scroll      { cursor:   all-scroll      ; }

.cell             { cursor:   cell            ; }

.col-resize      { cursor:   col-resize      ; }

.context-menu   { cursor:   context-menu    ; }

.copy             { cursor:   copy            ; }

.crosshair        { cursor:   crosshair       ; }

.default          { cursor:   default         ; }

.e-resize        { cursor:   e-resize        ; }

.ew-resize        { cursor:   ew-resize       ; }

.grab             { cursor:   grab            ; }

.grabbing        { cursor:   grabbing        ; }

.help             { cursor:   help            ; }

.move             { cursor:   move            ; }

.n-resize        { cursor:   n-resize        ; }

.ne-resize        { cursor:   ne-resize       ; }

.nesw-resize     { cursor:   nesw-resize     ; }

.no-drop          { cursor:   no-drop         ; }

.none             { cursor:   none            ; }

.not-allowed     { cursor:   not-allowed     ; }

.ns-resize        { cursor:   ns-resize       ; }

.nw-resize        { cursor:   nw-resize       ; }

.nwse-resize     { cursor:   nwse-resize     ; }

.pointer          { cursor:   pointer         ; }

.progress        { cursor:   progress        ; }

.row-resize      { cursor:   row-resize      ; }

.s-resize        { cursor:   s-resize        ; }

.se-resize        { cursor:   se-resize       ; }

.sw-resize        { cursor:   sw-resize       ; }

.text             { cursor:   text            ; }

.vertical-text   { cursor:   vertical-text   ; }

.w-resize        { cursor:   w-resize        ; }

.wait             { cursor:   wait            ; }

.zoom-in          { cursor:   zoom-in         ; }

.zoom-out        { cursor:   zoom-out        ; }





div {

  border:           solid blue;   /* 境界線 */

  background-color: white;        /* 背景色 */

  margin:           5px;          /* 外側の余白 */

  padding:          3px 3px 2em;  /* 内側の余白 */

  font-size:        1.5em;        /* 文字の大きさ */

  display:          inline-block; /* 横並び */

}
HTML : 適用するHTML
<div class="auto               "> auto</div>

<div class="alias             "> alias</div>

<div class="all-scroll        "> all-scroll</div>

<div class="cell               "> cell</div>

<div class="col-resize        "> col-resize</div>

<div class="context-menu     "> context-menu</div>

<div class="copy               "> copy</div>

<div class="crosshair        "> crosshair</div>

<div class="default           "> default</div>

<div class="e-resize          "> e-resize</div>

<div class="ew-resize        "> ew-resize</div>

<div class="grab               "> grab</div>

<div class="grabbing          "> grabbing</div>

<div class="help               "> help</div>

<div class="move               "> move</div>

<div class="n-resize          "> n-resize</div>

<div class="ne-resize        "> ne-resize</div>

<div class="nesw-resize      "> nesw-resize</div>

<div class="no-drop           "> no-drop</div>

<div class="none               "> none</div>

<div class="not-allowed      "> not-allowed</div>

<div class="ns-resize        "> ns-resize</div>

<div class="nw-resize        "> nw-resize</div>

<div class="nwse-resize      "> nwse-resize</div>

<div class="pointer           "> pointer</div>

<div class="progress          "> progress</div>

<div class="row-resize        "> row-resize</div>

<div class="s-resize          "> s-resize</div>

<div class="se-resize        "> se-resize</div>

<div class="sw-resize        "> sw-resize</div>

<div class="text               "> text</div>

<div class="vertical-text   "> vertical-text</div>

<div class="w-resize          "> w-resize</div>

<div class="wait               "> wait</div>

<div class="zoom-in           "> zoom-in</div>

<div class="zoom-out          "> zoom-out</div>
青枠の上にカーソルを移動すると、カーソルの形が変わる
auto
alias
all-scroll
cell
col-resize
context-menu
copy
crosshair
default
e-resize
ew-resize
grab
grabbing
help
move
n-resize
ne-resize
nesw-resize
no-drop
none
not-allowed
ns-resize
nw-resize
nwse-resize
pointer
progress
row-resize
s-resize
se-resize
sw-resize
text
vertical-text
w-resize
wait
zoom-in
zoom-out

Emmet : cur

記述Visual Studio Code
curcursor: pointer;
curtcursor: text;
curmcursor: move;
curhcursor: help;
curccursor: crosshair;