【実例付】cssのcursorを使いこなそう｜基本から注意点まで

（最終更新日：2023年9月）

✔当記事は以下のような方に向けて書かれています

「CSSカーソルの設定方法を知りたい」
「CSSでカーソルの種類を変更する方法がわからない」
「CSSカーソル変更の具体例が見たい」

✔当記事でお伝えする内容

• CSSカーソルの基本概念
• カーソル変更の書き方や応用例
• CSSカーソル設定の実例

当記事では、CSSカーソルの基本から、さまざまなカーソルの設定方法や実践例について、具体的に解説しています。

最後までお読みいただくことで、CSSカーソルを効果的に活用するための知識を身につけられるでしょう。

ぜひご覧ください。

cursorプロパティの基礎

こちらでは、CSSとカーソルの役割など、基本的な事項について解説します。

確認の意味も含めて、一度目を通したうえで先へ進みましょう。

• CSSとカーソルの役割
• 「CSS cursor」とは
• cursorプロパティの構文と値

CSSとカーソルの役割

CSS (Cascading Style Sheets) は、HTML要素の見た目を制御するための言語です。

カラーやフォント、レイアウトなど、ウェブページのデザイン全般を規定します。

その中でも、カーソルはユーザーとウェブサイトとの対話において重要な要素です。

カーソルの形状や動きは、ユーザーがどのようにウェブサイトを操作するか、また現在何が起こっているのかを視覚的に伝えます。

「CSS cursor」とは何か簡単に紹介

CSS cursorは、ウェブサイト上でマウスカーソルが何を示しているかをユーザーに伝える役割を果たす重要なプロパティです。

例えば、リンク上でカーソルがポインタ（指を示すカーソル）に変わると、ユーザーはそれがクリック可能な要素であると理解します。

cursorは、ユーザーの視覚的なフィードバックとして機能し、インタラクティブなウェブ体験を提供するのです。

cursorプロパティの構文と値

CSSのcursorプロパティは、要素上でのマウスポインタの表示方法を定義するために使用されます。

基本的な構文は次のとおりです。

element {
  cursor: value;
}

elementはマウスポインタの表示を変更したい要素を指し、valueはその要素に適用するカーソルタイプを指定します。

以下に、cursorプロパティで指定できる主な値をいくつか示します。

• auto: ブラウザが適切なカーソルを自動で決定
• default: システムのデフォルトカーソル（通常は矢印）を使用
• none: カーソルを表示しません。
• pointer: リンクを示す手形のカーソルを表示します。
• text: テキスト選択を示すI字型のカーソルを表示します。
• crosshair: 十字型のカーソルを表示します。
• move: 移動可能を示す4方向の矢印を表示します。

これらは一部の例で、cursorプロパティには他にも多くの値を指定できます。

これらを適切に使い分けることで、ユーザー体験を向上させられます。

カーソル種類の設定と例

こちらでは、よく使われるcursorプロパティの値と、それぞれのカーソルがどのような状況で使用されるかを紹介します。

ブラウザ間の対応状況と注意点についても見ていきましょう。

• よく使われるcursorプロパティの値の紹介と実践例
• ブラウザごとの対応状況と注意点

よく使われるcursorプロパティの値の紹介と実践例

よく使われるcursorプロパティの値として、以下が挙げられます。

• default
• none
• pointer
• text
• crosshair
• move

これらをどのように使用するか具体的な例を以下に示します。

default

この値は、特にカーソルを指定しない場合や、ユーザーが何も操作していないときに使用。

例えば、body要素全体に適用することで、ページ全体のデフォルトカーソルを設定できます。

body {
  cursor: default;
}

none

この値は、カーソルを隠す必要がある場合に使われるもの。

例えば、全画面表示のビデオプレーヤーや、ゲームなどでカーソルの視覚的な邪魔を避けるために利用できます。

.fullscreen {
  cursor: none;
}

pointer

ユーザーがクリック可能な要素（リンクやボタンなど）にマウスを乗せたときに表示される手の形をしたカーソルです。

これにより、要素がインタラクティブであることをユーザーに示します。

.button {
  cursor: pointer;
}

text

テキスト領域（input要素やtextarea要素など）にマウスが乗ったときに表示されるもの。

これにより、テキストが選択可能または入力可能であることをユーザーに示します。

.input {
  cursor: text;
}

crosshair

画像のクロップやキャンバス上での精密な配置など、正確な位置を要求する作業に便利です。

