CSS/cursor

cursorプロパティ

cursorプロパティは、ユーザーが要素の上にマウスカーソルを移動させたときに表示されるカーソルの形状を指定します。このプロパティを適切に使用することで、ユーザーにインタラクション可能な要素を明示し、操作性を向上させることができます。

基本構文

以下は、cursorプロパティの基本的な構文です。

element {
  cursor: 値;
}

値には、キーワードやカスタムカーソル（画像）を指定できます。

主なキーワード値

以下に、cursorプロパティで指定できる主なキーワード値を説明します。

default: システムの標準カーソルを表示します（通常は矢印）。
```
button {
  cursor: default;
}
```
pointer: リンクやクリック可能な要素に使用される手の形のカーソル。
```
a {
  cursor: pointer;
}
```
text: テキスト編集が可能な要素で使用されるカーソル（I字型）。
```
textarea {
  cursor: text;
}
```
move: 要素が移動可能であることを示すカーソル。
```
div.draggable {
  cursor: move;
}
```
not-allowed: 操作が禁止されていることを示すカーソル（通常は斜線付きの円）。
```
button.disabled {
  cursor: not-allowed;
}
```
wait: 処理中でユーザーが操作を待つ必要があることを示します（砂時計など）。
```
body.loading {
  cursor: wait;
}
```
その他、help, crosshair, grab など多様なキーワード値があります。

カスタムカーソル

cursorプロパティでは、カスタムカーソルを指定することもできます。カスタムカーソルには画像ファイルを指定し、必要に応じてフォールバック用のキーワード値を設定します。

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

上記の例では、custom-cursor.png がロードできない場合、フォールバックとして pointer が適用されます。

カスタムカーソルの詳細設定

カスタムカーソルでは、ホットスポット（カーソル画像のクリック位置）を指定することも可能です。ホットスポットは、画像内の座標（x, y）で定義します。

element {
  cursor: url('custom-cursor.png') 10 5, default;
}

この例では、画像内の座標 (10, 5) をホットスポットとして設定しています。

使用例

以下は、複数のcursorプロパティを使用した例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>カーソルの例</title>
  <style>
    .default {
      cursor: default;
    }
    .pointer {
      cursor: pointer;
    }
    .text {
      cursor: text;
    }
    .custom {
      cursor: url('custom-cursor.png'), move;
    }
  </style>
</head>
<body>
  <div class="default">標準カーソル</div>
  <div class="pointer">クリック可能</div>
  <div class="text">テキストカーソル</div>
  <div class="custom">カスタムカーソル</div>
</body>
</html>

このコードをブラウザで確認することで、cursorプロパティの動作を直感的に理解できます。

注意点

カスタムカーソルの画像サイズは通常、最大32x32ピクセルであることが推奨されます。それ以上のサイズでは、一部のブラウザで正常に表示されない場合があります。
カーソルの形状は、ユーザーの操作を誘導するための重要な要素です。不適切なカーソル設定は、ユーザー体験を損ねる可能性があります。
一部のカーソル値は、特定のブラウザでのみサポートされている場合があるため、必要に応じてフォールバックを設定してください。

まとめ

cursorプロパティは、ユーザーインターフェースの操作性を向上させるために非常に重要な役割を果たします。適切なカーソル設定により、ユーザーが要素の用途や操作方法を直感的に理解できるようになります。キーワード値やカスタムカーソルを活用し、わかりやすく快適なデザインを目指しましょう。