CSS辞典 cursorプロパティ解説
マウスポインターの表示方法を指定する「cursorプロパティ」の使用方法を記載
CSS3／2.1
対応ブラウザ
| 初期値 | auto |
| 適用される要素 | すべての要素 |
| モジュール | CSS Basic User Interface Module Level 3 |
| 継承 | あり |
概要・使用方法
{ cursor: 画像 ポインターの位置, 代用の種類;}
{ cursor: 種類;}「cursorプロパティ」は、対象となる要素内にポインター（カーソル）があるときの表示方法を指定します。種類を指定する場合は、cursorプロパティに対応する種類のキーワードを指定します。cursorプロパティに画像を指定するは、url()関数に画像のパスを指定し、半角スペースで区切ってマウスポインターの位置をピクセル単位で指定します。
x座標とy座標が同一であれば１つのみ、異なる場合は半角スペースで区切りで指定します。その後、カンマ(,)で区切り、画像が読み込みができなかった場合のカーソルのキーワードを指定します。
指定できる値
画像
| url() | 関数型の値です。マウスポインターとして使用したい画像ファイルのURLを指定します。 1つ目の画像を表示できなかったときの候補として、カンマ(,)で区切って複数指定できます。 |
ポインターの位置
画像を指定した場合、マウスのクリックに反応する画像上の位置を、半角スペースで区切って２つの値で指定します。１つ目は水平方向、２つ目は垂直方向の位置を指定します。１つだけ指定した場合は、水平・垂直方向に同じ値が適用されます。
| 数値 | ピクセル単位の数値を単位を付けずに指定 |
種類及び代用の種類
| キーワード | 説明 | 表示例 |
|---|---|---|
| auto | ブラウザーが自動的に適切なポインターを選択して 表示されます。 | |
| none | ポインターを表示しません。 | |
| help | クエスチョンマークの付いたポインターが 表示されます。 |  |
| progress | データ処理の進行中、閲覧者は操作を続行できることを表す ポインターが表示されます。 |  |
| cell | セルまたはセルグループを選択できることを表す ポインターが表示されます。 |  |
| text | テキスト選択・入力できることを表す縦バーの ポインターが表示されます。 |  |
| ailas | ショートカットやエイリアスを作成できることを表す、 小さな矢印が付いたポインターが表示されます。 |  |
| move | 移動できることを表す矢印十字のポインターが 表示されます。 |  |
| no-drop | ドラッグ＆ドロップの禁止を表すポインターが 表示されます。 |  |
| e-resize | 右方向にサイズ変更できることを表すポインターが 表示されます。 |  |
| n-resize | 上方向にサイズ変更できることを表す ポインターが表示されます。 |  |
| w-resize | 左方向にサイズ変更できることを表すポインターが 表示されます。 | |
| s-resize | 下方向にサイズ変更できることを表すポインターが 表示されます。 | |
| ew-resize | 左右方向にサイズ変更できることを表すポインターが 表示されます。 | |
| nesw-resize | 右上左下方向にサイズ変更できることを表すポインターが 表示されます。 |  |
| col-resize | 列の幅を変更できることを 表すポインターが表示されます。 |  |
| zoom-in | 拡大できることを表すポインターが表示されます。 （internetExplorerは非対応） |  |
| grab | 何かをつかむことができる（ドラッグして移動できる）ことを 表すポインターが表示されます。 |  |
| キーワード | 説明 | 表示例 |
|---|---|---|
| default | 通常の矢印型のポインターが表示されます。 | |
| context-menu | コンテキストメニューのアイコンが付いたポインターが 表示されます。 | |
| pointer | リンクを表す指差しマークのポインターが 表示されます。 |  |
| wait | データ処理の進行中、閲覧者は操作を続行できないことを 表すポインターが表示されます。 |  |
| crosshair | シンプルな十字のポインターが表示されます。 |  |
| virtical-text | 縦書きのテキストの選択・入力可能を表す横バーの ポインターが表示されます。 |  |
| copy | コピーできることを表すプラスマークがついたポインターが 表示されます。 |  |
| all-scroll | 任意の方向へスクロールできることを表すポインターが 表示されます。 | |
| not-allowed | 処理を実行できないことを 表すポインターが表示されます。 | |
| ne-resize | 右上方向にサイズ変更できることを表すポインターが 表示されます。 | |
| nw-resize | 左上方向にサイズ変更できることを表すポインターが 表示されます。 |  |
| sw-resize | 左下方向にサイズ変更できることを表すポインターが 表示されます。 | |
| se-resize | 右下方向にサイズ変更できることを表すポインターが 表示されます。 | |
| ns-resize | 上下方向にサイズ変更できることを表すポインターが 表示されます。 | |
| nwse-resize | 左上・右下方向にサイズ変更できることを表すポインターが 表示されます。 | |
| row-resize | 行の高さを変更できることを表すポインターが 表示されます。 |  |
| zoom-out | 縮小できることを表すポインターが表示されます。 （internetExplorerは非対応） |  |
| grabbing | 何かをつかんでいる（ドラッグしして移動する）ことを 表すポインターが表示されます。 |  |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<title>cursolプロパティ サンプル</title>
<meta charset="uft-8">
<style>
.cursor-custom {cursor: url('https://kcfran.com/sample/avatarIconCustomReset.png') 60 2, wait;}
.cursor-help {cursor: help;}
.cursor-progress {cursor: progress;}
.cursor-cell {cursor: cell;}
.cursor-text {cursor: text;}
.cursor-alias {cursor: alias;}
.cursor-move {cursor: move;}
.cursor-no-drop {cursor: no-drop;}
.cursor-e-resize {cursor: e-resize;}
.cursor-n-resize {cursor: n-resize;}
.cursor-w-resize {cursor: w-resize;}
.cursor-s-resize {cursor: s-resize;}
.cursor-ew-resize {cursor: ew-resize;}
.cursor-nesw-resize {cursor: nesw-resize;}
.cursor-col-resize {cursor: col-resize;}
.cursor-zoom-in {cursor: zoom-in;}
.cursor-grab {cursor: grab;}
.cursor-default {cursor: default;}
.cursor-context-menu {cursor: context-menu;}
.cursor-pointer {cursor: pointer;}
.cursor-wait {cursor: wait;}
.cursor-crosshair {cursor: crosshair;}
.cursor-verticaltext {cursor: vertical-text;}
.cursor-copy {cursor: copy;}
.cursor-all-scroll {cursor: all-scroll;}
.cursor-not-allowed {cursor: not-allowed;}
.cursor-ne-resize {cursor: ne-resize;}
.cursor-nw-resize {cursor: nw-resize;}
.cursor-sw-resize {cursor: sw-resize;}
.cursor-se-resize {cursor: se-resize;}
.cursor-ns-resize {cursor: ns-resize;}
.cursor-nwse-resize {cursor: nwse-resize;}
.cursor-row-resize {cursor: row-resize;}
.cursor-zoom-out {cursor: zoom-out;}
.cursor-grabbing {cursor: grabbing;}
</style>
</head>
<body>
<p>キーワード：<a class="cursor-custom" href="https://www.google.co.jp/">custom</a>カーソルです。</p>
<p>キーワード：<a class="cursor-help" href="https://www.google.co.jp/">help</a>カーソルです。</p>
<p>キーワード：<a class="cursor-progress" href="https://www.google.co.jp/">progress</a>カーソルです。</p>
<p>キーワード：<a class="cursor-cell" href="https://www.google.co.jp/">cell</a>カーソルです。</p>
<p>キーワード：<a class="cursor-text" href="https://www.google.co.jp/">text</a>カーソルです。</p>
<p>キーワード：<a class="cursor-alias" href="https://www.google.co.jp/">alias</a>カーソルです。</p>
<p>キーワード：<a class="cursor-move" href="https://www.google.co.jp/">move</a>カーソルです。</p>
<p>キーワード：<a class="cursor-no-drop" href="https://www.google.co.jp/">no-drop</a>カーソルです。</p>
<p>キーワード：<a class="cursor-e-resize" href="https://www.google.co.jp/">e-resize</a>カーソルです。</p>
<p>キーワード：<a class="cursor-n-resize" href="https://www.google.co.jp/">n-resize</a>カーソルです。</p>
<p>キーワード：<a class="cursor-w-resize" href="https://www.google.co.jp/">w-resize</a>カーソルです。</p>
<p>キーワード：<a class="cursor-s-resize" href="https://www.google.co.jp/">s-resize</a>カーソルです。</p>
<p>キーワード：<a class="cursor-ew-resize" href="https://www.google.co.jp/">ew-resize</a>カーソルです。</p>
<p>キーワード：<a class="cursor-nesw-resize" href="https://www.google.co.jp/">nesw-resize</a>カーソルです。</p>
<p>キーワード：<a class="cursor-col-resize" href="https://www.google.co.jp/">col-resize</a>カーソルです。</p>
<p>キーワード：<a class="cursor-zoom-in" href="https://www.google.co.jp/">zoom-in</a>カーソルです。</p>
<p>キーワード：<a class="cursor-grab" href="https://www.google.co.jp/">grab</a>カーソルです。</p>
<p>キーワード：<a class="cursor-default" href="https://www.google.co.jp/">default</a>カーソルです。</p>
<p>キーワード：<a class="cursor-context-menu" href="https://www.google.co.jp/">context-menu</a>カーソルです。</p>
<p>キーワード：<a class="cursor-pointer" href="https://www.google.co.jp/">pointer</a>カーソルです。</p>
<p>キーワード：<a class="cursor-wait" href="https://www.google.co.jp/">wait</a>カーソルです。</p>
<p>キーワード：<a class="cursor-crosshair" href="https://www.google.co.jp/">crosshair</a>カーソルです。</p>
<p>キーワード：<a class="cursor-verticaltext" href="https://www.google.co.jp/">virtical-text</a>カーソルです。</p>
<p>キーワード：<a class="cursor-copy" href="https://www.google.co.jp/">copy</a>カーソルです。</p>
<p>キーワード：<a class="cursor-all-scroll" href="https://www.google.co.jp/">all-scroll</a>カーソルです。</p>
<p>キーワード：<a class="cursor-not-allowed" href="https://www.google.co.jp/">not-allowed</a>カーソルです。</p>
<p>キーワード：<a class="cursor-ne-resize" href="https://www.google.co.jp/">ne-resize</a>カーソルです。</p>
<p>キーワード：<a class="cursor-nw-resize" href="https://www.google.co.jp/">nw-resize</a>カーソルです。</p>
<p>キーワード：<a class="cursor-sw-resize" href="https://www.google.co.jp/">sw-resize</a>カーソルです。</p>
<p>キーワード：<a class="cursor-se-resize" href="https://www.google.co.jp/">se-resize</a>カーソルです。</p>
<p>キーワード：<a class="cursor-ns-resize" href="https://www.google.co.jp/">ns-resize</a>カーソルです。</p>
<p>キーワード：<a class="cursor-nwse-resize" href="https://www.google.co.jp/">nwse-resize</a>カーソルです。</p>
<p>キーワード：<a class="cursor-row-resize" href="https://www.google.co.jp/">row-resize</a>カーソルです。</p>
<p>キーワード：<a class="cursor-zoom-out" href="https://www.google.co.jp/">zoom-out</a>カーソルです。</p>
<p>キーワード：<a class="cursor-grabbing" href="https://www.google.co.jp/">grabbing</a>カーソルです。</p>
</body>
</html>実行結果
キーワード：customカーソルです。
キーワード：helpカーソルです。
キーワード：progressカーソルです。
キーワード：cellカーソルです。
キーワード：textカーソルです。
キーワード：aliasカーソルです。
キーワード：moveカーソルです。
キーワード：no-dropカーソルです。
キーワード：e-resizeカーソルです。
キーワード：n-resizeカーソルです。
キーワード：w-resizeカーソルです。
キーワード：s-resizeカーソルです。
キーワード：ew-resizeカーソルです。
キーワード：nesw-resizeカーソルです。
キーワード：col-resizeカーソルです。
キーワード：zoom-inカーソルです。
キーワード：grabカーソルです。
キーワード：defaultカーソルです。
キーワード：context-menuカーソルです。
キーワード：pointerカーソルです。
キーワード：waitカーソルです。
キーワード：crosshairカーソルです。
キーワード：virtical-textカーソルです。
キーワード：copyカーソルです。
キーワード：all-scrollカーソルです。
キーワード：not-allowedカーソルです。
キーワード：ne-resizeカーソルです。
キーワード：nw-resizeカーソルです。
キーワード：sw-resizeカーソルです。
キーワード：se-resizeカーソルです。
キーワード：ns-resizeカーソルです。
キーワード：nwse-resizeカーソルです。
キーワード：row-resizeカーソルです。
キーワード：zoom-outカーソルです。
キーワード：grabbingカーソルです。