CSSと画像を使用したカスタムカーソルの作成と適用

カスタムカーソルを使用すると、ブランドやクリエイティブな目標に合った視覚的な手がかりでユーザー体験をカスタマイズできます。手描きのアイコン、ゲームのようなポインター、またはデフォルトの矢印に楽しいひねりを加えるなど、CSSでカスタムカーソルを作成することは思ったより簡単です。このガイドでは、その方法をステップバイステップで説明します。

CSS cursor プロパティの基本構文

CSSには様々な組み込みカーソルタイプが用意されています。使用方法は次のとおりです：

.default {
  cursor: default;
}
.pointer {
  cursor: pointer;
}
.text {
  cursor: text;
}
.help {
  cursor: help;
}
.progress {
  cursor: progress;
}

これらの組み込みオプションは標準的なインタラクションをカバーしています。しかし、さらに進めるには、独自の画像を使用できます。

画像からカスタムカーソルを作成する

画像をカーソルとして使用するには、cursor プロパティにURLを渡します。

例：

.custom-cursor {
  cursor: url('cursor.png') 4 4, auto;
}

• url('cursor.png') はカスタム画像
• 4 4 はホットスポット（クリックが登録される場所）
• auto は画像の読み込みに失敗した場合のフォールバックカーソル

サポートされている形式

• .cur と .ico（WindowsとEdgeで最適に動作）
• .png（広くサポートされていますが、一部のブラウザではホットスポットが無視される場合があります）
• .svg（カーソルとしてのサポートは限定的）

推奨サイズ

• 一貫した動作のために32x32ピクセル以下を維持する
• 128x128より大きい画像は無視されたり、不均一に縮小されたりする可能性があります

ホバー時のみのカーソル

特定の要素にホバーした時だけカスタムカーソルを表示するには：

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

これにより、他の場所ではデフォルトカーソルを維持し、インタラクションフィードバックをカスタマイズします。

カーソルの配置と互換性のヒント

• ホットスポット値は重要です — カーソルのアクティブポイントを定義します。
• フォールバックは優雅な劣化を確保します。
• Chrome、Firefox、Safari、Edgeでのテストが不可欠です。

.cursor-test {
  cursor: url('cursor.png') 16 0, auto;
}

ブラウザの開発ツールや画像エディタなどのツールを使用して、適切なホットスポット座標を決定します。

追加のヒント：ぼやけたカーソルを避ける

一部のブラウザでは、PNGカーソルがピクセル完全でない場合にスケーリングされます。ぼやけたレンダリングを防ぐには：

• 正確な1:1解像度（例：32x32）を使用する
• カーソル画像に透明なパディングを避ける

カスタムアニメーションカーソル（オプション）

アニメーションカーソルはネイティブにはサポートされていませんが、2つの一般的な回避策があります：

1. GIFを使用する

.cursor-gif {
  cursor: url('animated-cursor.gif'), auto;
}

• 一部のブラウザで動作しますが、一貫性はありません。
• GIFがちらついたり無視されたりする場合があります。

2. JavaScriptを使用してマウスを追跡する

const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
  cursor.style.left = e.pageX + 'px';
  cursor.style.top = e.pageY + 'px';
});

そして.cursor divをスタイリングします：

.cursor {
  position: fixed;
  pointer-events: none;
  width: 32px;
  height: 32px;
  background-image: url('custom.png');
  background-size: cover;
  z-index: 9999;
}

アニメーションカーソルのユースケース

• ゲームと遊び心のあるインターフェース
• カスタムクリエイティブウェブサイトやポートフォリオ

アクセシビリティとUXの考慮事項

カスタムカーソルは使いやすさを妨げるのではなく、向上させるべきです。以下を念頭に置いてください：

• 明確さを追加する場合を除き、入力フィールドやリンク上のカーソルを置き換えることは避ける
• 視覚的なデザインが期待されるポインターの動作を妨げないようにする
• クリックのミスマッチを防ぐために明確なホットスポットを使用する

ベストプラクティス

• キーボードとスクリーンリーダーユーザーでテストする
• カーソルを視覚的に区別しやすく、軽量に保つ
• 文脈的に意味がある場合を除き、カーソルをグローバルに適用することを避ける（例：bodyに）

一般的な落とし穴とデバッグ

カーソルが表示されない？

• 画像パスが正しいことを確認する
• サポートされている形式とサイズを使用する
• フォールバックを追加する：cursor: url(...), auto;

ホットスポットが位置ずれしている？

• cursor値のXとY座標を調整する
• 画像エディタでプレビューして、正確なクリックポイントを決定する

FirefoxやSafariで動作しない？

• .pngの代わりに.curまたは.icoを使用してみる
• 重要なインタラクションにはSVGやアニメーション形式を避ける
• Safariは一部の画像カーソル形式を完全に無視します

間違った要素に適用している

カーソルが表示されない場合は、CSSが表示されインタラクティブな要素に適用されていることを確認してください。例えば：

body {
  cursor: url('cursor.png'), default;
}

結論

カスタムカーソルはUIに洗練さと遊び心を加えることができますが、ブラウザの癖があります。十分にサポートされている形式を使用し、ブラウザ間でテストし、常に使いやすさを確保するためのフォールバックを含めてください。カスタムカーソルは、明確さを向上させたりブランディングを強化したりする場所で選択的に使用し、ユーザーを混乱させる可能性がある場所での過剰使用を避けてください。

よくある質問