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