ほんっとにはじめてのHTML5とCSS3：【52】カーソルの表示をいろいろ変えられる cursorプロパティ

【52】カーソルの表示をいろいろ変えられる cursorプロパティ

最終更新日：2020年03月06日　（初回投稿日：2020年01月04日）

今回から、UI（User Interface ユーザーインターフェイス）のためのプロパティを使ってみよう。

最初はcursorプロパティ。これは、名前のまんま「カーソル」の表示を指定します。

<a>要素を使わずに JavaScriptなどでリンクを貼った時、カーソルをではなくにするなどの操作ができます。
また、自分で作った画像をカーソルとして使うこともできます。

cursorプロパティは、当然ですがPCブラウザのみで適用されます。
スマホやタブレットのブラウザには適用されません。マウスが無いから。

「カーソル」とはマウスポインターの現在位置を示すもの。
要素の種類によってカーソルの表示は変わります。

例えば、普段はデフォルトの「矢印」のカーソルが、テキストにマウスオーバーしたり、入力フォーム内では「テキスト用カーソル」に、リンク情では「指先の表示（ポインター）」になります。
ちなみに、テキスト入力時に入力位置で点滅している縦の線は「キャレット」と呼びます。

本日のINDEX

参考：
・CSS Basic User Interface Module Level 3 (CSS3 UI) | W3C Recommendation
・cursor - CSS | MDN
・cursorプロパティに URL 値を使用する | MDN

cursorプロパティの値

cursorプロパティの値は以下のものがあります。

cursorプロパティの値
キーワード	autoがデフォルト値。 default、none、context-menu、help、pointer、progress、wait、cell、crosshair、text、vertical-text、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-out、grab、grabbing
URL	url() のかたちで、画像のurlを指定。復数指定もできます。単位なしの数値で、使用する画像の x座標、y座標を指定することもできます。
グローバル値	cursor: inherit; 親の cursorの値を継承 cursor: initial; 継承した親の cursorの値を解消しデフォルト値に戻す cursor: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	する	適用できる要素	すべての要素

それぞれのキーワードは、以下のカーソルを表示します。
★「カーソル例」として表示した画像は Macのものです。Winは多少違う表示です。
★「見本」にマウスオーバーすると、カーソルを表示します。

汎用カーソル

cursor:auto: 要素にふさわしいカーソルを、ブラウザが自動で切り替えます。これがデフォルト。
cursor:default: 平常時のカーソル。たいていは矢印のカーソルです
カーソル例：
cursor:none: カーソル無し。
見本（マウスオーバーしてください）
（カーソルが無いと、めっちゃ不安になるのは私だけ？）

リンクと状態のカーソル

cursor:context-menu: コンテキストメニューが使えることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:help: ヘルプの使用ができることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:pointer: リンクに乗ったときなどの表示。たいていは指を指したようなカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:progress: プログラムがビジーの状態を表すカーソル。ユーザーが操作可能な状態です（waitじゃない）。
矢印に、回転しているボールや時計や砂時計などが付く表示。
カーソル例：
見本（マウスオーバーしてください）
cursor:wait: プログラムがビジー状態で操作不可な状態を表すカーソル。
時計や砂時計やサークルが回転している表示。
カーソル例：
見本（マウスオーバーしてください）

選択カーソル

cursor:cell: セルの選択を表すカーソル。たいていは白抜きのプラスマーク。
カーソル例：
見本（マウスオーバーしてください）
cursor:crosshair: ビットマップ上の選択を表すカーソル。たいていはプラスマーク。
カーソル例：
見本（マウスオーバーしてください）
cursor:text: テキスト選択を表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:vertical-text: 縦書きテキスト選択を表すカーソル。
カーソル例：
見本（マウスオーバーしてください）

ドラッグ & ドロップのカーソル

cursor:alias: エイリアスやショートカットが作成されることを表すカーソル。たいていは曲がった矢印。
カーソル例：
見本（マウスオーバーしてください）
cursor:copy: コピーできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:move: 移動できることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:no-drop: その位置にドロップできないことを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:not-allowed: そのアクションが実行できないことを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:grab: 掴つかむことができる（=ドラッグできる）ことを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:grabbing: 掴つかんでいる（=ドラッグしている）ことを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）

リサイズとスクロールのカーソル

