CSS cursor：全値一覧、カスタムカーソル、opacity
CSSカーソルギャラリー
CSS cursor：全値をホバーで確認、カスタムカーソル、opacity | We.Inc
36種類の標準CSS cursor値をタイルで試し、ホットスポットとフォールバック付きのカスタム画像カーソルを作成。opacity、visibility、rgbaで薄くする方法の使い分けも学べます。
cursorプロパティは、要素の上に表示されるマウスポインターを指定します。たとえばクリックできるものにはcursor: pointer、無効なコントロールにはnot-allowed、ドラッグできる項目にはgrabを使います。カスタムカーソルはurl()で画像を指定し、任意でホットスポット座標を加え、必須のキーワードをフォールバックとして最後に書きます。下の各タイルにホバーすると、36種類の標準値すべてをお使いのブラウザーで確認できます。
よく使うカーソル
- 無効なコントロール
- cursor: not-allowed
- ドラッグ可能 / ドラッグ中
- cursor: grab / grabbing
- cursor-grab / cursor-grabbing
- 列のサイズ変更
- cursor: col-resize
- 処理中だが操作可能
- cursor: progress
カーソルの名前は勘違いしやすく、OSごとに描画も少しずつ異なります。このギャラリーでは、すべてのキーワードを自分のブラウザーでホバーして確認できます。さらに、きちんとフォールバックするカスタム画像カーソルの作り方と、薄い表示や無効状態に合わせたopacityのテクニックも紹介します。
- ギャラリーのタイルにホバーすると、そのカーソルがお使いのシステムでどう描かれるかを確認できます。タイルをクリックすると宣言をコピーできます。
- フィルターを使って、リンク、サイズ変更、ドラッグ、ステータスのカーソルに絞り込めます。
- カスタムカーソルビルダーを開き、ホットスポットを調整して、テストエリアで結果を確かめます。
- opacityのセクションを読んで、フェードにopacity、visibility、rgbaカラーのどれを使うか選びます。
- ブラウザーはリンクには最初からpointerを表示します。ボタンの初期値は矢印なので、ボタンなどクリックできる要素には自分でpointerを追加しましょう。
- カスタムカーソル画像は32 x 32ピクセル以下に抑えましょう。それより大きい画像は、一部のブラウザーやOSで無視されることがあります。
- カーソルのリストは必ずautoやpointerなどのキーワードで終えましょう。url()の値の後にはキーワードが必須です。
- タッチスクリーンにはカーソルが存在しないため、操作できることを示す手段をカーソルだけに頼ってはいけません。
よくある質問
CSSでカスタムカーソルを作るには？
cursor: url(cursor.svg) 4 4, auto; と書きます。画像は小さなPNG、SVG、CURファイルで、2つの数値は左上からのホットスポット位置（ピクセル）、autoは画像の読み込みに失敗したときに使われるフォールバックのキーワードです。キーワードの前にurl()の画像を複数並べることもできます。
無効なボタンにはどのカーソルを表示すべき？
一般的にはnot-allowedを使います。button:disabled { cursor: not-allowed; opacity: 0.5; } で指定し、本物のdisabled属性も残しましょう。そうすれば、マウス利用者だけでなく、キーボードやスクリーンリーダーの利用者にもコントロールが使えないことが伝わります。
opacityとvisibilityの違いは？
opacityは子要素も含めて要素全体を薄くし、完全に透明な要素でもクリックやフォーカスを受け付けます。visibility: hiddenはスペースを保ったまま、ポインターと支援技術の両方に対して要素を無効にします。フェード自体にはopacityを使い、最後にvisibilityを切り替えて、見えない項目がクリックされないようにしましょう。
opacityを使うとテキストまで透明になるのはなぜ？
opacityは要素内のすべてに適用されるからです。背景だけを透けさせたい場合は、半透明の色を使います。background-color: rgb(0 0 0 / 0.5)、または従来の書き方のrgba(0, 0, 0, 0.5)です。テキストは完全に不透明なまま残ります。
カーソルを非表示にできますか？
cursor: noneで要素の上のカーソルを非表示にできます。ゲーム、キオスク端末、動画プレーヤーではこれが必要になることがあります。一般的なWebサイトでは、ユーザーがどこを指しているのか分からなくなるため、控えめに使いましょう。
カーソルはヒントであり、操作手段ではない
- カーソルは、クリックする前に何が起こるかをマウス利用者に伝えます。pointerはクリックできる対象を、テキストカーソルは選択や編集ができるテキストを、サイズ変更の矢印はドラッグできることを約束します。何も起こらないものにpointerを表示するのは、約束を破ることになります。
- キーボード、タッチ、スクリーンリーダーの利用者には、こうしたヒントは見えません。操作できるものは見た目でも操作できると分かるようにし、見えるフォーカススタイルを付け、本物のボタンやリンクを使ってその役割が読み上げられるようにする必要があります。
壊れないカスタム画像カーソル
- カーソル画像は他の画像と同じように取得されるため、ダウンロードが遅いか失敗した場合はフォールバックのキーワードが使われます。インラインのdata: SVGならリクエスト自体が不要になり、高解像度の画面でもくっきり表示されます。
- ホットスポットは、クリックが発生する正確なピクセルです。矢印なら先端で、通常は0 0付近になります。十字や円なら中心です。ホットスポットがずれていると、狙った位置から数ピクセル離れた場所がクリックされてしまいます。
正しく薄く表示する方法
- 無効状態の見た目には、0.5前後のopacity、cursor: not-allowed、disabled属性を組み合わせます。薄くしたテキストを読む必要がある場合は、コントラストの要件を満たしているか確認しましょう。
- ホバーで表示する場合は、描画コストの低いopacityをアニメーションさせ、visibilityと組み合わせて透明な間はクリックできないようにします。背景や枠線など、1つのレイヤーだけを半透明にしたいときは、アルファチャンネル付きの色が適しています。
36種類のcursor値すべて
標準のcursorキーワード（CSS Basic User Interface Level 4）。Tailwindのクラスはcursor-<value>です
- リンクとステータス
- コンテキストメニューを利用できる
- リンクとステータス
- リンクまたはクリックできるコントロール
- ドラッグ＆ドロップ
- ショートカットやエイリアスが作成される
- サイズ変更とスクロール
- どの方向にもスクロールできる
- サイズ変更とスクロール
- 右上がりの対角線方向にサイズ変更
- サイズ変更とスクロール
- 右下がりの対角線方向にサイズ変更
ホットスポットとフォールバック付きのカスタムカーソル
ホットスポットを中心に置いたインラインSVGのリングカーソル
ホットスポット12 12により、クリック位置がリングの中心になります。画像が受け付けられない場合はcrosshairが使われます。
無効、ドラッグ、サイズ変更の状態
操作に合ったカーソル
各要素にホバーしてみてください。ドラッグできるカードは、マウスボタンを押している間grabbingに切り替わります。
opacity、visibility、rgbaの比較
薄くする方法の選び方
- テクニック
- 子要素に影響する？
- クリックできる？
- 滑らかにアニメーションする？
- Tailwind
- opacity: 0.5
- はい、内側のすべて
- はい
- はい
- visibility: hidden
- はい（子要素は個別に表示に戻せる）
- いいえ
- 瞬時に切り替わる
- background: rgb(0 0 0 / 0.5)
- いいえ、そのレイヤーのみ
- はい
- はい
- bg-black/50
- color: rgb(17 17 17 / 0.6)
- いいえ、テキストのみ
- はい
- はい
- text-black/60
要素全体のopacityと半透明の背景の比較
左のバナーはボックスと一緒にテキストも薄くなります。右のバナーは透ける背景の上でテキストがくっきりしたままです。
- ブラウザーが文脈から判断
- プラットフォーム標準の矢印
- カーソルを描画しない
- コンテキストメニューを利用できる
- ヘルプを利用できる
- リンクまたはクリックできるコントロール
- 処理中だが操作は可能
- 処理中でまだ操作できない
- 表のセルを選択できる
- 精密な2次元の選択
- テキストを選択または編集できる
- 縦書きテキストを選択できる
- ショートカットやエイリアスが作成される
- 何かがコピーされる
- 何かが移動される
- ここにはドロップできない
- その操作は許可されていない
- つかんでドラッグできる
- 現在ドラッグ中
- どの方向にもスクロールできる
- 列の幅を水平方向に変更
- 行の高さを垂直方向に変更
- 上端を移動
- 右端を移動
- 下端を移動
- 左端を移動
- 右上の角を移動
- 左上の角を移動
- 右下の角を移動
- 左下の角を移動
- 左右にサイズ変更
- 上下にサイズ変更
- 右上がりの対角線方向にサイズ変更
- 右下がりの対角線方向にサイズ変更
- ズームインできる
- ズームアウトできる
すべて
一般
リンクとステータス
選択
ドラッグ＆ドロップ
サイズ変更とスクロール
ズーム
ホバーギャラリー
カーソルのグループで絞り込む
コピーしました
クリックでコピー
コピーしたカーソル：{v}
カスタムカーソルビルダー
ここでカーソルを試す
画像サイズ：{n}px
ホットスポット x：{n}px
ホットスポット y：{n}px
フォールバックのキーワード
CSSをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る