【遊び心】CSSでカーソルを画像に変更する方法を解説します。

2024年4月9日

※当サイトはアフィリエイト広告を利用しています

なやむくん

カーソルに遊び心を加えたいけどいい方法はないだろうか…

なやむさん

カーソルを違うものに変更したいけど指定方法が知りたい。

などの疑問や悩みを解決してまいります。

普段からデフォルトのカーソルであるため、あまり気にならないかもしれませんが、これがもし自分の好きな画像やアイコンなどに出来たら面白くないですか？

今回はCSSでカーソルを画像やアイコンに変更できる方法を解説します。

Webサイトに何か一つ遊び心を加えたいと思っている方は必見です。

カーソルの変更例

カーソルを常に画像にする場合は以下のようになります。

すみません、このページでは実際に確認ができないので、右上の「EDIT ON CODEPEN」をクリックして確認いただけます…！

See the Pen カーソルを画像に変更 by koutarou mori (@koutarou-mori) on CodePen.

また、要素ごとにアイコン画像を変更することもできます。

すみません、このページでは実際に確認ができないので、右上の「EDIT ON CODEPEN」をクリックして確認いただけます…！

See the Pen Untitled by koutarou mori (@koutarou-mori) on CodePen.

それでは解説していきます。

CSS解説

コードは以下のようになっています。

* {
    cursor: url('https://drive.google.com/uc?export=view&id=1fS238sUM2MGRzc0lirZcu_IvMgR70Jes'), auto;
  }

カーソルを画像に変更するにはcursorプロパティを使用します。

値にはurl('')を指定して表示したい画像を読み込みます。

* {
    cursor: url('読み込みたい画像のパスを指定'), auto;
  }

ポイント

カーソルに画像を指定する場合は、指定したいセレクタに対しcursor: url('読み込みたい画像パスを指定');

セレクタは全要素、*（アスタリスク）を指定しています。

*（アスタリスク）を指定することで常に指定した画像をカーソルとして使用することができます。

みつた

アスタリスクを指定したセレクタを「ユニバーサルセレクタ」ともいいます。

要素ごとにカーソルの画像を指定することもできます。

<body>
    <p class="strawberry">いちごです</p><!-- /.strawberry -->
    <p class="carrot">にんじんです</p><!-- /.carrot -->
    <p class="hotdog">ホットドッグです</p><!-- /.hotdog -->
</body>

/* いちご */
p.strawberry {
    cursor: url('いちごの画像を指定'), auto;
}
/* にんじん */
p.carrot {
    cursor: url('にんじんの画像を指定'), auto;
}
/* ホットドッグ */
p.hotdog {
    cursor: url('ホットドッグの画像を指定'), auto;
}

表示させたいセレクタに対してcursor: url('読み込みたい画像のパスを指定'), auto;を指定します。

みつた

指定する際はautoの指定を忘れないように注意してください。