cursor

カーソル（その他）

意味マウスポインタの形状

cursorとは？

cursorプロパティは、要素の上にマウスポインタがあるときに表示されるカーソルの形状を指定するために使用します。例えば、ポインター、矢印、待機中のアイコンなど、様々な形状を設定することができます。

cursorの具体的な使い方

ボタンにポインタカーソルを設定する例

<style>
    button {
        cursor: pointer;
    }
</style>

<button>
    このボタンはポインタカーソルを持っています。
</button>

ボタン要素の上にマウスポインタがある時に、ポインタ（手の形をしたカーソル）を表示するように設定しています。

読み込み中の要素に待機カーソルを設定する例

<style>
  .loading {
    cursor: wait;
  }
</style>

<div class='loading'>
  読み込み中...
</div>

クラス名'loading'が指定された要素の上にマウスポインタがある時に、待機中を表す砂時計カーソルを表示します。

cursorに関するよくある質問

Q. cursorの一般的な値は？

A. 一般的な値には、default（デフォルト矢印）、pointer（手の形）、text（テキスト選択用のI型）、wait（待機中の砂時計）などがあります。

Q. カスタムカーソルは設定できる？

A. はい、cursor: url('path/to/cursor.png'), auto; のように、独自の画像ファイルをカーソルとして設定できます。

CSSのcursorについても学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのcursorやopacity、z-index、list-style、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。