CSSカーソルジェネレーター

CSSのcursorプロパティは、マウスがウェブページの要素上に置かれたときに表示される視覚的インジケーターを制御します。この微妙ながら強力なデザインツールは、クリック、ドラッグ、リサイズ、またはインターフェイスの異なる部分とのインタラクションが可能かどうかをユーザーに知らせます。ウェブアプリケーションを構築している場合でも、シンプルなウェブサイトをスタイリングしている場合でも、適切なカーソルタイプの選択はユーザー体験と認識される専門性に大きく影響します。

このジェネレーターは、すべての標準CSSカーソル値をカテゴリー別に整理して表示します。defaultやnoneなどの汎用カーソルから、リンク、テキスト選択、ドラッグ、リサイズ、ズームなど特殊な用途のカーソルまで様々です。カテゴリーを参照し、各カーソルタイプの上にマウスを置いてスクリーン上でどのように見えるかをリアルタイムプレビューで確認してから、クリックしてcss宣言(cursor: value;)をクリップボードにコピーします。このワークフローで構文を覚えたり、ドキュメントを探し回る必要がなくなります。

一般的な用途には、not-allowedカーソルで無効化されたフォーム要素を印をつけることや、ドラッグ可能なコンポーネントにgrabとgabbingカーソルを表示すること、col-resizeやrow-resizeなどのリサイズカーソルでリサイズ可能な境界を示すことが挙げられます。すべてのモダンブラウザはこれらのカーソル値を追加設定なしでサポートしており、デスクトップおよびタッチスクリーンインターフェイス全体で利用可能性を高めるアクセス可能な方法です。