記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

【CSS】cursorの基礎知識・使い方・カスタマイズ方法

cursorの基礎知識・指定できる値・オリジナル画像の指定方法を、初心者の方向けに紹介。 本記事一つで、基礎からカスタマイズの応用編まで全て網羅されています。 特に初心者の方に分かりやすいように、全ての項目を実例付きで紹介していますので安心して読みすすめることができます。

カテゴリ: HTML/CSS

こんにちは!
「cursorって形を変える事できるの・・?」「どんな形を指定できるの・・?」「cursorにオリジナル画像を指定できるの・・?」

cursorの形を変更して使ってみたい、オリジナル画像を指定してみたい、そのように考えている初心者web制作者の方も多いのではないでしょうか?

cursorを使いこなせることで、よりオリジナリティのあるwebサイトを作成する事ができます。

今回は、初心者の方向けに、「cursorの基礎知識」「cursorで指定できる値」「cursorにオリジナルの画像を指定する方法」を中心に詳しく解説していきます。

cursor

普段私たちが使っている「cursor」カーソルはさまざまな形に変更する事ができます。形を変更できるプロパティは多く用意されていて、自分の好みのものに変える事ができます。

今回は、様々な種類のカーソルを紹介していきます。

cursorの使い方

基本記述
cursor: 値;

値に何を入れるかで、カーソルの形を変更する事ができます。

cursorに指定できる値

auto(初期値)

初期値であり、状況に応じて自動で決まります。

auto↓
auto

default

defaultのカーソルを表示します。

default↓
default

pointer

指の形をしたカーソルが表示されます。

pointer↓
pointer

crosshair

十字マークのカーソルが表示されます。

crosshair↓
crosshair

move

十字の移動カーソルが表示されます。

move↓
move

text

テキスト用のカーソルが表示されます。

text↓
text

wait

待機状態の丸いカーソルか砂時計が表示されます。

wait↓
wait

progress

矢印+待機状態の丸いカーソルが表示されます。

progress↓
progress

help

クエスチョンのヘルプマークカーソルが表示されます。

help↓
help

n-resize

上へのリサイズカーソルが表示されます。

n-resize↓
n-resize

e-resize

右へのリサイズカーソルが表示されます。

e-resize↓
e-resize

s-resize

下へのリサイズカーソルが表示されます。

s-resize↓
s-resize

w-resize

左へのリサイズカーソルが表示されます。

w-resize↓
w-resize

ne-resize

右上へのリサイズカーソルが表示されます。

ne-resize↓
ne-resize

se-resize

右下へのリサイズカーソルが表示されます。

se-resize↓
se-resize

sw-resize

左下へのリサイズカーソルが表示されます。

sw-resize↓
sw-resize

nw-resize

左上へのリサイズカーソルが表示されます。

nw-resize↓
nw-resize

col-resize

横幅変更のカーソルが表示されます。

col-resize↓
col-resize

row-resize

高さ変更のカーソルが表示されます。

row-resize↓
row-resize

copy

コピーができることを表す。矢印とプラスカーソルが表示されます。

copy↓
copy

no-drop

ドロップできないことを表す。矢印と禁止カーソルが表示されます。

no-drop↓
no-drop

zoom-in

拡大できることを表す。+と虫眼鏡カーソルが表示されます。

zoom-in↓
zoom-in

zoom-out

縮小できることを表す。-と虫眼鏡カーソルが表示されます

zoom-out↓
zoom-out

not-allowed

操作禁止を表す。矢印と禁止マークカーソルが表示されます

not-allowed↓
not-allowed

none

カーソルが非表示になります。

none↓
none

alias

ショートカットを表す。ショートカットカーソルが表示されます

alias↓
alias

grab

activeで使われます。つかむカーソルが表示されます。

grab↓
grab

grabbing

activeで使われます。つかんだカーソルが表示されます。 上記とセットで使用される事が多いです。

grabbing↓
grabbing

context-menu

矢印とメニューアイコンカーソルが表示されます。

context-menu↓
context-menu

カーソルをオリジナル画像にカスタマイズ

画像を指定しオリジナルのカーソルを作ることができます。

基本記述は
cursor: url(画像パス), auto;

