6XC

CSS カーソル選択ツール

すべてのCSSカーソル値にマウスを乗せてその場で確認 — クリックするとcursor宣言をコピーできます。

987回閲覧

マウスを乗せて試す · クリックでコピー

cursorプロパティとは

カーソルはクリックする前に要素が何をするものかをユーザーに伝えます — クリック可能な要素にはpointer、ドラッグ可能な要素にはgrab、無効化された領域にはnot-allowed、分割可能なパネルにはcol-resize/row-resizeを使います。下のタイルにマウスを乗せて、自分の画面でカーソルの見た目を確かめてみましょう。クリックすると、すぐ使える宣言がコピーされます。cursor: url(...), フォールバックでカスタム画像を使うこともできます。

よくある質問

カスタムカーソルが表示されないのはなぜですか?

カスタムカーソル画像は小さいサイズ(多くの環境で32×32以下)である必要があり、宣言にはフォールバック用のキーワードが必須です: cursor: url("c.png"), auto;。

ボタンにはcursor: pointerを使うべきですか?

ブラウザは<button>要素に既定でこれを適用しませんが、ユーザーは期待しています — 多くのデザインシステムでは、すべての操作可能な要素にcursor: pointerを追加しています。

関連ツール

CSSグラデーション ジェネレーター ライブプレビューを見ながら線形・放射状・円錐形のCSSグラデーションをデザインし、コードをコピーできます。 使ってみる CSS Box Shadow(ボックスシャドウ)ジェネレーター オフセット・ぼかし・広がり・色・不透明度・内側影(inset)をビジュアルに調整し、ライブプレビューで影をデザインします。 使ってみる CSS Border Radiusジェネレーター 各角を個別に、または一括でpxか%で丸め、ライブプレビューとコピー可能なCSSを確認できます。 使ってみる CSSテキストシャドウ ジェネレーター オフセット・ぼかし・色・不透明度を調整してtext-shadowをデザインし、サンプルテキストでライブプレビューできます。 使ってみる