Home

cursor | カーソル

cursorはマウスのカーソルを指定するためのCSSプロパティです。

以下のボックス(青い枠)の中にマウスのカーソルを移動してみてください。カーソルの形が変わります。

HTML 
<div class="c-alias"         title="alias"          >alias <img         src="/images/cursor/alias.png"></div>

<div class="c-all-scroll"    title="all-scroll"     >all-scroll <img    src="/images/cursor/all-scroll.png"></div>

<div class="c-auto"          title="auto"           >auto<br>デフォルト値</div>

<div class="c-cell"          title="cell"           >cell <img          src="/images/cursor/cell.png"></div>

<div class="c-col-resize"    title="col-resize"     >col-resize <img    src="/images/cursor/col-resize.png"></div>

<div class="c-context-menu"  title="context-menu"   >context-menu <img  src="/images/cursor/context-menu.png"></div>

<div class="c-copy"          title="copy"           >copy <img          src="/images/cursor/copy.png"></div>

<div class="c-crosshair"     title="crosshair"      >crosshair <img     src="/images/cursor/crosshair.png"></div>

<div class="c-default"       title="default"        >default <img       src="/images/cursor/default.png"></div>

<div class="c-e-resize"      title="e-resize"       >e-resize <img      src="/images/cursor/e-resize.png"></div>

<div class="c-ew-resize"     title="ew-resize"      >ew-resize <img     src="/images/cursor/ew-resize.png"></div>

<div class="c-grab"          title="grab"           >grab <img          src="/images/cursor/grab.png"></div>

<div class="c-grabbing"      title="grabbing"       >grabbing <img      src="/images/cursor/grabbing.png"></div>

<div class="c-help"          title="help"           >help <img          src="/images/cursor/help.png"></div>

<div class="c-move"          title="move"           >move <img          src="/images/cursor/move.png"></div>

<div class="c-ne-resize"     title="ne-resize"      >ne-resize <img     src="/images/cursor/ne-resize.png"></div>

<div class="c-nesw-resize"   title="nesw-resize"    >nesw-resize <img   src="/images/cursor/nesw-resize.png"></div>

<div class="c-no-drop"       title="no-drop"        >no-drop <img       src="/images/cursor/no-drop.png"></div>

<div class="c-none"          title="none"           >none<br>非表示</div>

<div class="c-not-allowed"   title="not-allowed"    >not-allowed <img   src="/images/cursor/not-allowed.png"></div>

<div class="c-n-resize"      title="n-resize"       >n-resize <img      src="/images/cursor/n-resize.png"></div>

<div class="c-ns-resize"     title="ns-resize"      >ns-resize <img     src="/images/cursor/ns-resize.png"></div>

<div class="c-nwse-resize"   title="nwse-resize"    >nwse-resize <img   src="/images/cursor/nwse-resize.png"></div>

<div class="c-pointer"       title="pointer"        >pointer <img       src="/images/cursor/pointer.png"></div>

<div class="c-progress"      title="progress"       >progress <img      src="/images/cursor/progress.png"></div>

<div class="c-row-resize"    title="row-resize"     >row-resize <img    src="/images/cursor/row-resize.png"></div>

<div class="c-s-resize"      title="s-resize"       >s-resize <img      src="/images/cursor/s-resize.png"></div>

<div class="c-sw-resize"     title="sw-resize"      >sw-resize <img     src="/images/cursor/sw-resize.png"></div>

<div class="c-text"          title="text"           >text <img          src="/images/cursor/text.png"></div>

<div class="c-vertical-text" title="vertical-text"  >vertical-text <img src="/images/cursor/vertical-text.png"></div>

<div class="c-wait"          title="wait"           >wait <img          src="/images/cursor/wait.png"></div>

<div class="c-w-resize"      title="w-resize"       >w-resize <img      src="/images/cursor/w-resize.png"></div>

<div class="c-zoom-in"       title="zoom-in"        >zoom-in <img       src="/images/cursor/zoom-in.png"></div>

<div class="c-zoom-out"      title="zoom-out"       >zoom-out <img      src="/images/cursor/zoom-out.png"></div>
CSS 
.c-alias         { cursor: alias; }

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

.c-auto          { cursor: auto; }

.c-cell          { cursor: cell; }

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

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

