カーソルの次のレベルCSSスタイリング

ウェブサイトのカーソルスタイリングは見落とされがちですが、ユーザーエクスペリエンスを向上させるための大きな可能性を提供します。ユーザーの混乱を避けるためには一貫性を維持することが重要ですが、慎重に計画すると洗練されたカーソルのカスタマイズが達成できます。カスタムカーソルはタッチインターフェイスに表示されず、リーチを制限することを忘れないでください。

Geoffの記事「ユーザーエクスペリエンスの向上（または楽しい）のためにCSSでカーソルを変更する」は、強固な基盤を提供します。この記事では、より高度な手法について説明します。

JavaScriptを搭載したカスタムカーソル

CSSだけでは、限られたカーソルスタイリングオプションがあります。 JavaScriptは、新しいレベルのカスタマイズのロックを解除します。 JavaScript制御要素をカーソルとして使用することにより、トランジション、埋め込みテキスト、複雑なアニメーション、フィルターなど、動的にスタイルできます。

最も単純なアプローチにはaが含まれます<div> <code>mousemoveイベントリスナーを使用して、マウスの位置を反映しています。 mousedownリスナーは、インタラクティブな効果を追加できます。

この基本的な例は、クリック時にスケーリングするクリック可能なカーソルを作成します。カーソルの位置は、ページに対するマウス座標によって決定されます。ただし、デフォルトのカーソルは表示されたままです。完全に交換するには、 cursor: none; CSSスタイルシート（ *に適用）に。ドキュメントの高さが完全に満たされていない場合、一部のブラウザはデフォルトのカーソルを引き続き表示する場合があることに注意してください。

カスタムカーソルが相互作用を妨げるのを防ぐために、 pointer-events: none;カーソル要素へ。クラスを追加する（例：「Pressable」）により、特定の要素に対するカスタムホバー効果が可能になります。

これにより、視覚的に魅力的な円形カーソルが作成されます。

アクセシビリティ、フォールバック、タッチスクリーン

タッチスクリーンユーザーの場合、カスタムカーソルは不要であり、無効にすることができます。同様に、 prefers-reduced-motion好みを持つユーザーは、よりシンプルなカーソルを好むかもしれません。これはJavaScriptで達成できます。

 const istouchdevice = "ontouchstart" in window || navigator.maxtouchpoints> 0;
const prestereducedMotion = window.matchmedia（ "（recreter-reducuted-motion：reduce）"）。マッチ;

if（！istouchdevice &&！prefersuedmotion && cursor）{
  //ここでカーソルの実装
}

これにより、カスタムカーソルがJavaScriptが有効になり、ユーザーがタッチスクリーン上にないか、モーションの減少を好む場合にのみ表示されます。 JavaScriptがなければ、ブラウザのデフォルトカーソルが使用されます。

よりスムーズなフォールバックエクスペリエンスのために、カスタムに似たCSS定義のフォールバックカーソルを検討してください。

 html {
  カーソル：url（ "data：image/svg xml; base64、phn2zyb4bwxucz0iahr0cdovl3d3d3d3dy53my5vcmcvmjawmc9zdmciihdpzhropsizmiigagvpz2h0psizmi igdmlld0jved0imcawidmyidmyij4kica8y2lyy2xlign4psixniigy3k9ije2iibypsixniigzmlsbd0iymxhy2siic8 cjwvc3znpg == "）16 16、auto;
}

これにより、シンプルな32x32 Base64エンコードの円が使用され、 16 16値がカーソルホットスポットを中心にしています。

高度なカスタマイズ

可能性は膨大です。視覚効果、複雑なアニメーションのためにフィルターを追加するか、実際の位置からカーソルを相殺することを検討してください。

ここにいくつかの刺激的な例があります：

• Studio Mesmer：カスタムアイグラフィックを使用します。
• IARA GRINSPUNのポートフォリオ：浮遊性、わずかに遅れた円形カーソルを備えています。
• MarlèneBruhatのポートフォリオ：洗練されたカーソルとグラデーションの背景効果をペアにします。
• Aleksandr Yaremenkoのポートフォリオ：シンプルでありながら印象的なカーソル。
• Terra：ホバー情報を表示する大きな輝くオーブ。

アクセシビリティに優先順位を付けることを忘れないでください。カスタムカーソルを思慮深く抑制して使用します。