cursorプロパティについて調べてみた。

未来電子テクノロジーでインターンをしている田島一毅です。プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

progateでcursorプロパティについて学んだ

現在僕は、プログラミング学習サイトのprogateでHTMLとCSSを学んでいます。
その中で、cursorプロパティというものを学びました。
cursorプロパティとは、以下のようにして、マウスカーソルが目的物に乗ったときにマウスカーソルの形を変化させるCSSプロパティです。

××{
  cursor: 値;
}

プログラミング初心者の僕は、マウスが乗ったときにマウスカーソルが指の形に変化しただけで非常に感動しました。
コーディングが非常に簡単なのも、感動の理由の一つです。
そこで僕は、cursorプロパティでマウスカーソルをどんなものに変化させることができるのか調べてみることにしました。

cursorプロパティで意外といろいろできる

調べてみると、cursorプロパティでマウスカーソルを様々な形に変化させることができることを知りました。
今回は、その中でも僕が気に入ったものをピックアップして紹介します。

1.auto

××{
  cursor: auto;
}

autoは、初期値であり、状況に応じてマウスカーソルの形が変化します。リンクならpointer(人差し指)になり、テキストならtext(Iビーム)になります。

2.pointer

××{
  cursor: pointer;
}

pointerでは人差し指を表示し、主にリンクで使われます。
progateでは最初にこれを学びました。

3.text

××{
  cursor: text;
}

textはIビームを表示し、主にテキストで使われます。

4.not-allowed

××{
  cursor: not-allowed;
}

not-allowedは、道路標識の進入禁止マークのようなものを表示します。
初めて見たのですが、メンテナンスなどで操作ができないものがある時に、「操作不可能」の意味で使うことができるなあと感じました。

5.resize

××{
  cursor: 方角-resize;
}

resizeはある方向へのサイズ変更を表すために、矢印を表示します。
resizeは僕が一番面白いと思ったcursorの値です。
その理由は、その方角の表し方にあります。
例えば上は、northern(北)のnをとって、

××{
  cursor: n-resize;
}

といったように表します。
ここが面白いなと感じました。
左下ならsouthwest(南西)よりswとなります。

このほかにもいろいろある

今回は5つの値を紹介しましたが、値はまだまだたくさんあります。
よかったらぜひ調べてみてください。