cursor:e-resize: 右（east = 東）方向にリサイズできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:w-resize: 左（west = 西）方向にリサイズできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:n-resize: 上（north = 北）方向にリサイズできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:s-resize: 下（south = 南）方向にリサイズできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:ne-resize: 右上（northeast = 北東）方向にリサイズできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:nw-resize: 左上（northwest = 北西）方向にリサイズできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:se-resize: 右下（southeast = 南東）方向にリサイズできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:sw-resize: 左下（southwest = 南西）方向にリサイズできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:ew-resize: 左右（東と西）の双方向にリサイズできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:ns-resize: 上下（北と南）の双方向にリサイズできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:nesw-resize: 右上と左下（北東と南西）の双方向にリサイズできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:nwse-resize: 左上と右下（北西と南東）の双方向にリサイズできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:col-resize: 水平方向にリサイズできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:row-resize: 垂直方向にリサイズできることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:all-scroll: 任意の方向にスクロールできることを表すカーソル。
中心点から上下左右の矢印があるカーソル（対応しているのは Win だけで、Mac は「move」「grab」と同じカーソルが出る）
カーソル例：
見本（マウスオーバーしてください）

ズームカーソル

cursor:zoom-in: 拡大できることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）
cursor:zoom-out: 縮小できることを表すカーソル。
カーソル例：
見本（マウスオーバーしてください）

cursorプロパティで画像を使ってみる

cursorプロパティで、画像を使ったカーソルもできます。

構文はこのようになっています。
cursor: [ <url> [ <x> <y>]?, ]* keyword;

[ ] はひとまとまりという意味。
疑問符（?）は「0または1回出現」という意味。
アスタリスク（*）は「0回以上出現」という意味。
構文の詳細は、 CSS の値の定義構文 | MDN をご覧ください。

<url>は、url( ) のカタチで括弧の中に画像ファイルのURLを書きます。
そしてURL のあとに x・y座標の数値を書いても書かなくてもOK。
x・y座標の数値は、画像の左上端（ x='0' y='0' ）がデフォルトのホットスポット（操作点。クリックしたり、テキスト選択したりする点）です。デフォルトから何pxずらすかを正の整数で単位無しで指定します。

この「x・y座標の数値」は CSS 3 から追加されました。
今のところ Chrome, Firefox, Opera が対応しています。IEは未対応。

で、そこまでを「,（カンマ）区切り」で復数指定できます。
復数指定した場合、ブラウザは最初の画像を使用できない場合、次の画像を試す..を繰り返します。

最後に keyword を書きます。これ重要。キーワードが無いと無効です。
キーワードは前半に出てきたヤツ。（ auto とか pointer とか）
ブラウザは、画像を試して使えなかったら最後はこのキーワードのカーソルを使います。

というわけで、下記のような書き方ができます。

/*最小のカタチはこんなかんじ*/
cursor: url(image/pointer.gif), pointer;

/*URLが2つ（=ブラウザが順に試す）*/
cursor: url(image/pointer.gif), url(http://www.example.com/pointer.cur), auto;

/*x・y座標の数値も指定（このサンプルは左上端から、右に8px、下に12pxずれた点がホットスポットに）*/
cursor: url(image/pointer.gif) 8 12, auto;

画像カーソルのサンプル（画像はCUR形式がオススメ）

サンプルです。
下のエリアをマウスオーバーすると、画像カーソルが出ます。

見本（マウスオーバーしてください）

サンプルのHTMLはこちら。

<div class="mihon">見本（マウスオーバーしてください）</div>

サンプルのCSSはこちら。

.mihon {
	margin:1.5em 0 3em;
	border:solid 1px #ccc;
	padding:1.4em;
	cursor:url(image/bigCur.png), url(image/bigCur.cur), auto;
	}

url( ) は「,（カンマ）」で区切って復数指定しています。（5行目）。
PNG形式では表示できないブラウザ（IE, Edge）のために、CUR形式も用意しました。

PNGから CUR形式への変換は、こちらのサイトが便利です↓
PNG CUR 変換 — Convertio（クリックで別ウィンドウで開きます）

ホットスポットの x・y座標を設定したサンプル

ホットスポットの x・y座標を設定したサンプルです。

この「x・y座標の数値」は CSS 3 から追加されました。
今のところ Chrome, Firefox, Opera が対応しています。IEは未対応。

40×50pxの画像ですが、ホットスポット（操作点）を x=40, y=50 にしたので、右下（矢印のお尻）がホットスポットになります。

見本（マウスオーバーしてください）

サンプルのHTMLはこちら。

<div class="mihon2">見本（マウスオーバーしてください）</div>

サンプルのCSSはこちら。

.mihon2 {
	margin:1.5em 0 3em;
	border:solid 1px #ccc;
	padding:1.4em;
	cursor:url(image/bigCur.png) 40 50, url(image/bigCur.cur) 40 50, auto;
	}

次回予告

次回は、caret-colorプロパティを使ってみよう。
これはテキスト入力時に、入力箇所を示す「キャレット」の「色」を指定します。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2020-03-06（Fri）│
投稿日：2020-01-04（Sat）│
カテゴリ：はじめてのCSS

Pagetop ↑

« next ホーム prev »

コメントの投稿