「クリックできるか」
「ドラッグ&ドロップできるか」
特定の箇所にマウスカーソルを合わせたとき、デザインが変われば、ユーザーに「何ができるか」を直感的に伝えられます。ノンストレスで操作してもらうのに必要な工夫です。
そこで今回は、CSSのcursorプロパティで、マウスカーソルのデザインを変更する方法をご紹介します。
目次
cursorプロパティとは
cursorプロパティとは、CSSでマウスカーソルのデザインを指定するものと考えてください。
たとえば、ボタンにカーソルを乗せると自動的に指のアイコンに変わることがありますが、あれもcursorプロパティによるものです。値を指定することで、カーソルのデザインを自由に変更できます。
cursorプロパティ一覧表
よく使われるcursorプロパティ（カーソル指定）の値をご紹介します。気になる値をクリックすると、動作サンプルを確認できます。
| クリック・操作系 | |
|---|---|
| cursor値 | 用途 |
| pointer | クリック可能 |
| help | ヘルプ・補足 |
| wait | 処理中・待機中 |
| progress | 処理中（操作可能） |
| not-allowed | 操作不可 |
| zoom-in | 拡大可能 |
| zoom-out | 縮小可能 |
| ドラッグ・サイズ変更系 | |
|---|---|
| cursor値 | 用途 |
| move | 移動可能 |
| grab | ドラッグ可能 |
| grabbing | ドラッグ中 |
| col-resize | 横幅変更 |
| row-resize | 縦幅変更 |
| crosshair | 正確な位置指定 |
基本的なカーソル
default
cursorプロパティのデフォルト値（初期値）です。OSの標準カーソル（矢印）が表示されます。
/* 通常の矢印カーソル */
.element {
cursor: default;
}auto
ブラウザが自動的に適切なカーソルを選択します。通常は指定しなくても、この状態になっています。テキストの上では文字選択カーソル、リンクの上では指のアイコンに切り替わります。
/* ブラウザが自動でカーソルを選択 */
.element {
cursor: auto;
}none
カーソルを非表示にします。動画やスライドショーなど、独自のUI操作を実装する際に使います。
/* カーソルを非表示にする */
.element {
cursor: none;
}text
テキスト選択カーソル（Iビーム）が表示されます。テキストが選択できることを示す際に使います。
/* テキストを選択できることを示す */
.element {
cursor: text;
}クリック・操作系
pointer
指の形のカーソルに切り替わります。リンクやボタンなど、クリックできる要素に使います。
/* クリックできることを示す指アイコン */
.element {
cursor: pointer;
}help
「？」マーク付きのカーソルが表示されます。ヘルプや補足情報があることを示す際に使います。
/* ヘルプや補足情報があることを示す */
.element {
cursor: help;
}wait
砂時計や読み込み中のアイコンが表示されます。処理中でユーザーが待つ必要がある場面に使います。
/* 処理中・待機を示す */
.element {
cursor: wait;
}progress
処理中であることを示しつつ、操作も可能であることを伝えるカーソルです。waitとの違いは、ユーザーが他の操作を続けられる点です。
/* 処理中でも操作可能であることを示す */
.element {
cursor: progress;
}not-allowed
禁止アイコンが表示されます。クリックできない、または操作が許可されていない要素に使います。
/* 操作が禁止されていることを示す */
.element {
cursor: not-allowed;
}zoom-in
拡大アイコンが表示されます。クリックで画像などを拡大できる場面に使います。
/* 拡大できることを示す */
.element {
cursor: zoom-in;
}zoom-out
縮小アイコンが表示されます。拡大表示中の画像を元のサイズに戻す場面などで使います。
/* 縮小できることを示す */
.element {
cursor: zoom-out;
}ドラッグ・サイズ変更系
move
十字矢印のカーソルが表示されます。上下左右にドラッグで移動できる要素に使います。
/* ドラッグで移動できることを示す */
.element {
cursor: move;
}grab
開いた手のアイコンが表示されます。ドラッグできることを示す際に使います。
/* つかめることを示す開いた手 */
.element {
cursor: grab;
}grabbing
閉じた手のアイコンが表示されます。ドラッグ中の状態を示す際に使います。grabとセットで使うのが一般的です。
/* ドラッグ中を示す閉じた手 */
.element {
cursor: grabbing;
}col-resize
左右方向のリサイズカーソルが表示されます。横幅を変更できる要素に使います。
/* 列の幅を変更できることを示す */
.element {
cursor: col-resize;
}row-resize
上下方向のリサイズカーソルが表示されます。縦幅を変更できる要素に使います。
/* 行の高さを変更できることを示す */
.element {
cursor: row-resize;
}crosshair
十字線のカーソルが表示されます。画像編集ツールや地図など、正確な位置を指定する場面に使います。
/* 正確な位置を指定することを示す */
.element {
cursor: crosshair;
}まとめ
CSSのcursorプロパティを使うと、マウスカーソルのデザインを変更できます。
クリック可能・ドラッグ可能・読み込み中などを視覚的に伝えられるため、ユーザーが直感的に操作しやすくなるのがメリットです。
実際の操作内容に合ったカーソルを設定して、UI・UXの改善にお役立てください。
CSS関連のおすすめ記事
WordPressに慣れてくると、サイトのデザインをCSSでカスタマイズしたくなりますよね。この時最も気をつけておきたいのが、CSSの編集方法です。 特に、テーマのスタイルシートを直接編集するのは避けた方がよいでしょう。 当記事では、WordPressでCSSを編集する方法を4つご紹介し...
記事ごと、あるいはページ全体のカスタムCSSやScript、そしてHTMLに対応したWordPressプラグイン「Scripts n Styles」をご紹介します。 ショートコード化もできたりと、なかなかの高機能で使い所も広いです。 インストール方法 WordPressダッ...
WordPressテーマ集
コメント