.canvas {
  cursor: crosshair;
}

move

ドラッグアンドドロップ操作が可能な要素を示すために使用します。

.draggable {
  cursor: move;
}

ブラウザごとの対応状況と注意点

新しいcursor値を使用するときは、対象となるブラウザやデバイスの対応状況を確認しましょう。

理由は以下のとおりです。

• 全てのブラウザが、全てのcursor値をサポートしているわけではない
• スマートフォンやタブレットなどでは、マウスポインタが存在しない

例えば、一部の古いブラウザでは、カスタムカーソルや特定のカーソル形状（zoom-in、zoom-outなど）をサポートしていない場合があります。

したがって、ウェブサイトのユーザビリティを最適化するためには、デバイスの種類やブラウザの違いを考慮に入れることが重要です。

カスタムカーソルの実装

こちらでは、カスタムカーソルの設定方法と使用上の注意事項を詳しく解説します。

• カスタムカーソルの設定方法
• 使用上の注意事項

カスタムカーソルの設定方法

ウェブサイトが特定のブランドやテーマに密接に関連している場合、カスタムカーソルを使用してその体験をさらにパーソナライズすることが可能です。

あなたのウェブサイトがほかのウェブサイトと差別化するための有効な方法です。

ユーザーにとって記憶に残るユニークな体験を提供できます。

カスタムカーソルを設定するには、cursorプロパティの値としてURL関数を使用し、カーソルとして使用する画像のURLを指定してください。

これは次のように動作します。

.custom-cursor {
  cursor: url("custom-cursor.png"), auto;
}

“custom-cursor.png”という名前の画像ファイルがカーソルとして設定されています。

また、”auto”という値が2番目に指定されているのは、カスタムカーソルの画像が読み込めなかったときのフォールバック（代替手段）として機能させるためです。

ただし、カスタムカーソル画像の大きさは通常32×32ピクセルに制限されています。

それ以上の大きさの画像を指定した場合、ブラウザによっては自動的に縮小される可能性があります。

使用上の注意事項

カスタムカーソルを使用する際には、いくつかの注意点があります。

• 大きさ
  カスタムカーソルの画像サイズは通常32×32ピクセルに制限。それ以上の大きさの画像を指定した場合、ブラウザによっては自動的に縮小される可能性があります。
• ユーザービリティ
  カスタムカーソルはユーザビリティとアクセシビリティに影響を与える可能性があります。一部のユーザーは、標準的なカーソル形状から逸脱したカスタムカーソルを混乱させると感じるかもしれません。
• デザイン
  視覚的に目立つカーソルは、一部のユーザーにとっては過度に気を散らす可能性があります。
• 対応ブラウザ・デバイス
  カスタムカーソルは、すべてのブラウザで一貫してサポートされているわけではありません。

カスタムカーソルを設計するときは、それが全体的なユーザ体験にどのようにフィットするかを慎重に考慮しましょう。

カスタムカーソルを使用するときは、あらゆる環境で適切に動作するかをテストすることが重要です。

実践！カーソルデザインの応用例

こちらでは、効果的なカーソルデザインのポイントと実装例をご紹介します。

良いカーソルデザインは、ユーザビリティを高め、ユーザーのウェブサイト内での移動を助け、全体的な体験を向上させられるのです。

一般的に、カーソルデザインは次の点を考慮すると良いです。

1. カーソルは、その瞬間にユーザーが行える操作を示すべきです。
   例えば、リンクやボタン上にカーソルがあるときは、それがクリック可能であることを示すべきです。
2. カーソルは、ユーザーが何をしているのか、または何が起こるのかを予測するのに役立つべきです。
   例えば、要素がドラッグ可能であることを示すカーソルは、ユーザーが要素を移動させることができることを示します。
3. カスタムカーソルを使用する場合は、それがウェブサイトの全体的なデザインと一致していることを確認してください。
   一貫性のあるデザインは、ユーザーにとってより直感的で使いやすいです。

まとめ

当記事では、「CSS cursor」を使ったカーソルデザインについて詳しく解説しました。

「CSS cursor」を使うことで、ユーザビリティを高め、ユーザーに対して操作可能な要素を明示し、ユーザーの行動を導けます。

また、カスタムカーソルを使用することで、ウェブサイトをほかのサイトと差別化し、ユーザーにとって記憶に残る体験を提供することが可能です。

注意点を理解のうえ、より良いユーザビリティを目指して、CSS cursorをマスターしてください。