.c-copy          { cursor: copy; }

.c-crosshair     { cursor: crosshair; }

.c-default       { cursor: default; }

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

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

.c-grab          { cursor: grab; }

.c-grabbing      { cursor: grabbing; }

.c-help          { cursor: help; }

.c-move          { cursor: move; }

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

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

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

.c-none          { cursor: none; }

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

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

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

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

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

.c-pointer       { cursor: pointer; }

.c-progress      { cursor: progress; }

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

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

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

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

.c-text          { cursor: text; }

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

.c-wait          { cursor: wait; }

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

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

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



div {

  background-color: #ddf;           /* 背景 */

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

  display:          inline-block;   /* インライン・ブロック要素 */

  height:           6rem;           /* 高さ */

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

  overflow:         hidden;         /* xxxxxxxxxxx */

  padding:          5px;            /* 内側の余白 */

  width:            6rem;           /* 幅 */

}
実行結果
alias
all-scroll
auto
デフォルト値
cell
col-resize
context-menu
copy
crosshair
default
e-resize
ew-resize
grab
grabbing
help
move
ne-resize
nesw-resize
no-drop
none
非表示
not-allowed
n-resize
ns-resize
nwse-resize
pointer
progress
row-resize
s-resize
sw-resize
text
vertical-text
wait
w-resize
zoom-in
zoom-out

.sampleクラスを持つ<div>要素を作ります。※ まだカーソルは変わりません。

HTML
<div class="sample">

    マウスのカーソルを「ここに移動」してください。

    カーソルの形が変わります。

</div>
CSS 
.sample {

    background-color: #ddf;           /* 背景 */

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

    height:           13rem;          /* 高さ */

    width:            21rem;          /* 幅 */

}
実行結果初期状態
マウスのカーソルを「ここに移動」してください。 カーソルの形が変わります。

.sampleクラスにcursorプロパティをpointerに設定します。マウスのカーソルを下の青いボックス内に移動するとポインターになります。

HTML 
<div class="sample">

    マウスのカーソルを「ここに移動」してください。

    カーソルの形が変わります。

</div>
CSS 
.sample {

    background-color: #ddf;           /* 背景 */

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

    height:           13rem;          /* 高さ */

    width:            21rem;          /* 幅 */

}
CSS
.sample {

    cursor: pointer;

}
実行結果pointer
マウスのカーソルを「ここに移動」してください。 カーソルの形が変わります。

cursorをmoveに変更すると「砂時計」の形に変わります。

HTML 
<div class="sample">

    マウスのカーソルを「ここに移動」してください。

    カーソルの形が変わります。

</div>
CSS 
.sample {

    background-color: #ddf;           /* 背景 */

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

    height:           13rem;          /* 高さ */

    width:            21rem;          /* 幅 */

}
CSS
.sample {

    cursor: move;

}
実行結果move
マウスのカーソルを「ここに移動」してください。 カーソルの形が変わります。

cursorに設定可能な値は以下です。

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

以下で実行結果を確認することができます。 以下のボックスの中にマウスのカーソルを移動してみてください。

HTML 
<div class="c-alias"         title="alias"          >alias <img         src="/images/cursor/alias.png"></div>

<div class="c-all-scroll"    title="all-scroll"     >all-scroll <img    src="/images/cursor/all-scroll.png"></div>

<div class="c-auto"          title="auto"           >auto<br>デフォルト値</div>

<div class="c-cell"          title="cell"           >cell <img          src="/images/cursor/cell.png"></div>

<div class="c-col-resize"    title="col-resize"     >col-resize <img    src="/images/cursor/col-resize.png"></div>

<div class="c-context-menu"  title="context-menu"   >context-menu <img  src="/images/cursor/context-menu.png"></div>

<div class="c-copy"          title="copy"           >copy <img          src="/images/cursor/copy.png"></div>

<div class="c-crosshair"     title="crosshair"      >crosshair <img     src="/images/cursor/crosshair.png"></div>

<div class="c-default"       title="default"        >default <img       src="/images/cursor/default.png"></div>

<div class="c-e-resize"      title="e-resize"       >e-resize <img      src="/images/cursor/e-resize.png"></div>

