言語
日本語
English

Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

CSS辞典

  1. トップページ
  2. CSS辞典
  3. cursor

cursor

対象となる要素の上にマウスカーソル(マウスポインタ)があるときのマウスカーソルのデザインを変更します。

このプロパティはOSや閲覧しているブラウザによってデザインの差が大きい場合が多々あります。尚、閲覧しているブラウザによっては実行できない値もございますのでご注意ください。

サンプルコード

style.css
/* 基本カーソル */
div.test { cursor: auto;}
div.test1 { cursor: default;}
div.test2 { cursor: help;}

/* クリック可能・操作系 */
.clickable { cursor: pointer;}
.resizable { cursor: col-resize;}
.draggable { cursor: move;}

/* テキスト・入力系 */
.text-field { cursor: text;}
.vertical-text { cursor: vertical-text;}

/* 読み込み中 */
.loading { cursor: wait;}
.loading-area { cursor: progress;}

/* 禁止・十字 */
.disabled-item { cursor: not-allowed;}
.target { cursor: crosshair;}

/* カスタム画像カーソル(フォールバックあり) */
.custom { cursor: url('/img/custom-cursor.png'), auto;}

指定可能な値一覧

概要
auto要素や内容によってカーソルデザインをブラウザが自動決定します。この『auto』が初期値です。
default規定の矢印カーソルへと変更します。
noneマウスカーソルを表示しません。
context-menuカーソル下にコンテキストメニューを表示します。
helpカーソルをはてなマークに変更します。
pointerカーソルを指さしマークに変更します。
progressプログラムがビジー状態であるかのようなカーソルに変更します。
waitプログラムがビジー状態であるかのようなカーソルに変更します。
cellエクセルのようなセルが選択可能であるかのようなカーソルへ変更します。
crosshair十字のカーソルへ変更します。
text横書きのテキストが選択可能であるかのようなカーソルへ変更します。
vertical-text縦書きのテキストが選択可能であるかのようなカーソルへ変更します。
aliasエイリアス(ショートカット)を示すようなカーソルへ変更します。
copy何らかのコピー動作が可能であるかのようなカーソルへ変更します。
move上下左右に動かせるようなカーソルへと変更します。
no-dropドロップ動作が禁止であるかのようなカーソルへ変更します。
not-allowed何らかの操作が禁止であるかのようなカーソルへ変更します。
all-scroll任意の方向にスクロールできるかのようなカーソルへと変更します。
col-resize水平方向にリサイズできるかのようなカーソルへと変更します。
row-resize垂直方向にリサイズできるかのようなカーソルへと変更します。
n-resizeカーソルを上方向の矢印へと変更します。
e-resizeカーソルを右方向の矢印へと変更します。
s-resizeカーソルを下方向の矢印へと変更します。
w-resizeカーソルを左方向の矢印へと変更します。
ne-resizeカーソルを右上方向の矢印へと変更します。
nw-resizeカーソルを左上方向の矢印へと変更します。
se-resizeカーソルを右下方向の矢印へと変更します。
sw-resizeカーソルを左下方向の矢印へと変更します。
ew-resizeカーソルを左右方向の矢印へと変更します。
ns-resizeカーソルを上下方向の矢印へと変更します。
nesw-resizeカーソルを右上、左下方向の矢印へと変更します。
nwse-resizeカーソルを左上、右下方向の矢印へと変更します。
zoom-inズームインできるかのようなカーソルへと変更します。
zoom-outズームアウトできるかのようなカーソルへと変更します。

対応ブラウザ

Chrome Chrome
1 以降
Firefox Firefox
1 以降
Safari Safari
1.2 以降
Edge Edge
12 以降
IE IE
11
10
9
8
7
6
Opera Opera
7 以降
6 以前 ×
iOS Safari iOS Safari
13.4 以降
12 以前 ×
Android Android Browser
4.4 以降
3 以前 ×
Chrome Android Chrome Android
最新版
デスクトップ版と同等の対応です
Firefox Android Firefox Android
最新版
デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。