HTML5 & CSS3 リファレンス - cursor プロパティ（マウス・カーソルの形状）

CSS3: cursor プロパティ - マウス・カーソルの形状

■ 概要

項　　目	説　　明
記述形式	セレクタ {cursor: 値 }
値の形式	［ url( 画像ファイル ) ［横オフセット縦オフセット］］［カーソルタイプ］ \| inherit
初期値	auto
対応ブラウザー	C2+ / e5.5+ / N6+ / Fx1+ / Op7+ / Ch1+ / Sa1.2+
適用可能な要素	すべての要素
継　　承	する

■ 解説

cursor プロパティ は，マウス・カーソルの形状 を指定します。

指定できる値の形式は，以下のとおりです。

値			説　　明
url( 画像ファイル )			ブラウザーが読み込んでカーソルに使用する画像ファイルを指定します。ブラウザーが最初に指定したカーソルを使用できない場合は，２番目以降のものを使用することを順に試みます。ブラウザーがユーザー指定のカーソルを表示できない場合には，値の最後に指定したキーワードのカーソルタイプを使用します。
横オフセット			カーソルに使用する画像ファイルの横方向オフセットを数値で指定します。
縦オフセット			カーソルに使用する画像ファイルの縦方向オフセットを数値で指定します。
カ｜ソルタイプ	汎用	auto	状況に応じてブラウザーが自動的にカーソル形状を決定します。
		default	OS の既定のカーソル（通常は矢印）を使用します。
		none	その要素に対してはカーソルを表示しません。
	リンクと状態	context-menu	マウス・カーソル下のオブジェクトで右ボタンによるポップアップ・メニューが利用可能であることを表します。通常，矢印と小さなメニューを表すグラフィックスが表示されます。
		help	マウス・カーソル下のオブジェクトで右ボタンによるヘルプが利用可能であることを表します。通常，疑問符（？）かバルーンが表示されます。
		pointer	リンクを表すカーソルを表示します。
		progress	処理の進行中を表すカーソルを表示します。 wait とは異なり操作は可能です。
		wait	待機状態を表すカーソルを表示します。
	選択	cell	１つ，または，複数のセルが選択可能であることを表します。通常，太い十字が表示されます。
		crosshair	普通の十字が表示されます。２次元のビットマップの選択などの折に使用されます。
		text	テキストが選択可能であることを表します。通常，縦の棒（vertical I-beam ）が表示されます。
		vertical-text	縦書きのテキストが選択可能であることを表します。通常，横の棒（horizontal I-beam ）が表示されます。
	ドラッグ＆ドロップ	alias	エイリアスやショートカットが作成可能であることを表します。通常，矢印と小さな曲がった矢印が表示されます。
		copy	コピーが可能であることを表します。通常，矢印と小さな＋印が表示されます。
		move	移動可能であることを表します。
		no-drop	現在のカーソル位置にはドロップできないことを表します。通常，手または矢印と駐禁マークが表示されます。
		not-allowed	要求した処理が実行できないことを表します。通常，駐禁マークが表示されます。
	サイズ変更スクロール	e-resize	要素の右端が変更可能ことを表します。
		n-resize	要素の上端が変更可能ことを表します。
		ne-resize	要素の右上端が変更可能ことを表します。
		nw-resize	要素の左上端が変更可能ことを表します。
		s-resize	要素の下端が変更可能ことを表します。
		se-resize	要素の右下端が変更可能ことを表します。
		sw-resize	要素の左下端が変更可能ことを表します。
		w-resize	要素の左端が変更可能ことを表します。
		ew-resize	左右方向のリサイズのカーソルを表示します。
		ns-resize	上下方向のリサイズのカーソルを表示します。
		nesw-resize	右上－左下方向のリサイズのカーソルを表示します。
		nwse-resize	左上－右下方向のリサイズのカーソルを表示します。
		col-resize	列幅の変更のカーソルを表示します。
		row-resize	行の高さの変更のカーソルを表示します。
		all-scroll	任意方向にスクロールのカーソルを表示します。
	ズーム	zoom-in	拡大（zoom-in）のカーソルを表示します。
	ズーム	zoom-out	縮小（zoom-out）のカーソルを表示します。
