デザインツール

CSS Cursor テスター - cursor keyword プレビュー

代表的な CSS cursor keyword を一覧し、hover で見た目を確認し、検索やカテゴリで絞り込みながら cursor 宣言をコピーできます。resize、drag、disabled 状態向けカーソル選定に便利です。

クイック切替→CSSからTailwindへ変換

CSScursorPointer

クイック切替:CSSからTailwindへ変換 CSS Box Shadow ジェネレーター

このツールをお気に入りに

お気に入りの保存方法がまだ選ばれていません。

クイック操作

デザインツールに戻るすべてのツールを見る

このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。

利用シーン

ドラッグハンドル向けの resize cursor を選ぶ
disabled 状態で not-allowed と no-drop を比較する
絞り込んだ cursor 宣言をまとめてコピーする

使い方

各 tile に hover して cursor を確認する
keyword または category で絞り込む
単体、選択中、表示中リストの cursor をコピーする

入出力サンプル

操作

resizeで絞り込み、nwse-resizeをクリック

出力

cursor: nwse-resize;

FAQ

カスタム画像カーソルも含まれますか？

この一覧は組み込み keyword のみを対象にしています。url(...) を使うカスタム cursor image には対応していません。

カーソルの見た目は OS ごとに同じですか？

keyword 自体は標準ですが、実際の図柄は OS とブラウザに依存します。最終的にはローカル環境で見えるものを正として扱ってください。

ツール

関連ツール

近い用途の翻訳済みツールへ続けて進めます。

CSSからTailwindへ変換

CSSからTailwindへ変換 - 宣言マッピング

利用可能

CSS 宣言を貼り付けると、可能な範囲で Tailwind utility class へ変換します。一般的な layout、spacing、color ルールは標準 class に変換し、対応しない値は arbitrary-value 構文へフォールバックします。

CSS Tailwind 変換

ツールを開く

CSS Box Shadow ジェネレーター

CSS Box Shadow ジェネレーター - 視覚的コントロール付き

利用可能

offset、blur、spread、color、opacity、inset を視覚的に調整し、カード、ボタン、オーバーレイ向けの box-shadow CSS をライブ生成できます。

CSS 影 box-shadow

ツールを開く