CSSカーソル一覧
カードにマウスを乗せてカーソルを確かめ、クリックでCSSをコピーできます。
入力した文章やファイルはサーバーに送らず、このブラウザー内だけで処理します。
カードにマウスを乗せるとそのカーソルに変わります。クリックするとCSSが1行コピーされます。
基本
リンク・状態
選択
ドラッグ＆ドロップ
サイズ変更・スクロール
拡大・縮小
該当するカーソルがありません。
使い方
- カードにマウスを乗せると、その値のカーソルがすぐに表示されます。OSやブラウザーによって形は少しずつ異なります。
- 使いたいカードをクリックすると「cursor: 値;」がコピーされます。CSSのルールの中に貼り付けてください。
- 「絞り込み」に resize や「移動」などの言葉を入れると、当てはまるカーソルだけが残ります。
- スマホやタブレットのようにマウスのない端末ではカーソルが表示されないため、パソコンで確認してください。
よくある質問
自分で用意した画像をカーソルにできますか？
cursor: url(cursor.png) 4 4, pointer; のように書きます。2つの数字はクリック位置(x y)で、画像を読み込めなかった場合に備えて最後に標準の値を必ず付けます。サイズは32×32px以下にしておくと安心です。
pointerとdefaultはどう使い分けますか？
リンクやボタンのようにクリックできる要素にはpointer、それ以外の領域にはdefaultを使います。クリックできない場所にpointerを使うと、利用者が迷ってしまいます。
grabが一部のブラウザーで表示されません。
かなり古いブラウザーでは -webkit-grab のような接頭辞が必要でしたが、現在のChrome・Edge・Firefox・Safariはいずれも標準の値 grab・grabbing に対応しています。