CSS cursorでマウスカーソルの形を指マークにする

CSSのcursorとは?

CSSでcursorを使うと、マウスカーソルが要素にあたった時に指マークなどに変えることが出来ます。

CSSのcursorを使うと、マウスカーソルの形(種類)を変えることが出来ます。

合わせて読みたい

\ CSSについてわからない人は、下記記事で解説しています!参考にどうぞ /

\ CSS cursorのその他の種類を知りたい場合、下記のページでまとめているのでぜひ見てみてください /

CSSで指マークのcursorへ変更する方法

カーソルを変更するには、CSSプロパティの1つcursor: pointer;を使います。具体的にどのように使うのか、下記に使用例を出します。

もう、ほとんど対応しなくても大丈夫になりましたが、IE6にも対応する場合は、cursor: hand;も設定するようにしましょう。

指マークを使ってボタンを作る

注意

cursor: pointer;を使って、何か要素を作成しようとしていると思います。しかし、それはよく考え直したほうがいいかもしれません。

そ言うのも、そもそも、cursor: pointer;の使い所は「ユーザーがその部分をクリックできるかわかるようにする」という部分だと思います。 逆に、それ以外の部分にcursor: pointer;を使うと、かえってユーザーを混乱させてしまいます。

さらに、クリックする部分には、HTMLの<a> <button>などの専用の要素が用意されています。cursor: pointer;使う場面なそれほど多くはなく、<a> <button>を使って事足りるのであれば、その方がいいのです。

その上で、「divやspanを使ってクリック出来るように見える要素を作りたい!」と考えているのなら、cursor: pointer;を使いましょう。

指マークをつかってボタンを作るには、下記のような手順で作成します。

  1. <div>を使ってボタンテキストを囲む
  2. <div>をボタンに見えるようにスタイルを設定する
  3. cursor: pointer;を設定する

以上です。

順番に解説していきます。

<div>を使ってボタンテキストを囲む

まずは、<div>を使ってボタンテキストを囲んで、ボタンの雛形を作りましょう。

<div>をボタンに見えるようにスタイルを設定する

次にdivがボタンに見えるように見えるようにスタイルを設定します。

ボタン風にするポイントは下記の2点です。

  1. padding: 10px 15px;でボタンの領域を調節する
  2. display: inline-block;を指定する

cursor: pointer;を設定する

最後に、マウスカーソルがあたっと時にカーソルが指マークに変わるようにcursor: pointer;で設定しましょう。

毎回CSSスタイルの事について調べるのは辛くありませんか?

CSSには沢山の種類があります。HTMLと組み合わせると、デザインのコーディングは非常に多くのやり方があり、常に最新の情報を追っていくのは、上級者でも大変です。

特に初心者の場合、どの情報が最新なのかわからず、知らない内に今では使えない古い知識を使っていたなんて事も多くなるのでは無いでしょうか?

そんな時、まずは最新のWeb動向や調べ方、知識を一定水準まで仕入れる事ができ、更にこの知識は古いものだから別のものを探そうと判断出来るようになりたくはないですか?

CodeCamp Webマスターコース」では、最新のHTML5とCSS3を使って授業を受けながら、わからないところは「個別指導」時にわからないところや疑問点を経験豊富なエンジニアに聞くことが出来ます!

CodeCampで学ぶと得られるメリットは下記の3つ

CodeCampで得られるメリットは沢山あるのですが、その中でも主要な3つを紹介します!

CodeCampで学ぶと得られるメリット
  • 時間・場所は選ばない: オンラインなので、仕事や学業と両立可能
    毎日朝7時〜夜24時まで時間や場所を選ばずに学習出来ます。また、365日・世界中のどこでも受講が可能です!もちろん、地方の方もOK!
  • 個別指導が受けられる: 課題の提出・添削は無制限
    自分が出来るようになるまで、課題の提出・添削は無制限で受けられます
  • 受講者数 No.1※ : オンラインプログラミングレッスンNo.1、満足度94.6%※
    実践的なテクニックや質の高いフィードバックのあるおかげで、高い満足度があります!
  • ※日経トレンディ別冊調べ:調査日 2016年10月31日
  • ※満足度:会員向け、レッスン評価アンケートの集計結果より(2018年10月-12月期)

更に、CodeCampは無料体験レッスンも実施しており、「良い方が担当者さんだった!」と、多くの口コミも広がっています!

気になる方は、下記をクリックして無料体験レッスンを受けられるので、申し込んでみてください!

最後に口コミのまとめ