inherit			親要素の指定を継承します。

■ 使用例（ cursor プロパティの利用）

HTMLソース
CSS <head> ～ </head>	<style type="text/css" media="screen, handheld, print, tv" > <!-- div.sample { text-align: center margin: 10px 25%; padding: 5px; font-size: 20px; border: 2px solid black; } .cursor01 {cursor: auto; } .cursor02 {cursor: default; } .cursor03 {cursor: none; } .cursor11 {cursor: context-menu; } .cursor12 {cursor: help; } .cursor13 {cursor: pointer; } .cursor14 {cursor: progress; } .cursor15 {cursor: wait; } .cursor21 {cursor: cell; } .cursor22 {cursor: crosshair; } .cursor23 {cursor: text; } .cursor24 {cursor: vertical-text; } .cursor31 {cursor: alias; } .cursor32 {cursor: copy; } .cursor33 {cursor: move; } .cursor34 {cursor: no-drop; } .cursor35 {cursor: not-allowed; } .cursor41 {cursor: e-resize; } .cursor42 {cursor: n-resize; } .cursor43 {cursor: ne-resize; } .cursor44 {cursor: nw-resize; } .cursor45 {cursor: s-resize; } .cursor46 {cursor: se-resize; } .cursor47 {cursor: sw-resize; } .cursor48 {cursor: w-resize; } .cursor49 {cursor: ew-resize; } .cursor4A {cursor: ns-resize; } .cursor4B {cursor: nesw-resize; } .cursor4C {cursor: nwse-resize; } .cursor4D {cursor: col-resize; } .cursor4E {cursor: row-resize; } .cursor4F {cursor: all-scroll; } .cursor51 {cursor: zoom-in; } .cursor52 {cursor: zoom-out; } --> </style>
HTML <body> ～ </body>	<div style="text-align: center"> ↓ 以下の各領域上にマウスカーソルを置いてみてください！ ↓ </div> <br/> <div style="text-align: center">【汎用】</div> <div class="sample cursor01">自動設定カーソル</div> <div class="sample cursor02">標準カーソル</div> <div class="sample cursor03">カーソル表示なし</div> <br/> <div style="text-align: center">【リンクと状態】</div> <div class="sample cursor11">ポップアップ・メニューカーソル</div> <div class="sample cursor12">ヘルプカーソル</div> <div class="sample cursor13">リンクカーソル</div> <div class="sample cursor14">処理進行中カーソル</div> <div class="sample cursor15">待機状態カーソル</div> <br/> <div style="text-align: center">【選択】</div> <div class="sample cursor21">セル選択カーソル</div> <div class="sample cursor22">十字カーソル</div> <div class="sample cursor23">テキスト選択カーソル</div> <div class="sample cursor24">テキスト選択（縦書き）カーソル</div> <br/> <div style="text-align: center">【ドラッグ＆ドロップ】</div> <div class="sample cursor31">エイリアス・ショートカットカーソル</div> <div class="sample cursor32">コピーカーソル</div> <div class="sample cursor33">移動可能カーソル</div> <div class="sample cursor34">駐禁マーク（ドロップ不可）カーソル</div> <div class="sample cursor35">駐禁マーク（実行不可）カーソル</div> <br/> <div style="text-align: center">【サイズ変更・スクロール】</div> <div class="sample cursor41">右リサイズカーソル</div> <div class="sample cursor42">上リサイズカーソル</div> <div class="sample cursor43">右上リサイズカーソル</div> <div class="sample cursor44">左上リサイズカーソル</div> <div class="sample cursor45">下リサイズカーソル</div> <div class="sample cursor46">右下リサイズカーソル</div> <div class="sample cursor47">左下リサイズカーソル</div> <div class="sample cursor48">左リサイズカーソル</div> <div class="sample cursor49">左右リサイズカーソル</div> <div class="sample cursor4A">上下リサイズカーソル</div> <div class="sample cursor4B">右上－左下リサイズカーソル</div> <div class="sample cursor4C">左上－右下リサイズカーソル</div> <div class="sample cursor4D">列幅リサイズカーソル</div> <div class="sample cursor4E">行の高さリサイズカーソル</div> <div class="sample cursor4F">任意方向にスクロールカーソル</div> <br/> <div style="text-align: center">【ズーム】</div> <div class="sample cursor51">拡大（zoom-in）カーソル</div> <div class="sample cursor52">縮小（zoom-out）カーソル</div>

