HTML DOM スタイルの cursor プロパティとは？設定方法と全値一覧をわかりやすく解説
HTML DOM スタイルの cursor プロパティとは
HTML DOM のスタイルにおける cursor プロパティは、マウスポインタが表示されるときのカーソルの種類（形状）を設定・取得するために使用されるプロパティです。JavaScript と組み合わせれば、ユーザーの操作に応じてカーソルを動的に変更することもできます。
なお、値を取得したい場合は object.style.cursor を参照するだけで、現在設定されているカーソルの種類を読み取ることができます。
構文
cursor プロパティを設定するための基本的な構文は以下のとおりです。
object.style.cursor = value
cursor プロパティに指定できる値の一覧
次の表は、cursor プロパティで使用できる主な値とその説明です。
| 値 | 説明 |
|---|---|
| alias | エイリアス（別名）が作成されることを示すカーソル |
| all-scroll | 任意の方向へスクロールできることを示すカーソル |
| auto | デフォルト値。ブラウザが自動的にカーソルを設定する |
| cell | セル（またはセルの集合）を選択できることを示すカーソル |
| context-menu | コンテキストメニューが利用可能であることを示すカーソル |
| col-resize | 列を水平方向にリサイズできることを示すカーソル |
| copy | コピーされることを示すカーソル |
| crosshair | 十字線（クロスヘア）として表示されるカーソル |
| default | デフォルトのカーソル |
| e-resize | ボックスの端を右（東）方向へ移動することを示すカーソル |
| ew-resize | 左右双方向のリサイズカーソルを示す |
| grab | 対象をつかむ（掴める）ことを示すカーソル |
| grabbing | 対象をつかんでいる状態を示すカーソル |
| help | ヘルプが利用可能であることを示すカーソル |
| move | 対象を移動できることを示すカーソル |
| n-resize | ボックスの端を上（北）方向へ移動することを示すカーソル |
| ne-resize | ボックスの端を右上（北東）方向へ移動することを示すカーソル |
| nesw-resize | 斜め双方向のリサイズカーソルを示す |
| ns-resize | 上下双方向のリサイズカーソルを示す |
| nw-resize | ボックスの端を左上（北西）方向へ移動することを示すカーソル |
| nwse-resize | 斜め双方向のリサイズカーソルを示す |
| no-drop | ドラッグ中の項目をここにドロップできないことを示すカーソル |
| none | 要素に対してカーソルを一切表示しない |
| not-allowed | 要求された操作が実行されないことを示すカーソル |
| pointer | リンクであることを示すポインタ型のカーソル |
| progress | プログラムが処理中（ビジー）であることを示すカーソル |
| row-resize | 行を垂直方向にリサイズできることを示すカーソル |
| s-resize | ボックスの端を下（南）方向へ移動することを示すカーソル |
| se-resize | ボックスの端を右下（南東）方向へ移動することを示すカーソル |
| sw-resize | ボックスの端を左下（南西）方向へ移動することを示すカーソル |
| text | 選択可能なテキストであることを示すカーソル |
| URL | カスタムカーソル画像へのURLをカンマ区切りで指定する。注意：URLで定義したカーソルがどれも使用できない場合に備えて、リストの末尾には必ず汎用カーソル（例：auto や pointer）を指定しておくこと |
| vertical-text | 選択可能な縦書きテキストであることを示すカーソル |
| w-resize | ボックスの端を左（西）方向へ移動することを示すカーソル |
| wait | プログラムがビジー状態であることを示すカーソル |
| zoom-in | 拡大できることを示すカーソル |
| zoom-out | 縮小できることを示すカーソル |
| initial | このプロパティをデフォルト値に設定する |
| inherit | 親要素からこのプロパティの値を継承する |
cursor プロパティの使用例
それでは、実際に cursor プロパティを使ったサンプルコードを見てみましょう。以下の例では、ボタンをクリックすると、1つ目の段落のカーソルが「cell」に、2つ目の段落のカーソルが「grab」にそれぞれ変化します。
<!DOCTYPE html>
<html>
<head>
<style>
#one {
background-color: beige;
}
#two {
background-color: lavender;
}
</style>
<script>
function changeCursor() {
document.getElementById("one").style.cursor = "cell";
document.getElementById("two").style.cursor = "grab";
document.getElementById("Sample").innerHTML = "1つ目の段落にマウスを乗せるとカーソルがcellに、2つ目に乗せるとgrabアイコンに変化します";
}
</script>
</head>
<body>
<p id="one">これは1つ目の段落内のサンプルテキストです。これは1つ目の段落内のサンプルテキストです。これは1つ目の段落内のサンプルテキストです。これは1つ目の段落内のサンプルテキストです。</p>
<p id="two">これは2つ目の段落内のサンプルテキストです。これは2つ目の段落内のサンプルテキストです。これは2つ目の段落内のサンプルテキストです。これは2つ目の段落内のサンプルテキストです。</p>
<p>下のボタンをクリックしてカーソルプロパティを変更してみましょう</p>
<button onclick="changeCursor()">カーソルを変更</button>
<p id="Sample"></p>
</body>
</html>
実行結果
ページを表示すると、最初は通常のカーソルが表示されます。
「カーソルを変更」ボタンをクリックすると、各段落にマウスを乗せたときのカーソルが「cell」および「grab」に切り替わります。その様子は以下のスクリーンショットのとおりです。
まとめ
cursor プロパティを使えば、要素ごとにマウスカーソルの形状を自由に制御できます。リンクには「pointer」、処理中には「wait」や「progress」、ドラッグ可能な要素には「grab」など、UI の意図を視覚的に伝えるために適切なカーソルを選ぶことで、より使いやすい Web サイトを作ることができます。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの cursor プロパティとは？設定方法と全値一覧をわかりやすく解説
HTML DOM スタイルの cursor プロパティとはHTML DOM のスタイルにおける cursor プロパティは、マウスポインタが表示されるときのカーソルの種類（形状）を設定・取得するために使用されるプロパティです。JavaScript と組み合わせれば、ユーザーの操作に応じてカーソルを動的に変更することもできます。なお、値を取得したい場合は object.style.cursor を参照するだけで、現在設定されているカーソルの種類を読み取ることができます。構文cursor プロパティを設定するための基本的な構文は以下のとおりです。object.style.cursor = valu