WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > cursor
cursor  カーソル 

マウスカーソルの形状を設定する。

このエントリーをはてなブックマークに追加

パラメーター

auto …自動
default …矢印型など
wait …待機・処理中カーソル
*他多数ありますのでサンプルコードを参考にしてください。

オリジナルカーソル

書式例 : cursor: url(example.cur), wait;

url( ) に、カーソルファイルを指定しオリジナルのカーソルを表示できます。
カーソルは .CUR(カーソルファイル)と.ANI(アニメーションカーソルファイル)が利用できます。
*カンマ( , )に続けて default や wait等 を指定しておけば、オリジナルカーソルが表示できない場合にも代替のカーソルが表示されます。

サンプルコード

<p style="cursor:auto;">auto</p>
<p style="cursor:move;">move</p>

auto

move


<a href="/" target="_blank">通常のリンク時のカーソル</a>
<a href="/" target="_blank" style="cursor:s-resize;">s-resize指定時のリンク時のカーソル</a>

*ブラウザや環境により対応していないカーソルもあります。
  • 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以上の独自拡張)