CSSでpointerを使うには?cursorが効かないときの対処法や注意点も解説
「カーソル表示を変えたいけどやり方がわからない」「CSSのpointerが効かない」
そんな悩みはありませんか?
Webサイトでは、リンクにマウスカーソルを乗せるとカーソル表示が、指差しマークに変化しますよね。
このような表示の変化は、CSSのcursorプロパティで指定することができます。
今回は、マウスカーソルの表示方法を設定したい、という方のために
- 「cursor: pointer」とは
- ポインターにならないときの対処法
以上の項目に沿って、解説していきますね。
この記事を読めば、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サイトを作成する上で、今回の記事が参考になれば幸いです。
\プログラミングスクールを比較/
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
---|---|---|---|
目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
分割払い | ○ | ○ | ○ |
補助金 | ○ | × | ○ |
転職保証 | ○ | × | × |
受講期間 | 12週間〜 | 3ヶ月〜 | 5ヶ月〜 |
特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間(約9カ月)のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
公式HP |
公式HP |
公式HP |