web制作でのカーソルの表示の変え方

HTML・CSS

CSSでcursor」を使うことで、マウスカーソルの形状を変更することができます。特定の要素上にマウスを置いたときに、カーソルの見た目を変えることができます。

基本的な使い方

要素 {
  cursor: タイプ;
}

例:

button {
  cursor: pointer;
}

ボタンの上にマウスを置くと、指の形(クリック可能) のカーソルに変わります。

カーソルの種類

cursorの値説明
default通常の矢印カーソル
pointerリンクなどに使われる指の形
textテキストを選択できるときのカーソル
move要素を移動できるカーソル
wait読み込み中(砂時計など)のカーソル
crosshair十字のカーソル
not-allowed禁止マーク(操作不可)
helpヘルプがあることを示す疑問符付きカーソル

まとめ

  • cursorを使うと、マウスの形を変更できる
  • pointernot-allowedなど、UXを向上させるのに役立つ
  • 使い方によって、直感的に操作できるUIを作れる

デザインや操作性を向上させるために、適切に活用してみましょう!

コメント

タイトルとURLをコピーしました