CSSで「cursor」プロパティを使ってマウスポインターのデザイン（矢印）を変更する方法

2024.3.16｜コーディング

ホームページにおいて、ユーザーエクスペリエンスを向上させるためにさまざまな技術が利用されます。その中でも、マウスポインターのカスタマイズは、ウェブサイトやアプリケーションのデザインに個性を加える方法の1つです。

マウスポインターは、通常は矢印や手の形をしておりますが、マウスポインターの形状を変更したい場合は、CSSのみで設定することができます。
CSSで設定する場合は、「cursor」プロパティを使うことでマウスポインターの形状を他の形状に変更することができます。

今回は、CSSで「cursor」プロパティを使ってマウスポインターのデザイン（矢印）を変更する方法を解説します。

マウスポインターとは？

マウスポインターは、コンピューター画面上でマウス操作の位置を示すためのグラフィカルな表示です。通常は矢印や手の形をしており、マウスを動かすと画面上でポインターもそれに従って移動します。マウスポインターは、ユーザーがコンピューター上で作業する際に、どの位置にマウスがあるかを視覚的に示す役割を果たします。

マウスポインターは、クリックやドラッグなどのマウス操作を行う際にも重要な役割を果たします。ユーザーが特定のアイコン、ボタン、またはテキストなどのオブジェクトを選択する際に、マウスポインターを使って操作を行います。

CSSでマウスポインターのデザイン（矢印）を変更する方法

CSSでマウスポインターのデザイン（矢印）を変更する場合は、「cursor」プロパティを追記する必要があります。CSSで変更する要素に「cursor」プロパティを加え値でデザイン（矢印）を適用します。

通常は「pointer」の値が設定されており、要素に「cursor」プロパティを追記しない場合は、マウスポインターの表示は「矢印カーソル」であり、リンクのクリックが可能である要素は「手の形のカーソル」の表示となっております。

変更できる値は様々な値がありますので必要に応じて適切な値を記述することでデザイン（矢印）の変更ができます。

基本的なHTMLの記述

<div class="sample">サンプルテキスト</div>

基本的なCSSの記述

.sample {
  cursor: pointer;
}

「cursor」プロパティの値

表示名にマウスをのせると表示が確認できます。

表示	値	説明
自動	auto	ブラウザが適切なカーソルを自動的に選択します。
標準	default	標準のカーソルを表示します（通常は矢印）。
非表示	none	マウスポインターを非表示にします。
リンククリック	pointer	リンクがクリック可能であることを示す手の形のカーソル。
移動	move	移動可能なオブジェクトを示すカーソル。
テキスト入力	text	テキスト入力が可能なフィールドを示すカーソル。
十字線	crosshair	十字線を表示します。
セル	cell	表のセルを示すカーソル。
ヘルプ	help	ヘルプを求めることを示すカーソル。
掴む	grab	掴むことを示すカーソル。
掴む（掴んでいる）	grabbing	掴んでいることを示すカーソル。
拡大	zoom-in	拡大することを示すカーソル。
縮小	zoom-out	縮小することを示すカーソル。
不許可	not-allowed	操作が許可されていないことを示すカーソル。
待機	wait	処理中であることを示すカーソル。
進行中	progress	進行中であることを示すカーソル。
エイリアス	alias	別名を示すカーソル。
コンテキストメニュー	context-menu	コンテキストメニューを表示することを示すカーソル。
縦書きテキスト	vertical-text	縦書きテキストを示すカーソル。
北リサイズ	n-resize	上方向にリサイズすることを示すカーソル。
東リサイズ	e-resize	右方向にリサイズすることを示すカーソル。
南リサイズ	s-resize	下方向にリサイズすることを示すカーソル。
西リサイズ	w-resize	左方向にリサイズすることを示すカーソル。
北西リサイズ	nw-resize	左上方向にリサイズすることを示すカーソル。
北東リサイズ	ne-resize	右上方向にリサイズすることを示すカーソル。
南東リサイズ	se-resize	右下方向にリサイズすることを示すカーソル。
南西リサイズ	sw-resize	左下方向にリサイズすることを示すカーソル。
水平方向リサイズ	ew-resize	水平方向にリサイズすることを示すカーソル。
垂直方向リサイズ	ns-resize	垂直方向にリサイズすることを示すカーソル。
斜め左右リサイズ	nesw-resize	斜め左右方向にリサイズすることを示すカーソル。
斜め右左リサイズ	nwse-resize	斜め右左方向にリサイズすることを示すカーソル。
列リサイズ	col-resize	列のリサイズを示すカーソル。
行リサイズ	row-resize	行のリサイズを示すカーソル。
全方向スクロール	all-scroll	全方向にスクロール可能であることを示すカーソル。
コピー	copy	コピーすることを示すカーソル。
ドロップ不可	no-drop	要素をドロップできないことを示すカーソル。

まとめ

CSSを使ってマウスポインターのデザイン（矢印）を変更する方法をご紹介させて頂きました。
マウスポインターは、あまり変更する必要もないですが、お問い合わせフォームなどに必要項目の未入力時に送信ボタンのマウスオーバー時に「ヘルプ」や「ドロップ不可」などの表示を設定することもあります。
また、画像等をポップアップなど大きく見せる時に「拡大」「縮小」の値を設定することもあります。
これらのテクニックを活用して、少しデザイン性を持つこともひとつの技ですね。