CSSカーソルジェネレーター
CSS2、CSS3カーソルスタイル、カスタムカーソルを生成およびプレビューするツール。
CSS2カーソルユニバーサルサポート
auto
クリックしてコピー
inherit
クリックしてコピー
crosshair
クリックしてコピー
default
クリックしてコピー
help
クリックしてコピー
move
クリックしてコピー
pointer
クリックしてコピー
progress
クリックしてコピー
text
クリックしてコピー
wait
クリックしてコピー
e-resize
クリックしてコピー
ne-resize
クリックしてコピー
nw-resize
クリックしてコピー
n-resize
クリックしてコピー
se-resize
クリックしてコピー
sw-resize
クリックしてコピー
s-resize
クリックしてコピー
w-resize
クリックしてコピー
CSS3カーソルモダンブラウザ
none
not IE, Safari, Opera
クリックしてコピー
context-menu
not Firefox, Chrome
クリックしてコピー
cell
not Safari
クリックしてコピー
vertical-text
クリックしてコピー
alias
not Safari
クリックしてコピー
copy
not Safari
クリックしてコピー
no-drop
クリックしてコピー
not-allowed
クリックしてコピー
ew-resize
クリックしてコピー
ns-resize
クリックしてコピー
nesw-resize
クリックしてコピー
nwse-resize
クリックしてコピー
col-resize
クリックしてコピー
row-resize
クリックしてコピー
all-scroll
クリックしてコピー
grab
only Webkit and Firefox
クリックしてコピー
grabbing
only Webkit and Firefox
クリックしてコピー
zoom-in
only Webkit and Firefox
クリックしてコピー
zoom-out
only Webkit and Firefox
クリックしてコピー
カスタムカーソル上級
URLベースのカーソル
cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load
サポートされている形式
.cur
.png
.jpg
.gif
使用例
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
URLベースのカーソル
cursor: url(images/cursor.cur), auto;# required by IE
cursor: url(images/cursor.png) x y, auto;# x y are hotspot coordinates
auto is the fallback cursor when custom cursor fails to load
サポートされている形式
.cur
.png
.jpg
.gif
使用例
/* CSS */
cursor: url('custom-cursor.png') 16 16, pointer;
アクセシビリティに関する考慮事項
- • 機能性を表現するためにカーソルだけに頼るのではなく、追加の視覚的な手がかりを提供する
- • ハイコントラストモードで見えるカーソルを使用する
- • アクセシビリティ設定を考慮して、アニメーションカーソルは控えめに使用する
- • キーボードナビゲーションユーザーのためにフォーカスインジケーターを提供する
パフォーマンスの最適化
- • 遅延を防ぐためにカスタムカーソル画像をプリロードする
- • HTTPリクエストを減らすためにCSSスプライトを使用する
- • パフォーマンスを向上させるために不要なカーソルの変更を避ける
- • カスタムカーソルはモバイル環境では表示されないことを考慮する