【CSS】 cursorの基本の使い方、cursor形状の変え方とcursor形状の一覧｜HTML＆CSS入門講座（17）のPodcast
下記のPodcastは、Geminiで作成しました。
ストーリーブック
はじめに
ウェブサイトを閲覧しているとき、リンクの上にマウスを置くと矢印が「指のマーク」に変わったり、文章を選択しようとすると「I字型」に変わったりすることに気づいたことはありませんか？このように、マウスカーソル（ポインター）の形状を変化させることで、ユーザーに「ここはクリックできますよ」「ここは文字が入力できますよ」といったメッセージを伝えることができます。CSSのcursorプロパティを使えば、初心者の方でも簡単にこの形状をコントロールすることができます。本記事では、基本的な使い方から、最新のCSS User Interface Module Level 4に基づく詳細な仕様、転じて2026年に向けた最新のトレンドまで、分かりやすく丁寧に解説していきます。
cursorプロパティの役割と重要性
ウェブデザインにおいて、視覚的なフィードバックは「ユーザー体験（UX）」を向上させるための非常に重要な要素です。マウスカーソルの形状が変わることは、ユーザーに対する「非言語的なサイン」として機能します。例えば、ボタンの上にカーソルを置いても形状が変わらない場合、ユーザーはそのボタンが本当にクリックできるのか不安に感じてしまいます。適切なカーソルを設定することで、直感的で迷いのない操作環境を提供できるのです `[1]`。
cursorプロパティの基本的な使い方
cursorプロパティの指定方法はとてもシンプルです。形状を変えたい要素に対して、CSSで以下のように記述します。
css
/* セレクタに対してプロパティと値を指定します */
.example {
cursor: pointer; /* 指差しマークに変更 */
}この「値」の部分にキーワードを記述することで、さまざまな形状を呼び出すことができます。
指定できる場所
HTMLのあらゆる要素に指定可能です。`<a>`タグや`<button>`タグだけでなく、`<div>`や`<span>`、あるいはページ全体を指す`<body>`タグに対しても設定できます `[3]`。
cursor形状のキーワード一覧
CSSで利用できる標準的なカーソル形状は、その役割ごとにカテゴリ分けされています。ここでは、実務でよく使われるものを中心に紹介します `[1]`。
一般的な状態（General）
システムの標準的な状態を示すためのカーソルです。
| 値 | 形状の説明 | 主な用途 |
|---|---|---|
| auto | ブラウザの自動設定 | 文脈に応じてブラウザが最適な形状を選びます（初期値） |
| default | 標準の矢印 | プラットフォーム標準のポインターです |
| none | 非表示 | 動画再生中や全画面ゲームなどでカーソルを隠します |
リンクとステータス（Links & status）
インタラクションや処理状況を伝えます。
| 値 | 形状の説明 | 主な用途 |
|---|---|---|
| pointer | 指差しマーク | リンクやボタンなど、クリック可能な要素 `[7]` |
| help | ヘルプ | 疑問符などが付いた形状。補助情報がある場所 |
| wait | 待機 | 砂時計や回転する円。操作できないほど忙しい状態 |
| progress | 進行中 | 矢印と回転。処理中だが、他の操作は可能な状態 |
| context-menu | メニュー | 右クリックでメニューが出ることを示唆します |
テキストの選択（Selection）
文字情報の操作に関するポインターです。
| 値 | 形状の説明 | 主な用途 |
|---|---|---|
| text | Iビーム（縦棒） | テキストが選択可能であることを示します |
| vertical-text | 横向きのIビーム | 縦書きのテキストを選択する際に使われます |
| cell | セル | 表のセルを選択するような格子状の選択範囲 |
| crosshair | 十字 | 精密な位置指定や、画像の範囲選択に適しています |
移動とドラッグ（Drag & drop）
要素を動かす際のアフォーダンスを提供します `[2]`。
| 値 | 形状の説明 | 主な用途 |
|---|---|---|
| move | 四方向の矢印 | 要素が移動可能であることを示します |
| grab | 開いた手 | 掴む（ドラッグ開始前）ことができる状態 |
| grabbing | 握った手 | 現在掴んでいる（ドラッグ中）であることを示します |
| not-allowed | 禁止マーク | 円に斜線のマーク。その操作が許可されていないことを示します |
| no-drop | ドロップ不可 | ドラッグ中のアイテムをそこには置けないことを示します |
サイズ変更（Resizing）
ウィンドウや要素の端をドラッグして大きさを変える際に使用します `[6]`。
n-resize / s-resize：上下方向（北/南）
e-resize / w-resize：左右方向（東/西）
ne-resize / nw-resize：対角線方向
col-resize：列（カラム）の幅調整
row-resize：行（ロウ）の高さ調整
拡大・縮小（Zooming）
画像の拡大表示などが可能な場合に便利です。
zoom-in：プラスマーク付きの虫眼鏡
zoom-out：マイナスマーク付きの虫眼鏡
独自の画像を使う「カスタムカーソル」
標準の形状だけでなく、オリジナルの画像（PNGやSVGなど）をカーソルとして使うことも可能です。これを「カスタムカーソル」と呼びます `[3]`。
基本の書き方
url()関数を使って画像のパスを指定します。ここで最も重要なルールは、最後に必ず「キーワード（autoなど）」を記述しなければならないという点です `[6]`。
css
.custom {
/* 画像を読み込めない時のために、最後に必ずキーワードを置く */
cursor: url("my-cursor.png"), auto;
}キーワードを忘れると、プロパティ全体の指定が無効になってしまうので注意しましょう。
ホットスポット（作用点）の設定
カスタム画像を使う場合、画像のどの位置が「クリック地点」になるかを数値で指定できます。これをホットスポットと呼びます `[6]`。
css
/* 画像の左上から「横に10px、縦に10px」の位置をクリック地点にする */
cursor: url("cursor.png") 10 10, pointer;指定しない場合は、通常は画像の左上（0 0）が作用点になります。
推奨される画像サイズと形式
サイズ: 32×32ピクセル以内が推奨されます。ブラウザの制限により、128×128ピクセルを超える大きな画像は無視されることがあります `[6]`。
形式: 背景が透過できるPNG形式や、高解像度ディスプレイでも綺麗なSVG形式が一般的です `[3]`。
2026年に向けた最新の技術動向とデザイン
ウェブ技術は日々進化しており、カーソルのあり方も変化しています。現在の標準であるCSS Basic User Interface Module Level 4の内容と、2026年に重要視されるトレンドを紹介します。
CSS UI Level 4 の普及
最新の仕様では、grabやgrabbingといった値が正式にサポートされ、主要なすべてのデスクトップブラウザで安定して動作する「Baseline」ステータスとなっています `[12]`。モバイル端末においては、iPadなどで外部マウスを接続した場合の挙動も細かく定義されるようになっています `[6]`。
2026年のトレンド：マルチモーダルとAI
2026年のUI/UXデザインでは、マウス、タッチ、音声、視線を組み合わせた「マルチモーダル・インターフェース」が主流になります `[14]`。
AIによる動的変化（GenUI）: 生成AIがユーザーの習熟度を判断し、初心者の場合には操作をガイドするような特殊なカーソル形状をリアルタイムで生成し、提示する技術が登場しています `[14]`。
空間的UI（Spatial UI）: AR/VRの普及により、2次元の画面だけでなく「奥行き」を感じさせるカーソル表現（要素に近づくと光る、影が変化するなど）が求められています `[14]`。
アクセシビリティへの配慮（WCAG 2.2）
すべての人に使いやすいウェブサイトを作るために、アクセシビリティの視点は欠かせません。最新のガイドライン（WCAG 2.2）に基づいた注意点を解説します `[16]`。
コントラストの確保
カスタムカーソルを使用する場合、背景色と同化して見失わないように、十分なコントラスト（色の対比）を持たせる必要があります `[17]`。特に弱視のユーザーにとって、カーソルを見失うことは致命的なストレスになります。
prefers-reduced-motion の尊重
OSのアニメーション抑制設定をオンにしているユーザーに対しては、激しく動くカスタムカーソルやアニメーション効果を無効化すべきです `[19]`。
css
@media (prefers-reduced-motion: reduce) {
.animated-cursor {
cursor: auto; /* 動きのあるカーソルを標準に戻す */
}
}誤解を招く指定を避ける
「クリックできない場所にpointerを使う」といった、ユーザーを騙すような設定は絶対に避けましょう `[2]`。これはUXを損なうだけでなく、認知的な混乱を招き、アクセシビリティ上の問題となります。
実装でよくある失敗と解決策
「CSSを書いたのにカーソルが変わらない！」というときは、以下のポイントをチェックしてみてください `[8]`。
フォールバックの欠落: カスタムカーソルの最後にキーワード（autoなど）が入っていますか？
pointer-eventsプロパティ: その要素にpointer-events: none;が指定されていませんか？この指定があるとマウスイベントを受け取らなくなります `[22]`。
重なりの順序（z-index）: 透明な要素が前面を覆っていませんか？デベロッパーツールで確認しましょう。
画像パスのミス: 画像のURLが正しいか、コンソールにエラーが出ていないか確認してください。
まとめ
CSSのcursorプロパティは、たった一行のコードでユーザーの利便性を劇的に向上させることができる、非常にコストパフォーマンスの高い機能です。まずは標準的なキーワードを正しく使い分け、ユーザーが直感的に操作できる環境を整えましょう。その上で、サイトの世界観を表現するためにカスタムカーソルを取り入れる際は、サイズ制限やアクセシビリティ、最新のブラウザ仕様に配慮することを忘れないでください。2026年に向けた新しい技術も取り入れつつ、ユーザーに優しく、そしてワクワクするようなウェブ体験を構築していきましょう。
参考資料
1. CSS cursor property MDN Web Docs, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/cursor
2. CSS Basic User Interface Module Level 4 (W3C Working Draft), https://www.w3.org/TR/css-ui-4/
3. A guide to the CSS cursor property (LogRocket Blog), https://blog.logrocket.com/custom-cursor-css/
4. WCAG 2.2 Overview and Feedback (WebAIM), https://webaim.org/blog/wcag-2-2-overview-and-feedback/
5. prefers-reduced-motion CSS media feature MDN Web Docs, https://developer.mozilla.org/en-US/docs/Web/CSS/At-rules/@media/prefers-reduced-motion
6. Latest UI UX Design Trends 2026 (AND Academy), https://www.andacademy.com/resources/blog/ui-ux-design/latest-ui-ux-design-trends/
7. The top UX design trends in 2026 (UX Design Institute), https://www.uxdesigninstitute.com/blog/the-top-ux-design-trends-in-2026/
8. CSS pointer-events property MDN Web Docs, https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/pointer-events
9. Cross Browser Cursors usage and considerations, https://browseemall.com/cross-browser-cursors-2/
10. CSS Property: cursor (HTML Dog), https://www.htmldog.com/references/css/properties/cursor/
コメント