CSSで「cursor」を使うことで、マウスカーソルの形状を変更することができます。特定の要素上にマウスを置いたときに、カーソルの見た目を変えることができます。
基本的な使い方
要素 {
cursor: タイプ;
}
例:
button {
cursor: pointer;
}
ボタンの上にマウスを置くと、指の形(クリック可能) のカーソルに変わります。
カーソルの種類
| cursorの値 | 説明 |
| default | 通常の矢印カーソル |
| pointer | リンクなどに使われる指の形 |
| text | テキストを選択できるときのカーソル |
| move | 要素を移動できるカーソル |
| wait | 読み込み中(砂時計など)のカーソル |
| crosshair | 十字のカーソル |
| not-allowed | 禁止マーク(操作不可) |
| help | ヘルプがあることを示す疑問符付きカーソル |
まとめ
cursorを使うと、マウスの形を変更できるpointerやnot-allowedなど、UXを向上させるのに役立つ- 使い方によって、直感的に操作できるUIを作れる
デザインや操作性を向上させるために、適切に活用してみましょう!


コメント