【CSS Modules】cursorプロパティの使い方
cursorプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
cursorプロパティは、ウェブページ上でユーザーのマウスカーソルの視覚的な表現を制御する値を保持するプロパティです。このプロパティを使用すると、特定のHTML要素の上にマウスカーソルが重なった際に、そのカーソルの形状を変更することができます。
この機能の主な目的は、ユーザーが現在のインタラクション可能な状態や、次に実行できる操作を視覚的に理解しやすくすることにあります。これにより、ウェブアプリケーションのユーザーエクスペリエンス（UX）を向上させることが可能です。
たとえば、ウェブページ上のリンクにマウスカーソルが重なった際には、通常は指差しアイコンを示すpointer値が使用され、ユーザーにクリック可能であることを伝えます。テキストを選択できる領域ではI字型のtext値が適用され、テキストの選択が可能であることを示します。また、何か処理を待っている間は砂時計や回転するアイコンを示すwait値が使われることで、システムが動作中であることをユーザーに伝えます。
その他にも、help（ヘルプが利用可能）、move（要素を移動可能）、not-allowed（操作が禁止されている）など、用途に応じた多様なキーワード値が用意されています。また、独自の画像ファイルを指定して、カスタムのカーソルを表示することも可能です。
開発者は、このcursorプロパティを適切に活用することで、ユーザーに明確な視覚的フィードバックを提供し、より直感的で快適な操作体験を実現することができます。
公式リファレンス: cursor
構文(syntax)
1selector { 2 cursor: value; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません