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>
通常のリンク時のカーソル s-resize指定時のリンク時のカーソル

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