カーソルプロパティ

最終更新：2026-09-13

cursor カーソルプロパティ

cursor プロパティは、マウスポインタが要素の上に乗ったときに表示されるカーソルの形状を制御します。これはインタラクティビティを示す重要な視覚的な手がかりです。pointer、text、not-allowed などの異なるカーソルタイプを選ぶことで、要素がクリック可能か、ドラッグ可能か、無効化されているかをユーザーにひと目で伝えられます。

カテゴリ
初期値	auto
継承	はい
適用対象	all
アニメーションタイプ	discrete
CSS バージョン	CSS2
状態	標準

📝 構文

cursor: [ [ <url> [ <x> <y> ]? ]# , ]* [ auto | default | none | pointer | text | move | not-allowed | grab | grabbing | progress | wait | help | cell | crosshair | zoom-in | zoom-out | <cursor-keyword> ];

⚙️ 値

値	タイプ	説明
`auto \| default \| pointer \| text \| move \| wait \| help \| not-allowed \| grab \| grabbing \| crosshair`	キーワード	あらかじめ定義されたカーソルタイプ
`none`	キーワード	カーソルを非表示にする

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
cursor	✓ v1	✓ v12	✓ v1	✓ v1.2	✓ v1
すべての主要ブラウザーでサポート

ヒント： pointer は最も一般的な値であり、要素がクリック可能であることを示します。ボタンやリンクなどのインタラクティブな要素に明示的に設定すると、使いやすさが向上します。

ヒント： カスタム画像をカーソルとして使用できます。例えば cursor: url(cur.cur), auto のようにします。常にフォールバック用のキーワードを指定してください。

❓ よくある質問

QCSS で cursor: none を使ってマウスカーソルを隠すのは良いアイデアですか？

A大多数のケースでは、カーソルを隠すことは推奨されません。ユーザーは位置や操作のフィードバックを失い、アクセシビリティも損なわれます。フルスクリーンのプレゼンテーション、ゲームのキャンバス、あるいはカスタムカーソルで既に覆われている領域などの特殊なケースにのみ適しています。隠す場合はキーボードでの代替手段を提供し、テキストの多いページでは避けてください。

Qgrab と grabbing のカーソル値の違いは何ですか？

Agrab は「開いた手」を表示し、要素がドラッグ可能であることを示すため、通常はドラッグ元に設定します。grabbing は「握りこぶし」を表示し、ドラッグ中であることを示し、ドラッグの最中に JavaScript によって切り替えられます。両者は組み合わせることで、カードのドラッグやスライダーなど、ポインタ駆動のインタラクションに即時の状態フィードバックを提供します。

QCSS スタイルシートでマウスカーソルとしてカスタム画像を使用するにはどうすればよいですか？

Acursor: url('cursor.png') 20 10, auto; と記述します。url は画像のパスを設定し、2 つの数値はホットスポットの座標（クリックが登録される位置）です。最後の auto は画像の読み込みに失敗した場合に使われるフォールバック用カーソルであり、残しておく必要があります。クロスプラットフォームでの互換性を高めるため、.cur、.png、.svg のいずれかで、大きさは 32×32 以下のファイルを推奨します。

Qボタンやリンクは CSS で cursor: pointer を使うべきなのはなぜですか？

Aボタンやリンクは、デフォルトですべてが手のカーソルになるわけではありません。一部のブラウザではボタンは矢印で表示されます。cursor: pointer を明示的に設定することで、クリック可能であるというアフォーダンスを伝え、使いやすさとクリック率を向上させます。ただし使いすぎは避けてください。プレーンテキストや非インタラクティブな要素に pointer を追加すると、ユーザーはそれがクリック可能だと誤解します。