autoCSS1文脈に応じてブラウザが自動で選ぶ
cursor-auto基本CSSカーソルビューア
標準カーソルの形をその場で試し、CSSを持ち帰る。
カードに重ねてカーソルを試す
defaultCSS1プラットフォーム既定の矢印カーソル
cursor-default基本noneCSS3カーソルを非表示にする
cursor-none基本context-menuCSS3右クリックでメニューを表示できる
cursor-context-menu操作・状態helpCSS1ヘルプや説明を表示できる
cursor-help操作・状態pointerCSS1リンクやボタンなど、クリック可能な要素を示す
cursor-pointer操作・状態progressCSS2.1処理中だが操作は受け付ける
cursor-progress操作・状態waitCSS1処理中で操作を受け付けない
cursor-wait操作・状態cellCSS2.1表や表計算のセルを選択する
cursor-cell選択・編集crosshairCSS1精密な選択や描画のための十字線
cursor-crosshair選択・編集textCSS1横書きテキスト選択用のIビーム
cursor-text選択・編集vertical-textCSS3縦書きテキスト選択用のIビーム
cursor-vertical-text選択・編集aliasCSS2.1ドロップでショートカットを作る
cursor-aliasドラッグ・移動copyCSS2.1ドラッグ中の要素を複製する
cursor-copyドラッグ・移動moveCSS1全方向に自由に移動できる
cursor-moveドラッグ・移動no-dropCSS2.1ここにはドロップできない
cursor-no-dropドラッグ・移動not-allowedCSS2.1操作が無効または許可されていない
cursor-not-allowedドラッグ・移動grabCSS3ドラッグできる状態の開いた手
cursor-grabドラッグ・移動grabbingCSS3ドラッグ中の握った手
cursor-grabbingドラッグ・移動all-scrollCSS2.1全方向にスクロールやパンができる
cursor-all-scrollリサイズcol-resizeCSS2.1列幅を左右に変更できる
cursor-col-resizeリサイズrow-resizeCSS2.1行の高さを上下に変更できる
cursor-row-resizeリサイズe-resizeCSS2.1右方向にサイズを変更できる
cursor-e-resizeリサイズn-resizeCSS2.1上方向にサイズを変更できる
cursor-n-resizeリサイズne-resizeCSS2.1右上方向にサイズを変更できる
cursor-ne-resizeリサイズnw-resizeCSS2.1左上方向にサイズを変更できる
cursor-nw-resizeリサイズs-resizeCSS2.1下方向にサイズを変更できる
cursor-s-resizeリサイズse-resizeCSS2.1右下方向にサイズを変更できる
cursor-se-resizeリサイズsw-resizeCSS2.1左下方向にサイズを変更できる
cursor-sw-resizeリサイズw-resizeCSS2.1左方向にサイズを変更できる
cursor-w-resizeリサイズew-resizeCSS2.1左右方向にサイズを変更できる
cursor-ew-resizeリサイズns-resizeCSS2.1上下方向にサイズを変更できる
cursor-ns-resizeリサイズnesw-resizeCSS2.1右上・左下方向にサイズを変更できる
cursor-nesw-resizeリサイズnwse-resizeCSS2.1左上・右下方向にサイズを変更できる
cursor-nwse-resizeリサイズzoom-inCSS3クリックで拡大できる
cursor-zoom-inズームzoom-outCSS3クリックで縮小できる
cursor-zoom-outズームCSSカーソルビューアとは#
CSSカーソルビューアは標準のcursorキーワード36種を6分類で1か所に集めたツールです。各カードに見本の形、短い説明、対応するTailwindクラスを表示します。カードに重ねて実際のカーソルを試し、CSSかTailwindの値をコピーしてスタイルシートに貼ります。
使い方#
- 分類タブで一覧を絞ります。
- カードに重ねて実際のカーソルの形を試します。
- カードからCSSかTailwindの値をコピーします。
分類#
- 基本: 日常的な既定値です。
auto、default、noneがあります。 - 操作・状態: クリックできる要素や処理中の状態を示します。
pointer、wait、progress、help、context-menuが該当します。 - 選択・編集: 文字や表の選択、精密な指定に使います。
text、vertical-text、crosshair、cellが該当します。 - ドラッグ・移動: 掴む動作とドロップ可否の表示です。
grab、grabbing、move、copy、alias、no-drop、not-allowedが該当します。 - リサイズ: 幅・高さを変更できる辺や角を示します。方向別のキーワード、
col-resize、row-resize、all-scrollが該当します。 - ズーム: クリックで拡大・縮小します。
zoom-inとzoom-outが該当します。
活用シーン#
- リンクやボタンにハンドカーソルを付ける場面。
- 保存や書き出しの待ち時間を示す場面。
- ドラッグ可能なカードや地図に掴む手を示す場面。
- 表の列幅や分割表示の境界を示す場面。
- ギャラリー画像に拡大カーソルを付ける場面。
よくある質問#
形はOSとブラウザが描くため、同じキーワードでも環境で見た目が変わります。見本は目安です。カードに重ねて実際の形をお確かめください。
defaultは常にプラットフォームの矢印になります。autoは文脈でブラウザが判断し、文章上ではIビームになります。矢印に固定したいときはdefault、ブラウザの挙動に戻したいときはautoを使います。
noneはカーソルを隠します。全画面動画、ゲーム、独自のポインタを描くキャンバスに向いています。マウスの位置が分からなくなるため、代替のポインタ表示が必要です。
使えます。コピーしたクラスはcursor-*の命名に従い、クラス一覧にそのまま貼れます。追加の設定は要りません。
扱えません。url()による画像カーソルは対象外です。標準のキーワードのみを対象にしています。
カーソルを試すには重ねる位置が必要で、タッチ画面にはありません。コピーは可能なため、値を選んでデスクトップブラウザで結果をお確かめください。
注意点#
- CSSは
cursor: pointer;形式、Tailwindはcursor-pointer形式でコピーします。