cursor: url(画像パス)の後に、「, auto」を指定しているのは、画像が表示できない場合に、カーソルの表示オプションを指定しています。
今回はautoを指定したので、画像が表示されない場合は「auto」が指定されたカーソルが表示されます。

オリジナル画像を用意し、指定してみてください。
注意点として画像の大きさは、32px×32px以内でないと表示されない事があります。

オリジナル画像↓
オリジナル画像

hoverと合わせて使用

hoverとは要素の上にカーソルを合わせた時、要素のスタイル変化を指定できる擬似クラスことです。

ボタン背景文字色変化+カーソル変化

サンプルコード表示結果↓
リンク

HTMLサンプルコード

CSSサンプルコード

※解説
ボタンの背景・文字色の変化に加えてカーソルも変化させる事で、よりインパクを出す事ができています。

ボタン背景文字色変化+お好みの画像

サンプルコード表示結果↓
リンク

HTMLサンプルコード

CSSサンプルコード

カーソルの変化、ボタンの変化を組み合わせることで、よりオリジナリティのあるwebサイトを作成する事ができます。
ぜひチャレンジしてみてください。

まとめ

今回は初心者の方向けに「cursorの基礎知識」「cursorで指定できる値」「cursorにオリジナルの画像を指定する方法」を中心に詳しく解説してきまいした。

1.cursorの基本記述は
cursor: 値;

2.カーソルに指定できる値

内容
auto(初期値) 初期値であり、状況に応じて自動で決まります。
default defaultのカーソルを表示します。
pointer 指の形をしたカーソルが表示されます。
crosshair 十字マークのカーソルが表示されます
move 十字の移動カーソルが表示されます
text テキスト用のカーソルが表示されます。
wait 待機状態の丸いカーソルが表示されます。
progress 矢印+待機状態の丸いカーソルが表示されます。
help クエスチョンのヘルプマークカーソルが表示されます。
n-resize 上へのリサイズカーソルが表示されます。
e-resize 右へのリサイズカーソルが表示されます。
s-resize 下へのリサイズカーソルが表示されます。
w-resize 左へのリサイズカーソルが表示されま
ne-resize 右上へのリサイズカーソルが表示されます。
se-resize 右下へのリサイズカーソルが表示されます。
sw-resize 左下へのリサイズカーソルが表示されます。
nw-resize 左上へのリサイズカーソルが表示されます。
col-resize 横幅変更のカーソルが表示されます
row-resize 高さ変更のカーソルが表示され
copy コピーができることを表す。矢印とプラスカーソルが表示されます。
no-drop ドロップできないことを表す。矢印と禁止カーソルが表示されます。
zoom-in 拡大できることを表す。+と虫眼鏡カーソルが表示されます
zoom-out 縮小できることを表す。-と虫眼鏡カーソルが表示されます。
not-allowed 操作禁止を表す。矢印と禁止マークカーソルが表示されます。
none カーソルが非表示になります。
alias ショートカットを表す。ショートカットカーソルが表示されます。
grab activeで使われます。つかむカーソルが表示されます。
grabbing activeで使われます。つかんだカーソルが表示されます。上記とセットで使用される事が多いです。
context-menu 矢印とメニューアイコンカーソルが表示されます。

3.オリジナル画像をカーソルに指定するには
cursor: url(画像パス), auto;

いかがだったでしょうか?
cursorを使いこなせることで、よりオリジナリティのあるwebサイトを作成する事ができます。
本記事を参考にしていただけたら幸いです。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

minweb編集部(株)セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

Googleアナリティクス使い倒し活用術  <AKAHON>

ダウンロード資料画像

「毎日、数値をみているけどどこをどうやって改善すれば良いのかわからない」

「Google analyticsを導入して、自社サイトのパフォーマンスを上げて欲しいといわれたけど、何をどうすればいいのかわからない」

「Web以外にも担当を兼任していて、アクセス解析に多くの時間をついやすことができない」

上記のような思いをお持ちのWeb担当者の方にはお役に立てる一冊です。

Googleアナリティクス初心者の方でも使いこなせるように、導入方法や用語、やっておきたい初期設定から具体的な活用方法まで丁寧に解説します。