HTMLソース

CSS
<head> ～ </head>

<style type="text/css" media="screen, handheld, print, tv" >
<!--
     div.sample {
        text-align: center
        margin: 10px 25%;
        padding: 5px;
        font-size: 20px;
        border: 2px solid black;
     }

     .cursor01 {cursor: auto; }
     .cursor02 {cursor: default; }
     .cursor03 {cursor: none; }

     .cursor11 {cursor: context-menu; }
     .cursor12 {cursor: help; }
     .cursor13 {cursor: pointer; }
     .cursor14 {cursor: progress; }
     .cursor15 {cursor: wait; }

     .cursor21 {cursor: cell; }
     .cursor22 {cursor: crosshair; }
     .cursor23 {cursor: text; }
     .cursor24 {cursor: vertical-text; }

     .cursor31 {cursor: alias; }
     .cursor32 {cursor: copy; }
     .cursor33 {cursor: move; }
     .cursor34 {cursor: no-drop; }
     .cursor35 {cursor: not-allowed; }

     .cursor41 {cursor: e-resize; }
     .cursor42 {cursor: n-resize; }
     .cursor43 {cursor: ne-resize; }
     .cursor44 {cursor: nw-resize; }
     .cursor45 {cursor: s-resize; }
     .cursor46 {cursor: se-resize; }
     .cursor47 {cursor: sw-resize; }
     .cursor48 {cursor: w-resize; }
     .cursor49 {cursor: ew-resize; }
     .cursor4A {cursor: ns-resize; }
     .cursor4B {cursor: nesw-resize; }
     .cursor4C {cursor: nwse-resize; }
     .cursor4D {cursor: col-resize; }
     .cursor4E {cursor: row-resize; }
     .cursor4F {cursor: all-scroll; }

     .cursor51 {cursor: zoom-in; }
     .cursor52 {cursor: zoom-out; }

-->
</style>

HTML
<body> ～ </body>

<div style="text-align: center">
   ↓ 以下の各領域上にマウスカーソルを置いてみてください！ ↓
</div>
<br/>
<div style="text-align: center">【汎用】</div>
<div class="sample cursor01">自動設定カーソル</div>
<div class="sample cursor02">標準カーソル</div>
<div class="sample cursor03">カーソル表示なし</div>
<br/>
<div style="text-align: center">【リンクと状態】</div>
<div class="sample cursor11">ポップアップ・メニュー カーソル</div>
<div class="sample cursor12">ヘルプカーソル</div>
<div class="sample cursor13">リンクカーソル</div>
<div class="sample cursor14">処理進行中カーソル</div>
<div class="sample cursor15">待機状態カーソル</div>
<br/>
<div style="text-align: center">【選択】</div>
<div class="sample cursor21">セル選択カーソル</div>
<div class="sample cursor22">十字カーソル</div>
<div class="sample cursor23">テキスト選択カーソル</div>
<div class="sample cursor24">テキスト選択（縦書き）カーソル</div>
<br/>
<div style="text-align: center">【ドラッグ＆ドロップ】</div>
<div class="sample cursor31">エイリアス・ショートカット カーソル</div>
<div class="sample cursor32">コピーカーソル</div>
<div class="sample cursor33">移動可能カーソル</div>
<div class="sample cursor34">駐禁マーク （ドロップ不可）カーソル</div>
<div class="sample cursor35">駐禁マーク （実行不可）カーソル</div>
<br/>
<div style="text-align: center">【サイズ変更・スクロール】</div>
<div class="sample cursor41">右リサイズ カーソル</div>
<div class="sample cursor42">上リサイズ カーソル</div>
<div class="sample cursor43">右上リサイズ カーソル</div>
<div class="sample cursor44">左上リサイズ カーソル</div>
<div class="sample cursor45">下リサイズ カーソル</div>
<div class="sample cursor46">右下リサイズ カーソル</div>
<div class="sample cursor47">左下リサイズ カーソル</div>
<div class="sample cursor48">左リサイズ カーソル</div>
<div class="sample cursor49">左右リサイズ カーソル</div>
<div class="sample cursor4A">上下リサイズ カーソル</div>
<div class="sample cursor4B">右上－左下リサイズ カーソル</div>
<div class="sample cursor4C">左上－右下リサイズ カーソル</div>
<div class="sample cursor4D">列幅リサイズ カーソル</div>
<div class="sample cursor4E">行の高さリサイズ カーソル</div>
<div class="sample cursor4F">任意方向にスクロール カーソル</div>
<br/>
<div style="text-align: center">【ズーム】</div>
<div class="sample cursor51">拡大（zoom-in）カーソル</div>
<div class="sample cursor52">縮小（zoom-out）カーソル</div>

