CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使ってカスタムカーソルを作成する方法を解説

CSSでは、独自のカーソル画像を作成してWebページ上の要素に適用することができます。対応する画像形式は、.cur（Internet Explorer向け）、.gifや.png（Chrome・Firefox・Safariなどモダンブラウザ向け）です。適用にはCSSの cursor プロパティを使用し、値として url() でカーソル画像へのパスを指定します。その際、フォールバックとして auto や default、pointer といった一般的なカーソル値も併せて指定しておくのがポイントです。

基本的な書き方

カスタムカーソルは以下のような構文で定義します。

セレクタ {
    cursor: url("/* カスタムカーソルファイルへのパス */"), 汎用カーソル;
}

url() で指定した画像が読み込めなかった場合に備えて、カンマ区切りで汎用のカーソル値を必ず指定しましょう。これにより、ブラウザや環境に依存せず安定した表示を実現できます。

実装例

それでは、実際のコード例を見ていきましょう。ここでは2つのボタンに、それぞれ異なるPNG画像をカーソルとして設定しています。

<!DOCTYPE html>
<html>
<head>
<title>Custom Cursor Using CSS</title>
<style>
form {
    width:70%;
    margin: 0 auto;
    text-align: center;
}
* {
    padding: 2px;
    margin:5px;
}
input[type="button"] {
    border-radius: 10px;
}
#tech1 {
    cursor: url("https://www.tutorialspoint.com/images/dbms.png"), auto;
}
#tech2 {
    cursor: url("https://www.tutorialspoint.com/images/Python.png"), auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Custom Cursor Using CSS</legend>
<h1>Learn</h1>
<input type="button" id="tech1" value="DBMS">
<input type="button" id="tech2" value="Python">
</fieldset>
</form>
</body></html>

実行結果

上記コードの出力結果は以下のとおりです。

「DBMS」ボタンにマウスを重ねた場合：

CSSを使ってカスタムカーソルを作成する方法を解説

「Python」ボタンにマウスを重ねた場合：

CSSを使ってカスタムカーソルを作成する方法を解説

このように、ボタンごとに異なるカーソル画像を設定することで、視覚的にわかりやすいユーザーインターフェースを作り出すことができます。なお、カーソル画像はサイズが大きすぎると正常に表示されない場合があるため、32×32px程度までに抑えておくのがおすすめです。

  1. CSSのclip-pathでテキスト入りのコメントボックス（吹き出し）を作成する方法

    CSSのclip-pathプロパティを活用することで、吹き出しのようなコメントボックスを作成できます。画像ファイルに頼らずCSSだけで完結するため、軽量でメンテナンス性が高く、デザインの調整も容易です。 clip-pathプロパティの基本構文 clip-pathは、要素の表示範囲を切り抜く（クリップする）ためのプロパティです。基本的な構文は以下のとおりです。 Selector {    clip-path: /*値*/; } polygon()関数を使うと、複数の座標点を指定して三角形などの多角形を描画できます。この仕組みを利用して、コメントボックスの下に付ける「しっ

  2. CSSを使ってWebサイトにダークモード／ライトモードを実装する方法

    ページの文字色（color）と背景色（background-color）を切り替えるだけで、Webサイトにダークモード／ライトモード機能を簡単に追加できます。本記事では、CSSと少量のJavaScriptを組み合わせて、ボタン操作で表示モードを切り替える実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。 基本の構文 ダークモードを適用する場合は、次のような構文を使用します。セレクターに対して文字色を白、背景色を黒に指定することで、暗い環境でも視認性の高い表示を実現できます。 Selector {    color: white;   &nbs