文字

CSSで変更できるマウスカーソル絵一覧
公開:2019.09.21 更新:2020.05.09

こんにちは、らいどらです。

先日サイトを回覧している時、マウスカーソルの形が思うように変わっていないのに気づきました。あの大文字のI型の奴です。

調べてみると、きちんとCSSで指定しないとだめだということが分かりました。自動でやってくれるわけでは無かったのですね……。

という訳で、今回はCSSで変更可能なマウスカーソルの種類を調べて一覧化してみました。

ではやっていきます!!

cursorプロパティ

カーソルの形を変えるには、CSSの[cursor]プロパティを使います。その後ろに指定する値によって、カーソルの形が変わります。以下が一覧です。

cursorに与える値

alias

all-scroll

alias

allscroll

auto

cell

col-resize

context-menu

copy

crosshair

default

e-resize

ew-resize

grab

grabbing

help

inhirit

initial

move

n-resize

ne-resize

nesw-resize

no-drop

none

not-arrowed

ns-resize

nw-resize

nwse-resize

pointer

progress

row-resize

s-resize

se-resize

sw-resize

text

unset

vertical-text

w-resize

wait

zoom-in

zoom-out

-webkit-grab

-webkit-grabbing

-webkit-zoom-in

-webkit-zoom-out

※調査にはchromeの検証機能を用いました。これで全てという保証はありませんのでご理解ください。

はい!今回調べる限りでは以上です!

見ると、ああ、これ!ってなる奴がいくつもあって楽しかったです(笑)

私の場合はソースコードエリアにカーソルが入った時にI型にしたいだけだったのですが、かなりの量を調べてしまいました…….。

特にロード中を示す青いクルクル。あれが指定できるとは……。サイト全体に指定しておけば、見る人を常にイラつかせるサイトの完成ですね(鬼)。まあそんな酷いことしないですが(笑)

皆さんもサイト制作の際には、用途に応じて正しいカーソルを指定できるようになっておきましょう!

それでは!

おすすめ商品

一から勉強する際に使った教材

持っていると便利なHTML&CSS辞典

コメント

内容をご確認の上、送信してください。