ブラウザー表示例
↓ 以下の各領域上にマウスカーソルを置いてみてください！ ↓ 【汎用】自動設定カーソル標準カーソルカーソル表示なし【リンクと状態】ポップアップ・メニューカーソルヘルプカーソルリンクカーソル処理進行中カーソル待機状態カーソル【選択】セル選択カーソル十字カーソルテキスト選択カーソルテキスト選択（縦書き）カーソル【ドラッグ＆ドロップ】エイリアス・ショートカットカーソルコピーカーソル移動可能カーソル駐禁マーク（ドロップ不可）カーソル駐禁マーク（実行不可）カーソル【サイズ変更・スクロール】右リサイズカーソル上リサイズカーソル右上リサイズカーソル左上リサイズカーソル下リサイズカーソル右下リサイズカーソル左下リサイズカーソル左リサイズカーソル左右リサイズカーソル上下リサイズカーソル右上－左下リサイズカーソル左上－右下リサイズカーソル列幅リサイズカーソル行の高さリサイズカーソル任意方向にスクロールカーソル【ズーム】拡大（zoom-in）カーソル縮小（zoom-out）カーソル

ブラウザー表示例

↓ 以下の各領域上にマウスカーソルを置いてみてください！ ↓

【汎用】

自動設定カーソル

標準カーソル

カーソル表示なし

【リンクと状態】

ポップアップ・メニューカーソル

ヘルプカーソル

リンクカーソル

処理進行中カーソル

待機状態カーソル

【選択】

セル選択カーソル

十字カーソル

テキスト選択カーソル

テキスト選択（縦書き）カーソル

【ドラッグ＆ドロップ】

エイリアス・ショートカットカーソル

コピーカーソル

移動可能カーソル

駐禁マーク（ドロップ不可）カーソル

駐禁マーク（実行不可）カーソル

【サイズ変更・スクロール】

右リサイズカーソル

上リサイズカーソル

右上リサイズカーソル

左上リサイズカーソル

下リサイズカーソル

右下リサイズカーソル

左下リサイズカーソル

左リサイズカーソル

左右リサイズカーソル

上下リサイズカーソル

右上－左下リサイズカーソル

左上－右下リサイズカーソル

列幅リサイズカーソル

行の高さリサイズカーソル

任意方向にスクロールカーソル

【ズーム】

拡大（zoom-in）カーソル

縮小（zoom-out）カーソル

■ 備考

【参考ページ】

「とほほの WWW 入門」の「スタイルシート入門」の「cursor プロパティ」のページ
「HTMLクイックリファレンス」の「cursor プロパティ」のページ
「ねこだまのCSSリファレンス&デモ」の「cursor プロパティ」のページ
「W3C」の「cursor プロパティ」のページ