CSS cursorでカーソルの形変更する方法と一覧をサンプル付き解説(指や矢印など)

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

CSS cursorとは?

CSSのcursorとは、マウスカーソルの形状を変えることができるプロパティです。

CSS cursorの書き方・使用例

cursorを変更するには、下記のようにしてCSSを設定します。

〇〇 {
  cursor: カーソル名 又は URL;
}
合わせて読みたい

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

これを実際にCSSに起こすと、下記のようになります。

.elem {
  cursor: move;
}

左のテキストでは、実際にcursor: move;を設定しています。マウスカーソルを当てると、変化します。

このcursor: move;は、javascriptで要素をドラッグアンドドロップして場所を変更する場合等に使われます。

カーソルを変更するには、種類を表すキーワードを組み合わせます。キーワードには、下記「cursorのサンプル一覧36種紹介」で紹介しているものが使えます。

MEMO

マウスカーソルはどの部分でも変えられる!

上記の例では、<p>に対し適用しましたが、<div> <a>など、要素ごとにカーソルの値を自由に変えることが出来ます。

直感的にわかるように、うまく組み合わせてユーザーにわかりやすくなるようにしたいですね。

CSS cursorのサンプル一覧36種紹介

cursorで使うことの出来るキーワード全36種をサンプル付きで紹介します。

表の1行1行に対応したカーソルに変化するように設定しているので、ぜひ確認してみてください

上記の表の例では、「Mac」の場合のイメージ図を使っています。Windowsの場合は表示が異なりますので、ご注意ください

CSSの「grab」「grabbing」のベンダープレフィックスは必要ない

一昔前は、grabgrabbingの対応しているブラウザは少なかったので、「ベンダープレフィックス」というブラウザごとで提供している実験的な機能を使う書き方をしなくてはいけませんでした。

ところが、その実験的な部分はなくなり、正式に取り込まれたため、今ではベンダープレフィックスの必要性はなくなりつつあります。

上記の画像は、grabgrabbingの対応ブラウザを示しています。

それぞれの面積の広さが、ブラウザごとのシェアを表しています。そして、grabgrabbingのベンダープレフィックスが必要なブラウザのバージョンは、Chromeの項目の上の「4-67」と書かれてある部分と、Safariの一番上の(もう文字が見えないほど層が薄い)部分だけです。

これから分かる通り、ベンダープレフィックスが必要なのは、本当に一握りのユーザーだけなのです。

ブラウザが対応していないcursorだったらどうなる?

そのようなときのための回避策ももちろんあります。対応していないcursorだったら、別のcursorを使うように設定しておく事が出来ます。

書き方は下記のようになります。

〇〇 {
  cursor: 値1, 値2;
}

このように、,(カンマ)区切りで複数のcursorが出来ます。cssのfont-familyのような使い方ですね。

最後まで利用できるcursorがなかった場合、初期値であるautoが選ばれます。つまり、リンクテキストならpointerになり、普通のテキストならtextになります。

参考

CSSのcursorは仕様が下記サイトで定義されています。詳しい情報が欲しい場合は、英語ですが下記サイトから確認できます。

参考 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (CSS 2.1の仕様)w3.org 参考 6.1.1. Styling the Cursor: the cursor propertyw3.org

毎回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は無料体験レッスンも実施しており、「良い方が担当者さんだった!」と、多くの口コミも広がっています!

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

最後に口コミのまとめ