CSSのcursorプロパティ：カーソルの形状をカスタマイズする方法

CSSのcursorプロパティを使うと、要素にホバーした際のカーソルの形状を指定できます。
このプロパティを活用することで、ユーザーインターフェースを直感的で
使いやすくデザインすることができます。
本記事では、cursorプロパティの基本的な使い方から応用例までを詳しく解説します。

cursorプロパティとは？

cursorプロパティは、要素上にマウスカーソルが来たときに
表示されるカーソルの形状を指定するためのCSSプロパティです。
デフォルトのカーソル形状だけでなく、カスタムカーソル画像を指定することも可能です。

基本構文

selector {
  cursor: value;
}

cursorプロパティの値

cursorプロパティにはさまざまな値があります。以下は主な値の一覧です。

基本的なカーソル形状

値	説明
auto	デフォルトのカーソルを使用
default	通常の矢印カーソル
pointer	リンク用のカーソル（手の形）
text	テキスト選択用のカーソル
wait	処理中を示すカーソル（時計の形など）
help	ヘルプを示すカーソル（疑問符付きの矢印）
move	移動用のカーソル（矢印付きの十字）
not-allowed	禁止を示すカーソル（丸に斜線）

リサイズ用カーソル

値	説明
e-resize	右方向のリサイズカーソル
w-resize	左方向のリサイズカーソル
n-resize	上方向のリサイズカーソル
s-resize	下方向のリサイズカーソル
ne-resize	右上方向のリサイズカーソル
nw-resize	左上方向のリサイズカーソル
se-resize	右下方向のリサイズカーソル
sw-resize	左下方向のリサイズカーソル

カスタムカーソル

カスタム画像をカーソルとして指定することも可能です。

構文

selector {
  cursor: url('path/to/image.png'), auto;
}

ポイント

カスタムカーソルが利用できない場合のフォールバックとして、標準のカーソルを指定します（例：auto）。

基本的な使い方

リンクに適切なカーソルを適用

リンクにはpointerカーソルを使用します。

コード例

a {
  cursor: pointer;
}

テキスト入力エリアにカーソルを設定

テキスト入力エリアではtextカーソルを使用します。

コード例

input[type="text"] {
  cursor: text;
}

禁止されたエリアのカーソルを変更

特定の操作が禁止されている場合、not-allowedカーソルを適用します。

コード例

button:disabled {
  cursor: not-allowed;
}

応用的な使い方

カスタムカーソルの適用

カスタム画像を使用してカーソルを変更します。

コード例

button {
  cursor: url('custom-cursor.png'), pointer;
}

注意点

• 画像のサイズは32×32ピクセル以下にするのが一般的です。
• 画像のフォーマットはPNGまたはSVGを推奨します。

条件付きカーソルの変更

特定の状態に応じてカーソルを変更します。

コード例

div:hover {
  cursor: move;
}

レスポンシブデザインでのカーソル調整

デバイスや解像度に応じてカーソルを変更します。

コード例

@media (max-width: 600px) {
  body {
    cursor: default;
  }
}

カスタムカーソルのベストプラクティス

適切なサイズ
カーソル画像はできるだけ小さく（32×32ピクセル以下）します。

フォールバックの指定
カスタムカーソルが使用できない場合に備えて、デフォルトのカーソルを指定します。

ユーザビリティを重視
ユーザーにとって直感的なカーソル形状を選択します。

よくある質問

Q1. cursorプロパティが効かない場合の原因は？

要素が非表示またはdisabled状態になっていないか確認してください。
カスタムカーソルのパスが正しいか確認してください。

Q2. カスタムカーソル画像のホットスポットを調整できますか？

url()内でホットスポットの位置を指定できます。

例

cursor: url('custom-cursor.png') 10 10, auto;

まとめ

CSSのcursorプロパティを活用することで、ユーザーインターフェースを
直感的で使いやすくカスタマイズできます。
基本的なカーソル形状を適切に選ぶだけでなく、
必要に応じてカスタムカーソルを追加することで、ユニークなデザインを作成できます。

本記事を参考にして、ユーザー体験を向上させるデザインに挑戦してみてください！

Favorite