CSSでpointerを使うには？cursorが効かないときの対処法や注意点も解説

「カーソル表示を変えたいけどやり方がわからない」「CSSのpointerが効かない」

そんな悩みはありませんか？

Webサイトでは、リンクにマウスカーソルを乗せるとカーソル表示が、指差しマークに変化しますよね。

このような表示の変化は、CSSのcursorプロパティで指定することができます。

今回は、マウスカーソルの表示方法を設定したい、という方のために

以上の項目に沿って、解説していきますね。

この記事を読めば、CSSのpointerを使って、マウスカーソルの表示を変更することができるようになりますよ。

ぜひ最後まで読んでくださいね！

cursorプロパティとは？

カーソルの表示を変化させるには、CSSのcursorプロパティを使用します。

具体的には以下のように記述します。

p{
cursor: pointer;
}

上記では、p要素にマウスを乗せたときに、カーソルがポインターに変化します。

リンクなどでよく見かける指差しマークは、このポインターのことです。

初期値は「cursor: auto」となり、この状態では、状況に応じてブラウザが自動的に指定します。

何も指定していなくとも、リンクなどでカーソルの表示が変化するのは、ブラウザが選択を行っているためです。

他にも「crosshair（十字カーソル）」や「help（ヘルプカーソル）」など、多くの値があります。

ただし、不適切な場所でカーソルの表示を変化させてしまうと、閲覧者を混乱させ、サイトのユーザビリティが下がってしまいます。

「直感的にどのような操作をするべきなのか誘導する表示」を選ぶことが大事ですね。

必要以上の設定はしないようにしましょう。

pointerが効かないときの対処法

先ほど説明したように、ブラウザが自動的にカーソルの形を決めている場合があります。

「cursor:pointer」が効かないときには、ブラウザが指定したcursorプロパティを上書きする必要があります。

各ブラウザのデベロッパーツールを見るなどして、カーソル表示を変えたい要素のCSSがどうなっているのか確認しましょう。

また、a要素やbutton要素などで、必須となる属性が定義されていない場合に、一部CSSが適用されないことがあります。

要素の属性も確認してみてください。

まとめ：CSSのpointerでカーソル表示がポインターに

今回は、CSSのcursorプロパティでカーソル表示を指定する方法を解説してきました。

cursorプロパティで「pointer」を指定すると、カーソルがデフォルトの表示からポインターに変化するということでした。

ポインター以外にも様々な設定がありますが、適切に選択することが大事です。

Webサイトを作成する上で、今回の記事が参考になれば幸いです。