CSSで”cursor: pointer”が効かない原因と対処方法を現役エンジニアが解説【初心者向け】
初心者向けにCSSで”cursor: pointer”が効かない原因と対処方法について解説しています。cursorプロパティによるマウスカーソル形状の変更の基本、pointerの適用が行われない場合の原因の例と対処方法を覚えましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査
CSSで”cursor: pointer”が効かない原因と対処方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。
そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まるでしょう。
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
今回は、CSSに関する内容だね!
どういう内容でしょうか?
“cursor: pointer”が効かない原因と対処方法について詳しく説明していくね!
お願いします!
目次
カーソル形状の変え方
ブラウザに表示された画面の内部や指定された要素に対してcursorプロパティを用いることによって、マウスポインタのカーソルの形状を変更できます。
ユーザーにとって、飽きがこないようにも多種多様のデザインが用意されていました。
通常時
リンクなどにマウスカーソルが乗せられた状態
入力装置などが稼働している状態
パソコンが処理中の状態
発見の可能性が示唆されている状態
その他にも『シグニファイア(Signifier)』を頼りに探してみましょう。
ブラウザによる違い
OS(オペレーティングシステム)のブラウザの種類によって、マウスポインタのカーソルの形状に若干の相違があります。
Mac
Windows
ポインターカーソルについて
ユーザーが、選択できることを前提として、標準的な状態で使用されています。
なお、標準以外の複数ある状態から、例として、二つ目の「ポインターカーソルを用いて文字(テキスト)が選択された状態」を掲載するものの、参考までに留めましょう。
ポインターカーソルの形状(標準的な状態)
ポインターカーソルを用いて文字(テキスト)が選択された状態
ポインターカーソルが効かない原因と対処法
標準の規定として、状態によってカーソルの形状が決まっている場合でも、CSS(Cascading Style Sheets: カスケーディング・スタイル・シート)にて、標準の定義から変更されている可能性があります。
他の同様の定義よりも優先順位を高めることや規定の適応を解除するための記述を追記することで、元に戻せることや適切な表示の形状に変更可能です。
なお、aタグやbuttonタグに定めるべき属性が未定義の場合やinputタグの属性によっては、標準的なポインターカーソルから変化していないことが多いです。
ポインターカーソルを使ってみよう
HTML
<a class="mouseon_cursor">aタグのボタン</a> <button class="mouseon_cursor">buttanタグのボタン</button> <input class="mouseon_cursor" type="button" value="ボタン">
CSS
.mouseon_cursor { cursor: pointer !important; }
動作結果
See the Pen
2020-07-25-sample01 by YOHEI INAI (@yohei_inai)
on CodePen.
執筆してくれたメンター
井内洋平
TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。 |
CSSで”cursor: pointer”が効かない原因と対処方法がよく分かりやすくて良かったです!
ゆかりちゃん、これからも分からないことがあったら質問してね!
分かりました。ありがとうございます!
TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。
挫折しない学習方法を知れる説明動画や現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。