Webサイトを使いやすくする方法のひとつに、マウスポインターの見た目を変更する実装があります。
要素にカーソルを合わせたときに、ポインターを変えることによってユーザーに適切な情報が伝わり、利便性が高まります。
この記事では、cursorプロパティの使い方を解説します。値を一覧表で表示しているので、あなたのサイトに最適なポインターを見つけてみてください。
- cursorプロパティとは？
- cursorの使い方
- cursorに指定できる値
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
corsolプロパティとは？
cursorプロパティは、マウスポインターの見た目を変更できるプロパティです。
よく使われるポインターの例は以下です。
- 指差しマーク
- テキスト選択のIマーク
- 選択範囲を示す十字マーク
- 白い手のマーク、クリックで掴む動作をする
要素にカーソルを合わせたとき、視覚的にわかりやすい情報をユーザーに伝えることで、サイトの利便性が高まります。
具体的な使い方は次の項目で解説します。
cursorの使い方
指定したセレクタにカーソルを合わせたとき、値によってマウスポインターの見た目を変更できます。
以下が記述例です。
p {
cursor: pointer;
}この例では、p要素にカーソルを合わせたときに、指をさしているアイコンにポインターを変更します。
セレクタにclass名を指定すれば、そのclassを持つ要素にカーソルを合わせたときにだけポインターを変更できます。
cursorに指定できる値
cursorに指定できる値は、多くの種類があります。サイトの使いやすさを考えて、最適なものを選びましょう。
表の中の値にカーソルを合わせるとポインターが変わります。
| カテゴリー | 値 | 解説 |
| 一般 | auto | 初期状態、カーソルを合わせた要素に応じて見た目が変化する |
| default | 通常の矢印 | |
| none | ポインターを非表示 | |
| 状態 | context-menu | コンテコストメニューを示す。 メニューアイコンと矢印 |
| help | ヘルプが使用できることを示す。 ヘルプマークと矢印 | |
| pointer | 指差しマーク | |
| progress | プログラムの起動中だが、ユーザーの操作は可能であることを示す 砂時計マークと矢印 | |
| wait | プログラムの起動中であり、ユーザーの操作は不可能であることを示す 砂時計マーク | |
| 選択 | cell | Excelのセル選択時のようなマーク |
| crosshair | 十字カーソル | |
| text | テキスト選択可能 | |
| vertical-text | 縦書きのテキストを選択可能 | |
| ドラッグ＆ドロップ | alias | エイリアスやショートカットを作成可能 |
| copy | コピーされることを示す | |
| move | 移動されることを示す | |
| no-drop | ドロップ不可 | |
| not-allowed | 要求された操作は不可 | |
| grab | ドラッグできる | |
| grabbing | ドラッグ中 | |
| サイズ変更とスクロール | all-scroll | スクロール可能 |
| col-resize | 左右にサイズ変更可能 | |
| row-resize | 上下にサイズ変更可能 | |
| n-resize | 辺を移動可能 prefix(接頭詞)は方角を示す 例：ne-resizeは北東(north-east)の角から移動開始 | |
| e-resize | ||
| s-resize | ||
| w-resize | ||
| ne-resize | ||
| nw-resize | ||
| se-resize | ||
| sw-resize | ||
| ew-resize | ||
| ns-resize | ||
| nesw-resize | ||
| nwse-resize | ||
| 拡大・縮小 | zoom-in | 拡大が可能 |
| zoom-out | 縮小が可能 |
各値の表示とブラウザごとの違いは、こちらのサイトを参考にしてください。
CSS Cursor Values Across Browsers and Platforms
まとめ
cursorプロパティは、カーソルポインターの表示を指定するプロパティです。
cursorプロパティまとめ
- カーソルポインターを変更するプロパティ
- セレクタに指定した要素にカーソルを合わせたときの表示を指定する
- ユーザーが可能な操作を視覚的に伝えるのに効果的
適切なポインターを表示することで、Webサイトの利便性を向上できます。ぜひcursorプロパティを使用してみてください。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