<div class="c-ew-resize"     title="ew-resize"      >ew-resize <img     src="/images/cursor/ew-resize.png"></div>

<div class="c-grab"          title="grab"           >grab <img          src="/images/cursor/grab.png"></div>

<div class="c-grabbing"      title="grabbing"       >grabbing <img      src="/images/cursor/grabbing.png"></div>

<div class="c-help"          title="help"           >help <img          src="/images/cursor/help.png"></div>

<div class="c-move"          title="move"           >move <img          src="/images/cursor/move.png"></div>

<div class="c-ne-resize"     title="ne-resize"      >ne-resize <img     src="/images/cursor/ne-resize.png"></div>

<div class="c-nesw-resize"   title="nesw-resize"    >nesw-resize <img   src="/images/cursor/nesw-resize.png"></div>

<div class="c-no-drop"       title="no-drop"        >no-drop <img       src="/images/cursor/no-drop.png"></div>

<div class="c-none"          title="none"           >none<br>非表示</div>

<div class="c-not-allowed"   title="not-allowed"    >not-allowed <img   src="/images/cursor/not-allowed.png"></div>

<div class="c-n-resize"      title="n-resize"       >n-resize <img      src="/images/cursor/n-resize.png"></div>

<div class="c-ns-resize"     title="ns-resize"      >ns-resize <img     src="/images/cursor/ns-resize.png"></div>

<div class="c-nwse-resize"   title="nwse-resize"    >nwse-resize <img   src="/images/cursor/nwse-resize.png"></div>

<div class="c-pointer"       title="pointer"        >pointer <img       src="/images/cursor/pointer.png"></div>

<div class="c-progress"      title="progress"       >progress <img      src="/images/cursor/progress.png"></div>

<div class="c-row-resize"    title="row-resize"     >row-resize <img    src="/images/cursor/row-resize.png"></div>

<div class="c-s-resize"      title="s-resize"       >s-resize <img      src="/images/cursor/s-resize.png"></div>

<div class="c-sw-resize"     title="sw-resize"      >sw-resize <img     src="/images/cursor/sw-resize.png"></div>

<div class="c-text"          title="text"           >text <img          src="/images/cursor/text.png"></div>

<div class="c-vertical-text" title="vertical-text"  >vertical-text <img src="/images/cursor/vertical-text.png"></div>

<div class="c-wait"          title="wait"           >wait <img          src="/images/cursor/wait.png"></div>

<div class="c-w-resize"      title="w-resize"       >w-resize <img      src="/images/cursor/w-resize.png"></div>

<div class="c-zoom-in"       title="zoom-in"        >zoom-in <img       src="/images/cursor/zoom-in.png"></div>

<div class="c-zoom-out"      title="zoom-out"       >zoom-out <img      src="/images/cursor/zoom-out.png"></div>
CSS 
.c-alias         { cursor: alias; }

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

.c-auto          { cursor: auto; }

.c-cell          { cursor: cell; }

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

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

.c-copy          { cursor: copy; }

.c-crosshair     { cursor: crosshair; }

.c-default       { cursor: default; }

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

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

.c-grab          { cursor: grab; }

.c-grabbing      { cursor: grabbing; }

.c-help          { cursor: help; }

.c-move          { cursor: move; }

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

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

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

.c-none          { cursor: none; }

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

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

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

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

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

.c-pointer       { cursor: pointer; }

.c-progress      { cursor: progress; }

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

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

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

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

.c-text          { cursor: text; }

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

.c-wait          { cursor: wait; }

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

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

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



div {

  background-color: #ddf;           /* 背景 */

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

  display:          inline-block;   /* インライン・ブロック要素 */

  height:           6rem;           /* 高さ */

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

  overflow:         hidden;         /* xxxxxxxxxxx */

  padding:          5px;            /* 内側の余白 */

  width:            6rem;           /* 幅 */

}
実行結果
alias
all-scroll
auto
デフォルト値
cell
col-resize
context-menu
copy
crosshair
default
e-resize
ew-resize
grab
grabbing
help
move
ne-resize
nesw-resize
no-drop
none
非表示
not-allowed
n-resize
ns-resize
nwse-resize
pointer
progress
row-resize
s-resize
sw-resize
text
vertical-text
wait
w-resize
zoom-in
zoom-out