10.1 cursorプロパティ
CSSはcursorプロパティを使って、要素にマウスオーバーした際のカーソルの見た目を変更する機能を提供してるよ。
このプロパティを使うと、様々なタイプのカーソルを設定できて、ウェブページのインタラクティブ性やビジュアルの魅力がアップするんだ。
cursorプロパティは、カーソルが要素の上にあるときの見た目を定義するんだ。値は、既定の物やカスタム画像を使うことができるよ。
構文:
element {
cursor: value;
}
値:
cursorプロパティはいろんな値をサポートしてて、既定のものとカスタムのものに分かれるんだ。
既定の値:
default: デフォルトのカーソルpointer: 手の形のカーソルで、通常リンクに使われるtext: テキストのカーソル（I型）で、通常テキストフィールドに使われるmove: 移動用のカーソルwait: 砂時計や待機中のインジケーターのカーソルhelp: クエスチョンマークの形のカーソルcrosshair: クロスヘアのカーソルnot-allowed: 禁止マークのカーソルgrabとgrabbing: ドラッグ用のカーソル
既定の値の使用例:
CSS
.default-cursor {
cursor: default;
padding: 10px;
border: 1px solid black;
}
.pointer-cursor {
cursor: pointer;
padding: 10px;
border: 1px solid black;
}
.text-cursor {
cursor: text;
padding: 10px;
border: 1px solid black;
}
HTML
<div class="default-cursor">デフォルトカーソル</div>
<div class="pointer-cursor">ポインターカーソル</div>
<div class="text-cursor">テキストカーソル</div>
10.2 カスタム値（カスタムカーソル）
cursorプロパティは、カスタム画像をカーソルとして使うこともできるんだ。これをやるには、url値を使うんだよ。
構文:
element {
cursor: url("custom-cursor.png"), fallback;
}
これの意味は:
url('custom-cursor.png'): カーソル画像のパスを指定するfallback: カスタム画像がロードできない場合に使われる既定の値
カスタムカーソルの使用例:
CSS
.custom-cursor {
cursor: url('https://via.placeholder.com/32'), auto;
padding: 10px;
border: 1px solid black;
}
HTML
<body>
<div class="custom-cursor">カスタムカーソル</div>
</body>
カスタムカーソルの仕様と制限:
- 画像フォーマット:
.cur,.png,.jpg,.gifがサポートされてる。 - 画像サイズ: パフォーマンスと互換性を考慮して、32x32ピクセル以下の画像を推奨してる。
- クリックポイントの座標: カーソル画像にクリックポイント(ホットスポット)の座標を指定できる。デフォルトは左上（0,0）だよ。
10.3 カスタムカーソルの詳細な使い方
画像フォーマット
カスタムカーソルはPNG、GIF、JPG、SVGなどのフォーマットに対応してるよ。背景のどんな色にもマッチするように、透明性をサポートするフォーマット（例: PNG）を使うのがオススメ。
画像サイズ
カーソル画像は大きすぎないほうがいいよ。オススメのサイズは32x32ピクセル以下だね。大きい画像は一部のブラウザで正しく表示されないことがあるんだ。
フォーカス座標の指定
画像のURLの後に追加の値を指定することで、カーソルのフォーカス（ホットスポット）の座標を指定することができるんだ。
構文
element {
cursor: url("custom-cursor.png") x y, fallback;
}
これの意味は:
xとy: 画像の左上からのフォーカス座標。
フォーカス座標つきの使用例:
CSS
.custom-cursor-focus {
cursor: url('https://via.placeholder.com/32') 16 16, auto;
padding: 10px;
border: 1px solid black;
}
HTML
<body>
<div class="custom-cursor-focus">フォーカス付きカスタムカーソル</div>
</body>
コードの説明:
.custom-cursor-focus: フォーカス座標が(16, 16)に設定されて、画像の中央がホットスポットになってるカスタムカーソルを設定してるんだ。
実用的な用途:
- UI/UXの改善: カスタムカーソルを使うと、ユーザーインターフェイスが直感的で美しくなるよ。
- インタラクティブな要素: ボタン、リンク、アイコンなどのインタラクティブな要素にカスタムカーソルを適用できるんだ。
- ゲームやアプリ: ゲームやウェブアプリでは、カスタムカーソルはユニークなスタイルと雰囲気を作り上げるのに役立つよ。
GO TO FULL VERSION