トップページ > スタイルシートリファレンス > cursor

★スタイルシートリファレンス

cursor …… カーソルの形状を指定する
Internet Explorer4Internet Explorer5Internet Explorer5-macInternet Explorer5.5Internet Explorer6Internet Explorer7Internet Explorer8Internet Explorer9 Netscape6Netscape7Netscape8 Opera7Opera8Opera9Opera10 Firefox1Firefox2Firefox3Firefox4 Google Chrome1Google Chrome2Google Chrome3Google Chrome4Google Chrome5Google Chrome6
広告

cursorプロパティは、マウスカーソルの形状を指定する際に使用します。 下の使用例にある値の中には、ブラウザにより対応していないものもあるので注意してください。

尚、オリジナルカーソルに使用できるファイル形式には、.CUR(カーソルファイル)と.ANI(アニメーションカーソルファイル)があります。

■使用例

HTMLソース

<ul>
<li style="cursor: auto">auto ブラウザが自動的に選択したカーソル</li>
<li style="cursor: default">default 矢印型など利用環境の標準カーソル</li>
<li style="cursor: pointer">pointer リンクカーソル</li>
<li style="cursor: crosshair">crosshair 十字カーソル</li>
<li style="cursor: move">move 移動カーソル</li>
<li style="cursor: text">text テキスト編集カーソル</li>
<li style="cursor: wait">wait 待機・処理中カーソル</li>
<li style="cursor: help">help ヘルプカーソル</li>
<li style="cursor: n-resize">n-resize 北方向のリサイズカーソル</li>
<li style="cursor: s-resize">s-resize 南方向のリサイズカーソル</li>
<li style="cursor: w-resize">w-resize 西方向のリサイズカーソル</li>
<li style="cursor: e-resize">e-resize 東方向のリサイズカーソル</li>
<li style="cursor: ne-resize;">ne-resize 北東方向のリサイズカーソル</li>
<li style="cursor: nw-resize;">nw-resize 北西方向のリサイズカーソル</li>
<li style="cursor: se-resize">se-resize 南東方向のリサイズカーソル</li>
<li style="cursor: sw-resize;">sw-resize 南西方向のリサイズカーソル</li>
<li style="cursor: progress">progress 進行中カーソル(CSS 2.1より仕様に追加)</li>
<li style="cursor: url('../images/htmq.cur')">url('ファイルのパス') オリジナルのカーソル</li>
<li style="cursor: hand">hand 指型カーソル(IE4以上の独自拡張)</li>
<li style="cursor: no-drop">no-drop ドロップ禁止カーソル(IE6以上の独自拡張)</li>
<li style="cursor: all-scroll">all-scroll 全スクロールカーソル(IE6以上の独自拡張)</li>
<li style="cursor: col-resize">col-resize 横方向のリサイズカーソル(IE6以上の独自拡張)</li>
<li style="cursor: row-resize">row-resize 縦方向のリサイズカーソル(IE6以上の独自拡張)</li>
<li style="cursor: not-allowed">not-allowed 禁止カーソル(IE6以上の独自拡張)</li>
<li style="cursor: vertical-text">vertical-text 縦書きカーソル(IE6以上の独自拡張)</li>
</ul>
↓↓↓

ブラウザ上の表示

  • auto ブラウザが自動的に選択したカーソル
  • default 矢印型など利用環境の標準カーソル
  • pointer リンクカーソル
  • crosshair 十字カーソル
  • move 移動カーソル
  • text テキスト編集カーソル
  • wait 待機・処理中カーソル
  • help ヘルプカーソル
  • n-resize 北方向のリサイズカーソル
  • s-resize 南方向のリサイズカーソル
  • w-resize 西方向のリサイズカーソル
  • e-resize 東方向のリサイズカーソル
  • ne-resize 北東方向のリサイズカーソル
  • nw-resize 北西方向のリサイズカーソル
  • se-resize 南東方向のリサイズカーソル
  • sw-resize 南西方向のリサイズカーソル
  • progress 進行中カーソル(CSS 2.1より仕様に追加)
  • url('ファイルのパス') オリジナルのカーソル
  • hand 指型カーソル(IE4以上の独自拡張)
  • no-drop ドロップ禁止カーソル(IE6以上の独自拡張)
  • all-scroll 全スクロールカーソル(IE6以上の独自拡張)
  • col-resize 横方向のリサイズカーソル(IE6以上の独自拡張)
  • row-resize 縦方向のリサイズカーソル(IE6以上の独自拡張)
  • not-allowed 禁止カーソル(IE6以上の独自拡張)
  • vertical-text 縦書きカーソル(IE6以上の独自拡張)
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